Rich Harris - Rethinking reactivity

[@jvcmarc]

just because modern hardware can handle inefficient software, doesn't mean we should start writing inefficient software love what svelte is doing!

[@8koi245]

Yeah! the payment company was such a good example

[@romankabiev]

real world is different

[@smajdovamanka]

So Erlich Bachman does frontend now? Killer talk btw.

[@derHINDU]

Thought the same! :D

[@swyxTV]

JIAN YAAAAANG

[@vanishivanand123]

He is mostly speaking about percieved performance but not the actual performance. The complex apps need actual performance as well. That's why Virtual DOM.

[@randomuser66438]

​@@vanishivanand123 Svelte's repository says it surgically updates the DOM. Isn't this the whole point of VDOM? What else do you need VDOM for?

[@vanishivanand123]

@WebDev how does it surgically updates the dom? It keeps the references of the Dom nodes directly, right? Then why not the data structure that holds these dom nodes is called a vdom?

[@iyifr]

Top 10 greatest tech talks of all time

[@blitzritz]

I literally gave a standing ovation after watching this talk.

[@0011usagi]

I did a reverse kick flip after watching this talk

[@lordswaggity1213]

I went out and got a hooker after watching this talk.

[@vercris]

I learned to play the piano in a week after watching this talk

[@zen-ventzi-marinov]

I reduced being angry from 20 times a day to 2 after watching this talk

[@hebestreitfan6973]

I gained the ability to levitate by watching this talk

[@HPerrin]

Just now watching this video in 2022 after Svelte 3 took the world by storm. :D I'm so happy Rich's hard work and great ideas paid off so well. I remember writing components for Svelte 1, thinking to myself, "this is different in all the best ways." Svelte 3 really was a game changer.

[@sohan3443]

There are few things in life, which when you see for the first time, you absolutely fall in love with it, I think svelte is one of those things.

[@MrMartingale1]

I don't do JS, I don't do web development, yet I watched the entire thing. This was a presentation well delivered. Chapeau!

[@tjblackman08]

The first 2:30 of this talk has to be the best, most simplified, most relatable example and explanation of the problem with React and why Svelte is a solution. I absolutely adore this talk.

[@arwahsapi]

When a NYT graphics editor makes a compiler and gives a killer talk my life as a programmer is wasted.

[@swyxTV]

not wasted. you can do this too :)

[@fltfathin]

he can do it BECAUSE he is NYT graphic editor, a normal programmer will have mountains of works in his backlog, no time to make library

[@ryanleemartin7758]

He is a programmer though and his job as a "graphics editor" involved quite a bit of development on large amounts of data . He didn't just close photoshop one day and go... hey I'll make a compiler and reinvent web frameworks again!

[@HPerrin]

Rich Harris is quite possibly one of the most talented programmers in the world, so I think you're fine.

[@surjist]

Arwah, celebrate and emulate, he's giving us a gift of empowerment. I'm in!

[@tyshanthedev1985]

I've watched this talk probably about 5 times now. Amazing work.

[@ezwalduzumaki3161]

true, my iq rises by 200%, i listen to him when i code lol xDD the passion and goal driveness in his code

[@swattertroops-yaaa]

@@ezwalduzumaki3161 how do you understand

[@shapelessed]

I haven't finished or otherwise I'd have vommited my stomach out each time he spits to his microphone... Highly prefer a scripted version though...

[@ganeshacharya234]

One of the greatest talks ever. Makes you stick till the end without breaking a sweat

[@fufanuu4395]

still the most important talk of the past 10 years for any front end dev.. if you're still using react and vue you're missing out.. after 8 years of React I switched to Svelte and will never look back.. Breath of fresh air.

[@gto433]

Hey what do you think about the magic that happens under the hood? Why do people call it that?

[@rouenyu]

I hate react and I kinda love vue. What do you think is the game changer between Svelte and react ? I'm a backend dev for most of my career.

[@dmitrynagorny4100]

Ok, so we finally back to compilers. I love Svelte!

[@nicedreammmm]

