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!
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.
@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?
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.
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.
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.
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 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
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!
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 !
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!
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.
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.
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..
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?
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.
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.
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!
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.
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?
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.
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?
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.
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...
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!
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?
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.
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.
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”
@@ConciseCabbage Note asynchronous rendering isn't just about "update performance". This thread might give you more details: twitter.com/dan_abramov/status/1120971795425832961.
5:20 I hardly know anything about React, but when I hear implementations like this, I go "WTF did the inventors think / did they ever go to an introductory algorithms cours *facepalm*"
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.
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.
as i see the react concurrent mode is more of human perception of high performance (or smoothness, wrong but most of the time we assume it is) it is trying to make it a default in react, so there no flashes or lags happens whether you're doing some changes faster to slower, in what combination of it, it will always keep the smoothness. so it's not really an answer to lower performance but its teaching are good for everyone..
Great talk, Rich was hilarious at times. That crowd was fairly rude in my opinion, interupting Rich halfway through his talk with random Q&A. Svelte is brilliant and only short sighted people can't see the possiblities.
just because modern hardware can handle inefficient software, doesn't mean we should start writing inefficient software
love what svelte is doing!
Yeah! the payment company was such a good example
real world is different
When a NYT graphics editor makes a compiler and gives a killer talk my life as a programmer is wasted.
not wasted. you can do this too :)
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
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!
Rich Harris is quite possibly one of the most talented programmers in the world, so I think you're fine.
Arwah, celebrate and emulate, he's giving us a gift of empowerment. I'm in!
So Erlich Bachman does frontend now? Killer talk btw.
Thought the same! :D
JIAN YAAAAANG
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.
@@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?
@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?
I don't do JS, I don't do web development, yet I watched the entire thing. This was a presentation well delivered. Chapeau!
I literally gave a standing ovation after watching this talk.
I did a reverse kick flip after watching this talk
I went out and got a hooker after watching this talk.
I learned to play the piano in a week after watching this talk
I reduced being angry from 20 times a day to 2 after watching this talk
I gained the ability to levitate by watching this talk
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.
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.
Ok, so we finally back to compilers. I love Svelte!
One of the greatest talks ever. Makes you stick till the end without breaking a sweat
I've watched this talk probably about 5 times now. Amazing work.
true, my iq rises by 200%, i listen to him when i code lol xDD the passion and goal driveness in his code
@@ezwalduzumaki3161 how do you understand
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...
This is the way to the future of web programming. Thank you Rich Harris!
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.
Hey what do you think about the magic that happens under the hood? Why do people call it that?
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.
Top 10 greatest tech talks of all time
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.
Damn JavaScript is finally production ready.
@@user-if1de8pt2j No it's not, it's Unicorn tears, Leprechaun gold and Phoenix Flames from Fawkes.
this comment made my day! :)
DB invalide html ?
Hopefully it was worth the weight!
No programming language is production ready according to that logic.
New hope for javascript
,
The beautiful, fast, simple and new way for tomorrow.
Thank's Rich, Continue with power
...
I love when people solve a problem by asking a new question. Very impressive talk.
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.
Ease of prototyping is what i love most about svelte
@@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
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.
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!
This is revolutionary. I bet Svelte will take over frontend dev world soon, as it really deserves it.
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 !
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!
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.
My team watched this over a Brown Bag lunch... Everyone clapped at the end.
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.
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.
Rich is one of the few amazing presenters. He really did create something special in Svelte.. it’s so different, so perfect, so..right
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..
I was expecting the same
It's just that Rich Harris didn't pause for the applause (I don't think he's that type of guy....). :D
One of the best web-framework talks I've witnessed
One year later and still blown away. Why isn't everyone using this?
I am a React developer. And I am feeling programming in COBOL. :P
That's exactly how I felt when working with Angular when I found out about Svelte :-P
HAHAHAHAHAHA
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?
@@OggerFN No, that's not the comparison. I mean that React is aging very badly, just like COBOL.
@@AndreyLuizDev
true
What a great presentation, Rich!
After years of framework fatigue, Svelte is actually making me excited to get back into web development again.
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.
This video sums up the shortcomings of React & Co. I'm sure Svelte will have a great future.
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.
Fantastic presentation. Thank you for (re) introducing reactivity in such a clear and simple presentation!
was looking through React tutorials to start learning it but somehow accidentally came by Svelte. immediately a fan. there's no way back.
One of the best talks on anything ever.
no demo demons this time, great presentation
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!
This is INCREDIBLE! Amazing, thank you for all the ideas and work that you do, Rich!
My mind got blown away. Went straight to try it out and I see a bright future for Svelte..
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.
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?
most probably a self made webpage with svelte itself
Alot of the demos were from the svelte tutorial. I am pretty sure that he just combine them in a presently way
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.
or maybe it was your laptop ey? :p
@@jonbikaku6133 yup because mine doesn't take 2 minutes every time I make a change, it feels instant
Amazing work, and presentation. Thank you Rich Harris!
Not only an amazing dev but an amazing speaker as well!
legendary talk , i watched it 3 times in 1 month
$: svelte = svelte + 1
Better, $: svelte = react +1
@@arishshah1142 I am sorry if you found it offended. But I want to correct you :)
Infinite?
I guessed at the start that he is going to talk about svelte.js
svelte++
Amazing. This is exactly what I was digging for: something that can truly wrangle the total morass of web development. I almost gave up.
This guy just blew my mind. He looks like an Einstein presenting a relativity theory!
Never heard so structured speech before, it is as good as svelte!
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.
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?
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.
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.
@@isdeonf they are working on a compiler that should come out in the next update that will make those bundles much much smaller
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...
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!
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?
I think you'll have to adjust your component-specific styling and not your global ones.
Use conventional css/style sheets for global styles.
Maybe use.. CSS?
Great Talk! Svelte is different. It makes me to realize the true power of compiler. Thank you
Absolutely amazing talk!
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.
Harris is the official god of JavaScript. Confirmed and here we go
Mindblown. A fantastic talk!
it's very fascinating to hear the background stories of where the inspiration came from
such a great talk, it ages like wine
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.
Rich Harris is awesome. And Svelte is awesome.
As a newbie working with Angular.. I'm all in to dev with Svelte.. Thanks.
How cool was that dependency graph on the spreadsheet!! 😁
Very good talk :) . At 28:00 , to be fair maybe you should have mentioned that this is exactly how Vue deals with styles. :)
Am I the only who thinks this talk will be down in history?
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.
angular is for sad people with suit and tie.
21:58 - He never showed Svelte in asynch mode :/
Is it needed in Svelte at all? Did you saw how fast it is even synchronously?
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”
@@ConciseCabbage Note asynchronous rendering isn't just about "update performance". This thread might give you more details: twitter.com/dan_abramov/status/1120971795425832961.
Wow! Well done! Great job building excitement for Svelte for a newbie like me.
Thank you Rich Harris, this is awesome 😍😍
What are the constraints of "this" he is talking about at around 8:20?
you must be new to javascript.
Everyone bow to the god of JavaScript
Seriously. This is inspiring. Where has Rich Harris been all of my life?
@@ChristopherEsplin he expected his time to conceal
The spreadsheet is a really good example
What's under "Svelte alternative" "Asynchronous" radiobutton?
5:20 I hardly know anything about React, but when I hear implementations like this, I go "WTF did the inventors think / did they ever go to an introductory algorithms cours *facepalm*"
Everything in retrospective looks dumber than it looked back then.
Concept and presentation..just nailed it man❤️
Finally. This is what I hoped UI programming looks like when I was going to write my first forms in early 2000's. How wrong I was at the time...
Does anyone have the link to the TH-cam he mentioned near 17:20?
Can't wait to try out Svelte and show it to the team during Lunch & Learn!
25:37 Would be interesting to have benchmarks that compare these implementations with a Qt Quick one as well as a regular Qt one
at 11:24 he talks about server side rendering. Can anyone send me a link to somewhere to dive into this concept a little deeper?
how does a graphic editor come into this section? Nice talk!
React/Svelte demos with FrustrationMeter are legendary
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.
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.
as i see the react concurrent mode is more of human perception of high performance (or smoothness, wrong but most of the time we assume it is)
it is trying to make it a default in react, so there no flashes or lags happens whether you're doing some changes faster to slower, in what combination of it, it will always keep the smoothness. so it's not really an answer to lower performance but its teaching are good for everyone..
Finally a good comment :)
SvelteScript? It would be the turn around point like `hooks` to react. But, only little bit longer than `hooks`.
man that's so fucking great. that's what I always wanted from my frameworks. Thanks
Wow. Alright, I'm sold. Gonna have to give this a try.
Great talk, Rich was hilarious at times. That crowd was fairly rude in my opinion, interupting Rich halfway through his talk with random Q&A. Svelte is brilliant and only short sighted people can't see the possiblities.
Coming from a reactjs ecosystem, this is truly and out of the universe thinking.
Talk was really good. I'm definitely going to give Svelte a try.
this aged so well
Very, VERY informative. Motivating also...
Absolutely loved it. Working with Svelte is enjoyable!