This is the way to the future of web programming. Thank you Rich Harris!

[@bikeforprotv7184]

I love when people solve a problem by asking a new question. Very impressive talk.

[@gauravsharma1455]

This pretty good. Removing unnecessary bloat from front-end. Front-end is meant to be beautiful and meant to be easily prototype-able. React is pretty good too, but Svelte takes it to a whole new level. Really enjoying learning Svelte, pretty easy, very easy to understand.

[@thelenardjourney8525]

Ease of prototyping is what i love most about svelte

[@wombat7961]

​@@thelenardjourney8525 yeah thats what i loved about coding it used to be possible to make a website mockup within an hour for me but then react happened

[@roohulah]

New hope for javascript , The beautiful, fast, simple and new way for tomorrow. Thank's Rich, Continue with power ...

[@nocultist7050]

There is a nice feeling when someone out there in the world thinks just like you, but actually puts the work into making it real.

[@iamtheiconoclast3]

It's incredible how critical people can be about this idea... as if compilers were somehow a fringe concept that should be subject to immediate skepticism or even incredulity, rather than, you know, a tried and tested paradigm of software development. Write code in a way that's good for humans, and then transform it into code that's good for computers. This is hardly a novelty and certainly not a fringe idea; what amazes me beyond belief is that it's taken this long for such a reliable, proven concept to enter the Javascript world. I'm endlessly glad that it has - and that when I first had the idea, I discovered that it had already been done for me. Great talk!

[@BlueBetaPro]

Damn JavaScript is finally production ready.

[@BlueBetaPro]

@@user-if1de8pt2j No it's not, it's Unicorn tears, Leprechaun gold and Phoenix Flames from Fawkes.

[@devotiongeo]

this comment made my day! :)

[@Ryu53898]

DB invalide html ?

[@Yetipfote]

Hopefully it was worth the weight!

[@okie9025]

No programming language is production ready according to that logic.

[@meansnada]

What an amazing presentation. Watching it on 2021 but dear God Richard... you just blew my mind. Thank God for people like you. I'm gonna try my best to bring Svelte to wherever I go!

[@JeremyAndersonBoise]

I was shopping for a new front-end paradigm, and I found it. Svelte and TailwindCSS changed my ...everything. Vue components are being converted to Svelte in a few minutes, with half the SLOC, bundle size reduced from 3MB to about 100kb, identical functionality and outrageous performance. I'll never look back.

[@bikhoda6508]

This is revolutionary. I bet Svelte will take over frontend dev world soon, as it really deserves it.

[@hdbxx]

This was *exactly* what I was trying to achieve in order to run an interactive web content on low-powered devices. Killer talk and killer engineering, cheers !

[@philtrem]

10:45 is the moment people are supposed to applaud. Seriously, this is really good... Having spent time to learn React, I'm not sure I'm ready to take on Svelte, but what he's showing is definitely interesting... 15:46 as well..

[@neuroxik]

I was expecting the same

[@RenatoPassosSantos]

It's just that Rich Harris didn't pause for the applause (I don't think he's that type of guy....). :D

[@MCasterAnd]

A talk, and a framework, that keeps on giving. You had me at the todo-list, then you captured my heart when you showed me transitions. Man I have battled many transition states with React.

[@denniszenanywhere]

I often pass by the NYTimes Bldg in a hurry. Now I'll think that's where Rich Harris works. And I hope to work there too someday.

[@TannerBarcelos]

Rich is one of the few amazing presenters. He really did create something special in Svelte.. it’s so different, so perfect, so..right

[@karlbooklover]

One of the best web-framework talks I've witnessed

[@rancho890]

One year later and still blown away. Why isn't everyone using this?

[@binitrupakheti4246]

One of the best talks on anything ever.

[@tobiaswolter278]

This video sums up the shortcomings of React & Co. I'm sure Svelte will have a great future.

[@mbryzek]

Fantastic presentation. Thank you for (re) introducing reactivity in such a clear and simple presentation!

[@tmarsha4]

My team watched this over a Brown Bag lunch... Everyone clapped at the end.

[@joeharker7918]

What a great presentation, Rich! After years of framework fatigue, Svelte is actually making me excited to get back into web development again.

[@AndreyLuizDev]

I am a React developer. And I am feeling programming in COBOL. :P

[@claudiojrdev]

That's exactly how I felt when working with Angular when I found out about Svelte :-P

[@exactzero]

HAHAHAHAHAHA

[@OggerFN]

COBOL is a bad comparison as it's just very low level. What the virtual-dom frameworks do wrong is obfuscating about unnecessary details while not pinning down the main problems. If my framework isn't truly reactive why even use it?

[@AndreyLuizDev]

@@OggerFN No, that's not the comparison. I mean that React is aging very badly, just like COBOL.

[@OggerFN]

@@AndreyLuizDev true

[@cevxj]

Excellent. I started programming before React and stopped before i had to learn it. Now, i’m back and the smell that was react doesn’t stick to the frontend anymore. I consider myself lucky, thank you.

[@MohamedEmaish]

Amazing work, and presentation. Thank you Rich Harris!

[@artemeesenin9552]

This is INCREDIBLE! Amazing, thank you for all the ideas and work that you do, Rich!

[@ashneilroy]

Excited to try Svelte. I just got a new computer because Angular CLI/build tools were so resource intensive. You know there's something wrong when a webpage takes 2 minutes to build each time you make a change.

[@jonbikaku6133]

or maybe it was your laptop ey? :p

[@DarkoLuketic]

@@jonbikaku6133 yup because mine doesn't take 2 minutes every time I make a change, it feels instant

[@HA7DN]

I always hated frontend work, to mess with UI, styles, and those big states. I always tried to avoid it and be a backend. Now, after watching this, I WANT to try it again.

[@jagmeethanspal]

What a wonderful concept, a great architectural work. Coming from a C-language, embedded and telecom protocols world, reading about all the variety of javascript frameworks was just mind-boggling. Svelte definitely makes sense. People who have worked in the lowest system layers / embedded / data-path understand this where performance is paramount and we never had the luxury of memory/cpu available to application programmers. Comparing with the other frameworks, now looks like comparing interpreters and compilers. Compiling is better for speed, as well as for syntactic accuracy checks etc etc. I am not sure if this causes some side-effects though where building the code makes the language less dynamic or functional. Like type definitions (C/C++) vs dynamic types (javascript) and many other functional/dynamic language features. Compiler for the web-apps, this seems really big to me! Can't wait to learn more. And really nice way you explained the intericacies in this wonderful talk. Thanks!

[@hamzah.7317]

legendary talk , i watched it 3 times in 1 month

[@derekh49]

Great presentation. What's the presentation tool he's using that allows him to embed web page to his presentation so he can jump between demos without changing screens?

[@sefirotsama]

most probably a self made webpage with svelte itself

[@jeetadityachatterjee6995]

Alot of the demos were from the svelte tutorial. I am pretty sure that he just combine them in a presently way

[@jim.....]

no demo demons this time, great presentation

[@Klaster_1]

Great talk, now I want to try Svelte. Doesn't Angular: 1. AOT compile DOM changes into imperative updates too? 2. Handle the CSS encapsulation in a similar manner, but with :host selector? 3. Omit compiler from production build and allows to tree shake some of framework parts?

[@wiswis]

correct, but Ivy is still not here, Angular +2 has had a compiler since its early days and it also uses a superset of HTML similar to Htmlx.

[@isdeonf]

In my experience Angular 2+ applications can easily surpass the 1MB threshold in medium-to-big applications. It just turns into a pain in the ass to keep a low footprint using it.

[@not2day646]

@@isdeonf they are working on a compiler that should come out in the next update that will make those bundles much much smaller

[@useruser-ti1og]

Not only an amazing dev but an amazing speaker as well!

[@vigilantezack]

Amazing, I have to try Svelte now, for sure! One thing I missed though, the CSS was automatically encapsulated, but what about if you actually DO want it to flow down to included components? Or, for example, to have a parent component's styles override those of the child, for example for themeing or something? I feel like there needs to be some more options when it comes to overriding or extending CSS down through components. What if you have a top-level, project-wide CSS block for all your global styles, but you want to have some basic default styles only on a button component, which are only overridden as necessary from a parent component?

[@exactzero]

I think you'll have to adjust your component-specific styling and not your global ones.

[@Dylan_thebrand_slayer_Mulveiny]

Use conventional css/style sheets for global styles.

[@stormwarrow]

Maybe use.. CSS?

[@zag2art]

$: svelte = svelte + 1

[@arishshah1142]

Better, $: svelte = react +1

[@vikashsaini678]

@@arishshah1142 I am sorry if you found it offended. But I want to correct you :)

[@zkiplan1667]

Infinite?

[@akash-kumar737]

I guessed at the start that he is going to talk about svelte.js

[@ckieee]

svelte++

[@cebuanoninoy]

Rich should consider putting the tagline that he just uttered on this conference: "Svelte putting JavaScript in our HTML instead of HTML in our JavaScript". 10:47 shows that.

[@Tristan97122]

Absolutely amazing talk!

[@codeaperture]

Harris is the official god of JavaScript. Confirmed and here we go

[@reristavi]

I love Svelte! I am working already for so many years with all other frameworks and Svelte is so cool and interesting. Simply love it.

[@vipinajayakumar]

Mindblown. A fantastic talk!

[@deenriqo]

Very good talk :) . At 28:00 , to be fair maybe you should have mentioned that this is exactly how Vue deals with styles. :)

[@MmmMmmGood17]

How cool was that dependency graph on the spreadsheet!! 😁

[@fev4]

such a great talk, it ages like wine

[@zheng2hao]

was looking through React tutorials to start learning it but somehow accidentally came by Svelte. immediately a fan. there's no way back.

[@raiyansarker3809]

Never heard so structured speech before, it is as good as svelte!

[@Voltra_]

25:37 Would be interesting to have benchmarks that compare these implementations with a Qt Quick one as well as a regular Qt one

[@ocemynocemyn9471]

Haven't written a single line of JS last 10 years. Just heard rumours about ReactJs, few things about AngularJs. I wanna build a website with Svelte now. Really impressive.

[@jacobsultd]

As a newbie working with Angular.. I'm all in to dev with Svelte.. Thanks.

[@justinkim7202]

My mind got blown away. Went straight to try it out and I see a bright future for Svelte..

[@clewfirstcfer]

Amazing. This is exactly what I was digging for: something that can truly wrangle the total morass of web development. I almost gave up.

[@PeterBernardin]

Rich Harris is awesome. And Svelte is awesome.

[@mohanphpmysql]

Great Talk! Svelte is different. It makes me to realize the true power of compiler. Thank you

[@ConciseCabbage]

21:58 - He never showed Svelte in asynch mode :/

[@AndreyLuizDev]

Is it needed in Svelte at all? Did you saw how fast it is even synchronously?

[@ConciseCabbage]

Andrey Luiz - why not? Rich just got done saying that every bit of performance does matter. I don’t think we should settle for being “almost as good as asynchronous react”

[@DanAbramov8]

@@ConciseCabbage Note asynchronous rendering isn't just about "update performance". This thread might give you more details: twitter.com/dan_abramov/status/1120971795425832961.

[@keramaswiguna9434]

Thank you Rich Harris, this is awesome 😍😍

[@Andrey-il8rh]

This guy just blew my mind. He looks like an Einstein presenting a relativity theory!

[@oliverweiss7175]

Why isn't the 'transitions' text removed from the DOM, when visible===false at 30:20 ? I though the if statement would remove it from the DOM or is it just a different behavior, because of the transition attribute? I am confused...

[@SherlockMen]

This is gold.

[@krycekaiolfi]

I'm always amazed how Rich is determined to make web development better. He has so many innovative projects that is hard to keep up. Great presentation, great project and disruptive ideas.

[@tptm]

What's under "Svelte alternative" "Asynchronous" radiobutton?

[@RomboutVersluijs]

how does a graphic editor come into this section? Nice talk!

[@BrianDeSousa]

Wow! Well done! Great job building excitement for Svelte for a newbie like me.

[@garrelt-mock]

What are the constraints of "this" he is talking about at around 8:20?

[@Seedzification]

you must be new to javascript.

[@mcw0805]

it's very fascinating to hear the background stories of where the inspiration came from

[@piano42]

18:22 I am missing a comparison to angular. Angular uses the real DOM too. Why use svelte instead of angular? I am also missing the testing tools.

[@najlepszyinformatyk1661]

angular is for sad people with suit and tie.

[@ravisavaliya1169]

Concept and presentation..just nailed it man❤️

[@leonk6950]

Really love the idea, although I kinda miss the "state" concept from react. It made it easy to think of the view just as a function from state to html, kinda like in elm. It still is that way, it just doesn't feel like it. Also, I'm gonna miss handling elements as js objects that I can pass around and create from functions. But I think the biggest thing svelte needs is a bigger ecosystem. Things like semantic-ui-react make development in react super easy, while you have to reimplement that yourself here or work with ugly classes.

[@scottamolinari]

Would have been great for him to cover how Svelte deals with routing and generic storage of data.

[@claudiojrdev]

If you mean client-side routing (SPA) there is this project I created to handle that: github.com/kazzkiq/svero

[@llihak]

Nifty presentation and Svelte is a nifty framework. 36:40 - I heard that Sapper is going away?

[@damienderbes1962]

Coding web stuff today with Svelte brings back ol' gut shakes we had when coding successfully in Assembly or C. Something that cruelly miss when using actual frameworks. OO and patterns are just no-nonsense stuff, once caught, they can be implemented even without fancy stuff. Many thanks from an ol'timer coder & patterns lover!

[@pierbover]

Everyone bow to the god of JavaScript

[@ChristopherEsplin]

Seriously. This is inspiring. Where has Rich Harris been all of my life?

[@az_911]

@@ChristopherEsplin he expected his time to conceal

[@cuzbo_]

most inspiring video of 2019

[@tamilvendhankanagarasu7651]

SvelteScript? It would be the turn around point like `hooks` to react. But, only little bit longer than `hooks`.

[@f1amezof]

Why not to use getter\setter syntax to make reactivity native? p.s. Svelte = Vue on steroids

[@emstudios14]

Love this talk!

[@Karlponken]

"When you say best in class performance, it's like you're standing in front of the mirror saying 'candyman' 5 times, I will appear behind you" That is absolutely brilliant 🤣 Great talk!

[@loydthabartender5794]

I've been looking for something like this for years. An easy to use front end framework for personal projects that gives you the power of templating engines and component based designs without getting in your way by forcing you to write tons of boilerplate because it assumes you are writing an enterprise app (*cough* Angular) I've been messing around with it for a few hours and I already have a basic CRUD app running with bootstrap. I really hope this project takes off.

[@Kawaiiization]

Am I the only who thinks this talk will be down in history?

[@clintkennedy8387]

The candyman reference was hilarious. Exciting stuff, but I'm interested to see what a large svelte app codebase looks like. What about typescript support? I've come to greatly appreciate using TS with react.

[@movax20h]

Why it took 25 years to get here? I am not a frontend developer, but always wanted dependency tracking just like svelte, when writing javascript / html pages.

[@satyaswaroop9083]

This one is a life saving 🙌 Great work "Ritch Harris " and your development community 👏 👍

[@olegchursin]

Great work! I'm in!

[@paramsingh4104]

I'm sold to the idea! React has been stretched way too far. I miss the Angular and Vue style syntax of having JS in HTML instead of HTML in JS in disguise of JSX (too much against web standards).

[@judegao7766]

Does anyone have the link to the KZbin he mentioned near 17:20?

[@Troy-ol5fk]

The spreadsheet is a really good example

[@WebJeda]

This is the only video I have bookmarked.

[@lamztiffany]

Can't wait to try out Svelte and show it to the team during Lunch & Learn!