00:00:00 - Introduction 00:01:10 - Sliders 00:02:11 - Parallel World with JavaScript 00:04:16 - Personal Homepage 00:06:24 - Song Lyrics Website 00:07:20 - Conclusion 0:07:27 - Loading Data into the UI 0:10:35 - Navigation in the UI 0:13:15 - Adding Interactivity with Comments Widget 0:14:45 - Weird URL and React 0:15:17 - Exposing Functions as Callable 0:16:19 - Opting into Server Actions 0:18:00 - Updating Data with Server Actions 0:18:29 - Expressing Slow Load States 0:20:45 - Showing Suspense Load in Fallback 0:22:17 - Annoying Page Reloads 0:23:14 - Fluid Transitions Between Pages 0:24:00 - Adding Client-Side Code 0:25:10 - Making Apps Fully Interactive Instantly 0:25:55 - Passing Information into the Tree 00:29:43 - Switching to Real React 00:33:08 - Integrating Server and Client in React 0:37:18 - Tracking Actions and Providing Loading Indication 0:38:40 - Tying Everything Together 0:40:21 - Making a New Paradigm Work Powered by CZcams Chapters youtubechapters.app/?v=zMf_xeGPn6s
I’ve got my opinion about the man. The fact that the React doc recommends using a framework feels as a give up, and now he’s taking a more vocal role which I think is what he really wanted, and also the reason why people think he made React, and other people that he made Redux. (It was a whole team and not even his idea)
The joy I felt when you finally did the server action..... This is coming from a long-time Laravel developer. but still, we can't do that in Laravel with that level of control in a few lines of code. Can't wait to see how it will mature overtime.
It looks cool, could the page updater shim that was added to make internet explorer update the page asynchronously be added to the tor browser safely? Tor and i2p are both serving data to browsers with client side Javascript disabled.
I think it is hilarious how we go in circles when it comes to web technologies. We went from php to mvc apps to api + client apps to microservices and then back to monolithic apps with newer frameworks like next js, and now going back to php with a shiny new wrapper lol
So many haters. Awesome presentation. Dan did a great job explaining how React and Remix solve fundamental issues with the browser, server, and internet.
Hey Dan! Thanks for the demo! Don't let the negativity of some people in the comments ruin your day. The demo was cool, and it clarified some things for those of us who care.
Thanks for this talk, Dan. It cleared out lot of confusions I had with server components. One question though, I'm wondering what's stopping automating the process of injecting server code into client code and wise-versa instead of having to explicitly mention 'use-client' or 'use-server. I would like to hear your thoughts on this. I hope future versions of React automate this and lessens the developer errors.
That's something that the bundler needs. Unfortunately, the existing bundlers are not that smart, so we need to explicitly set those annotations and tell them on which side each component/code is running
Hey Dan The comment section mostly ugly, but the ideas and solutions that you presented here makes much sense to me. How I saw it: the idea behind this paradime - to empower the usage of web primitives and server-rendering in parts of web app where it's sufficient, while keeping full power of all the unique React features such as Suspense/Concurrency for dynamic parts. And what's most important to have unified runtime(framework / mental model) for both client and server sides of the app. What we saw on demo is fully interactive server-rendered app with absolute minimum of javascript, but with powerful primitives for handling loading states, suspending parts of UI, async server actions and seamless binding data between server & client out of the box, without writing single line of server-framework code. Isn't it impressive? I'm sorry if my language wasn't entirely clear, but I hope you get the point.
Nice Talk Dan. As a regular app developer, initially I thought SC is going to be a huge mess. Now the idea of server components started making sense to me. Keep innovating, keep discovering new layers of React. As usual, *Let everyone 'React' first and 'Adopt' later.* Honeypot - prepare notes for part 2 🤗
I don't understand why the background theme changed on the layout. The page uses a db.await to get the theme on the server. The client component calls a server action to update the data on the db. Is the page aware of the db update hence the refresh? Is there something I'm missing?
@@itakpeemmanuel5863 yes. Its like refetching an html document. But with RSC it returns a json-like format, jsx tree, to still persist the DOM state. In RSC, the routing is server-centric. Server is aware about the routing. This is the reason why you can send jsx tree. Unlike with typical React app, e.g create-react-app, which is more on client-centric.
Good question. In the past we went from monolithic apps to microservices and bffs, so why do they keep highlighting this feature? Perhaps the super pragmatic devs who doesn't care about proper architecture see server actions as an opportunity to take a shortcut and use it with direct database access. However, I think it's a lot more viable if you see server actions as a replacement for the BFF pattern that has snuck in lately, to help offload business logic and remove complexity from the browser and frontend code. So to my understanding server actions is an alternative to BFFs - not microservice API's with direct db access.
I have extracted for you the key points of the speech, do not thank: am, hm, you know, ya, ah, aah, so, you just, you know, haaa, like, aam, aa, ya, oh, ya, I'm I'm I'm, like, ya, you know, aaar
react went a little too far... react is trying to solve... not listening and helping... from class to hooks good... but next is just a awful. a good company, selling a good product.
This type of thing is what is making React much more of a chore. Dan may be great with it, but the React concept overall is just meh. Fortunately new options are emerging.
@@theLowestPointInMyLife Solid is fine, but not nearly as convenient and clear as React is. When the app starts to grow, those signals don't seem so convenient anymore. I'm really glad React team is pushing against the signals hype bs.
@@kevin00898 almost everyone agrees it's far clearer than react, and fine grained reactivity with signals is the way to go, reacts rerendering is an absurdity in the modern world
@@__jan uh what are you on about. jsx compiles to createElement function calls. It’s still JS. Behaviour is predictable if you know JS. While svelte is a totally different language. Given a svelte codebase it’s not clear exactly what the compiled JS will look like.
Nothing personal by I never felt comfortable listening to Dan. Which is the exact opposite feeling I have for folks like Rich or Evan. I naturally dispise any hero-ification of developers. I think having a 'following' is an immediate sign for something going very wrong with tech/the framework/whatever. It purely means this guy can come up with whatever and his followers are going to blindly think its a good idea.
why would having a following be a sign of something wrong?.. I think you're implying group think, when in reality he just has a good track record and a blog that's helped a lot of people
@@Sammi84 "You either die a hero..." When you build enough things, some of them will be bad. But I'll follow the guy who built redux over the guy who didn't.
@@Sammi84 on a less dramatic note... i think part of the reason people follow Dan is because he doesn't oversell himself and he acknowledges his mistakes. He himself says most people shouldn't use redux, and he wrote a full blog article about all the stuff he doesn't know. If you had to pick one person to follow in the community to learn and know what's goin on, he's a good pick. I'm half joking with the batman quote because the OP mentioned "hero-ification" but also it's also kinda true no? The guy makes multiple frameworks and changes that are core to the react ecosystem, writes an amazing blog, and then people give him flak. If you get too popular and do too much, people end up attacking you.
i think it’s fair this talk was pretty raw. i usually practice for a few weeks but in this case i was a bit overwhelmed - but still really wanted to do this talk - that i finished the demo a couple of hours before the talk and finished the sequencing half an hour before the talk. although i am ashamed of my poor time management skills and overly optimistic estimation for how long it would take to get virtual DOM diffing working in internet explorer six, i think the overall structure of the talk makes sense, and it is not a bad talk. i will try to work it into a blog post at some point or record a cleaner version so that you can enjoy it too.
@@DanAbramov8 For someone like me that wasn't up to date with server react it was still interesting, I'll still have to read docs to learn to use it but it gave me an idea of what's possible. Sure the delivery wasn't great but you tried doing something different with xp / ie and if anything it makes it more relatable to when you're writing your own code and weird stuff goes wrong!
А что в нем хорошего? Продвигал Redux, а теперь продвигает это, Redux уже плохо использовать видите ли. Через пару лет и Remix станет плохим. Абрамов - это консистенция всех плохих решений в React сообществе, и он распостраняет методологии на весь мир, а разработчикам приходится использовать эту кашу из решений. Вспомните как React начинал. Легковесная библиотека, которая умеет отрисовывать компоненты. Виртуал DOM и тд. И напару с Flux состояниями она решает все нужды фронтэнда. А сейчас? На главной же странице с установкой React, идет совет сразу его использовать с 1 из 3 фреймворков, один из которых Remix. Все плюсы Реакта на его старте, давно уже не имеют смысла, он оброс кучей дополнительных идеологий, фрэймворков, которые идут в комплекте. При этом нет вразумительной структуры у проектов и стека, который не устареет через пару лет. React это просто распиаренная в свое времялиба, которая постоянно меняет свои подходы и топчится на месте, едет по накатанной, и Remix это еще один временный костыль на React.
@@DanAbramov8 I don't think people understand the problems you are trying to solve. That is why React innovates, others copy. I don't use React but I like the solutions you offer to. Thank you.
@@kevin00898 TBH the soluion he showed is not outdated, on the contrary a new and a better way to run isomorhic apps better than alternative solutions which open doors to using languages other than js on the server side.
This demo may be cute, but it represents a step in the wrong direction. Human time holds greater value than computer time, making these optimizations unnecessary. The amount of damage you've done to this community by these "oh look does your shit run on windows 98" is immense..
Why don't you learn how to make tech presentations and demo sessions from Google? Every rank-and-file engineer there making a demo is coming across as a master-mind, while Dan is nothing short of a school-boy, who is daydreaming while talking about stuff in a non-challant manner of his. Not good. Leaves empty space in the aftetaste.
This is probably one of the best explanations of "use server" and "use client".
Thank you for providing some information regarding what this video is about, because video title and description provide 0 information.
00:00:00 - Introduction
00:01:10 - Sliders
00:02:11 - Parallel World with JavaScript
00:04:16 - Personal Homepage
00:06:24 - Song Lyrics Website
00:07:20 - Conclusion
0:07:27 - Loading Data into the UI
0:10:35 - Navigation in the UI
0:13:15 - Adding Interactivity with Comments Widget
0:14:45 - Weird URL and React
0:15:17 - Exposing Functions as Callable
0:16:19 - Opting into Server Actions
0:18:00 - Updating Data with Server Actions
0:18:29 - Expressing Slow Load States
0:20:45 - Showing Suspense Load in Fallback
0:22:17 - Annoying Page Reloads
0:23:14 - Fluid Transitions Between Pages
0:24:00 - Adding Client-Side Code
0:25:10 - Making Apps Fully Interactive Instantly
0:25:55 - Passing Information into the Tree
00:29:43 - Switching to Real React
00:33:08 - Integrating Server and Client in React
0:37:18 - Tracking Actions and Providing Loading Indication
0:38:40 - Tying Everything Together
0:40:21 - Making a New Paradigm Work
Powered by CZcams Chapters youtubechapters.app/?v=zMf_xeGPn6s
There’s a reason why people used to think Dan created React, his understanding of React and his demos are always top notch😄
I mean he made redux! obviously we'd think he made react also 😂
czcams.com/video/5fG_lyNuEAw/video.html The one and only Jordan Walke (react creator)
I’ve got my opinion about the man. The fact that the React doc recommends using a framework feels as a give up, and now he’s taking a more vocal role which I think is what he really wanted, and also the reason why people think he made React, and other people that he made Redux. (It was a whole team and not even his idea)
I literally thought he was the creator until recently and I've been using React for 3+ years. 🤣
@@kikevanegazz325 No. It means it wants to stay what it was intended to be. Just a library for making usable components.
Amazing job, I still remember html tables and php and I love how much web development have changed, love from Colombia❤
Excellent!!!
Amazing demo, works flawlessly. Can't imagine the complexity behind to make all of this work
The joy I felt when you finally did the server action..... This is coming from a long-time Laravel developer. but still, we can't do that in Laravel with that level of control in a few lines of code. Can't wait to see how it will mature overtime.
It looks like “React on Rails” for me.
Presentation with windows XP, IE and this old-school site with running stings is awesome 😎
Thanx Dan❤
DAN is awesome. He made it really nice.
Oh my god did I have a flashback to my childhood when two minutes in Dan is talking about Sliders. That darn squeaky fence.
It looks cool, could the page updater shim that was added to make internet explorer update the page asynchronously be added to the tor browser safely? Tor and i2p are both serving data to browsers with client side Javascript disabled.
I like that this was rough around the edges, but still achieved in showing the power of moving the boundary of server and client.
When useTransition first came out, I thought it was an animation hook. I was super excited React providing animation hooks :D
And I still thought it is until seeing this comment
Turns out learning PHP early on wasn't a bad deal for so many web developers going forward, in the next five or so years.
this
I think it is hilarious how we go in circles when it comes to web technologies. We went from php to mvc apps to api + client apps to microservices and then back to monolithic apps with newer frameworks like next js, and now going back to php with a shiny new wrapper lol
Yeah, classic PHP and ASP are making a roaring comeback. We are back to the 90s.
So many haters.
Awesome presentation. Dan did a great job explaining how React and Remix solve fundamental issues with the browser, server, and internet.
The Windows XP desktop was just awesome !!! haha
WIndows XP really throws me back to the past memories
Hey Dan! Thanks for the demo! Don't let the negativity of some people in the comments ruin your day. The demo was cool, and it clarified some things for those of us who care.
This talk should be named "Dan trying to convince Remix OSS maintainers to integrate RSC"
Thanks for this talk, Dan. It cleared out lot of confusions I had with server components. One question though, I'm wondering what's stopping automating the process of injecting server code into client code and wise-versa instead of having to explicitly mention 'use-client' or 'use-server. I would like to hear your thoughts on this. I hope future versions of React automate this and lessens the developer errors.
That's something that the bundler needs. Unfortunately, the existing bundlers are not that smart, so we need to explicitly set those annotations and tell them on which side each component/code is running
Hey Dan
The comment section mostly ugly, but the ideas and solutions that you presented here makes much sense to me.
How I saw it: the idea behind this paradime - to empower the usage of web primitives and server-rendering in parts of web app where it's sufficient, while keeping full power of all the unique React features such as Suspense/Concurrency for dynamic parts. And what's most important to have unified runtime(framework / mental model) for both client and server sides of the app. What we saw on demo is fully interactive server-rendered app with absolute minimum of javascript, but with powerful primitives for handling loading states, suspending parts of UI, async server actions and seamless binding data between server & client out of the box, without writing single line of server-framework code. Isn't it impressive?
I'm sorry if my language wasn't entirely clear, but I hope you get the point.
He had me the moment he referenced Sliders 😅
Nice Talk Dan. As a regular app developer, initially I thought SC is going to be a huge mess. Now the idea of server components started making sense to me. Keep innovating, keep discovering new layers of React.
As usual, *Let everyone 'React' first and 'Adopt' later.*
Honeypot - prepare notes for part 2 🤗
Interesting talk... But to make a client/server boundary like that, wouldn't you need a custom router/bundler anyway? Also, any links to the code? :D
but, framework handle all that.
Anyone has the link to the repo?
cool demo
Where can we get source code of this demo?
I don't quite understand what he changed for 6th question, I only saw the change from 'server-react' to 'fake-react' in a json file, what's that?
Common Dan, everybody in React world knows you! You do not need to be so shy in front of us :)
what code editor is used here?
it looks like sublime text editor .... but webstorm is better ...
I don't understand why the background theme changed on the layout. The page uses a db.await to get the theme on the server. The client component calls a server action to update the data on the db. Is the page aware of the db update hence the refresh? Is there something I'm missing?
The page is not aware on the db update. Although you need to tell the RSC to reload the page. This is abstracted inside the db object.
@@denniscual4618 thanks. Like a full reload with router?
@@itakpeemmanuel5863 yes. Its like refetching an html document. But with RSC it returns a json-like format, jsx tree, to still persist the DOM state. In RSC, the routing is server-centric. Server is aware about the routing. This is the reason why you can send jsx tree. Unlike with typical React app, e.g create-react-app, which is more on client-centric.
My passion is to create User Interfaces!
thanks
yea looks great for certain scenarios the people wondering about the point probably never had the problem rsc tries to solve
What text editor is he using?
looks like SublimeText
Let's hope that Remix will decide to also adopt React Server Components after this talk.
Of course, they will not - The creators of Remix are egomaniacs!
@@mdmathewdc what framework have you created?
@@coldestbeer Remix
@@mdmathewdc i would like to apologize
I just noticed that he is using sublime text haha
i feel like their live preview for html and css is superior to others
I don't understand why do we need server actions? Not every app will connect frontend server directly to database.
Good question. In the past we went from monolithic apps to microservices and bffs, so why do they keep highlighting this feature? Perhaps the super pragmatic devs who doesn't care about proper architecture see server actions as an opportunity to take a shortcut and use it with direct database access. However, I think it's a lot more viable if you see server actions as a replacement for the BFF pattern that has snuck in lately, to help offload business logic and remove complexity from the browser and frontend code. So to my understanding server actions is an alternative to BFFs - not microservice API's with direct db access.
That Sliders reference! I loved that show, but sadly it got worse and worse over its seasons 😢
Please centralize this div for me kkkkk 😢😢😢
Always bet on React
There was a time people would have said that about jquery. Times change.
If React could do something good, it wouldn't need Remix
remix does uses react though?
Доклад зачётный, спасибо. Представляю сколько магии там с бандлингом и сплитингом :)
Uh... why does the video's description section say "Backstreet's back" but nothing else? Actually its a little creepy tbh.
server side rendering reference?
oh man.. not another hype.
oh no! I had just uninstalled sublime..
I have extracted for you the key points of the speech, do not thank:
am, hm, you know, ya, ah, aah, so, you just, you know, haaa, like, aam, aa, ya, oh, ya, I'm I'm I'm, like, ya, you know, aaar
react went a little too far... react is trying to solve... not listening and helping... from class to hooks good... but next is just a awful. a good company, selling a good product.
He has overreacted, I'm 100% sure
This type of thing is what is making React much more of a chore. Dan may be great with it, but the React concept overall is just meh. Fortunately new options are emerging.
why's it making it a chore?...if anything its making everything easier, thats the point
I wish you were right, but other options suck so much more :(
Solid has great potential but is stuck as part time volunteer thing while low IQ masses plow on with lame duck react
@@theLowestPointInMyLife Solid is fine, but not nearly as convenient and clear as React is. When the app starts to grow, those signals don't seem so convenient anymore. I'm really glad React team is pushing against the signals hype bs.
@@kevin00898 almost everyone agrees it's far clearer than react, and fine grained reactivity with signals is the way to go, reacts rerendering is an absurdity in the modern world
Svelte is more elegant.
But.... Rust, is even better. 🍌💦
Nah... HTML is the best programming language
Svelte is not js
Crablang is way better than your pathetic iron oxide 🦀
@@invinciblemode react is also not js, but at least svelte doesn't pretend to be, because its special syntax is only used in .svelte files.
@@__jan uh what are you on about. jsx compiles to createElement function calls. It’s still JS. Behaviour is predictable if you know JS. While svelte is a totally different language. Given a svelte codebase it’s not clear exactly what the compiled JS will look like.
Nothing personal by I never felt comfortable listening to Dan. Which is the exact opposite feeling I have for folks like Rich or Evan. I naturally dispise any hero-ification of developers. I think having a 'following' is an immediate sign for something going very wrong with tech/the framework/whatever. It purely means this guy can come up with whatever and his followers are going to blindly think its a good idea.
Couldn’t agree more. It’s cringy and amateurish
why would having a following be a sign of something wrong?.. I think you're implying group think, when in reality he just has a good track record and a blog that's helped a lot of people
@@rewazilol His track record includes Redux and the useEffect dependency array... These have since widely been regarded as a bad idea.
@@Sammi84 "You either die a hero..." When you build enough things, some of them will be bad. But I'll follow the guy who built redux over the guy who didn't.
@@Sammi84 on a less dramatic note... i think part of the reason people follow Dan is because he doesn't oversell himself and he acknowledges his mistakes. He himself says most people shouldn't use redux, and he wrote a full blog article about all the stuff he doesn't know. If you had to pick one person to follow in the community to learn and know what's goin on, he's a good pick. I'm half joking with the batman quote because the OP mentioned "hero-ification" but also it's also kinda true no? The guy makes multiple frameworks and changes that are core to the react ecosystem, writes an amazing blog, and then people give him flak. If you get too popular and do too much, people end up attacking you.
А lot of useless words at the beginning...
What was the point of this talk? 😅
he's giving an intro to the new server components thing?
have you learned english recently ?
@@Sacos0 I'm gonna learn it tomorrow
Only the most diehard React fanbois can sit through this. What a mess.
i think it’s fair this talk was pretty raw. i usually practice for a few weeks but in this case i was a bit overwhelmed - but still really wanted to do this talk - that i finished the demo a couple of hours before the talk and finished the sequencing half an hour before the talk. although i am ashamed of my poor time management skills and overly optimistic estimation for how long it would take to get virtual DOM diffing working in internet explorer six, i think the overall structure of the talk makes sense, and it is not a bad talk. i will try to work it into a blog post at some point or record a cleaner version so that you can enjoy it too.
@@DanAbramov8 The talk was really great and understandable. Thanks!
@@DanAbramov8 u did great im not even a big react head and I managed to sit through it with flying colors. that guy's prolly a hater
@@DanAbramov8 For someone like me that wasn't up to date with server react it was still interesting, I'll still have to read docs to learn to use it but it gave me an idea of what's possible. Sure the delivery wasn't great but you tried doing something different with xp / ie and if anything it makes it more relatable to when you're writing your own code and weird stuff goes wrong!
Когда вы будете в следующий раз называть русских - плохими, помните, что Дэн Абрамов из России)
В России все - русские? Живёт ли Дэн в России сейчас? Вот именно.
@dan_abramov. my view on r*ssia is that i left it, don't consider it my home, and am lucky enough to not need to go ...
А что в нем хорошего? Продвигал Redux, а теперь продвигает это, Redux уже плохо использовать видите ли. Через пару лет и Remix станет плохим. Абрамов - это консистенция всех плохих решений в React сообществе, и он распостраняет методологии на весь мир, а разработчикам приходится использовать эту кашу из решений.
Вспомните как React начинал. Легковесная библиотека, которая умеет отрисовывать компоненты. Виртуал DOM и тд. И напару с Flux состояниями она решает все нужды фронтэнда. А сейчас? На главной же странице с установкой React, идет совет сразу его использовать с 1 из 3 фреймворков, один из которых Remix. Все плюсы Реакта на его старте, давно уже не имеют смысла, он оброс кучей дополнительных идеологий, фрэймворков, которые идут в комплекте. При этом нет вразумительной структуры у проектов и стека, который не устареет через пару лет.
React это просто распиаренная в свое времялиба, которая постоянно меняет свои подходы и топчится на месте, едет по накатанной, и Remix это еще один временный костыль на React.
Sad attempt to sell ugly solution to keep outdated framework in business.
what do you find ugly about it? it’s not like there is even an API…
@@DanAbramov8 I don't think people understand the problems you are trying to solve. That is why React innovates, others copy. I don't use React but I like the solutions you offer to. Thank you.
@vnshngpnt You just angry because you did not take the time to understand the talk.
Outdated usually means there's a better modern solution. What is it then?
@@kevin00898 TBH the soluion he showed is not outdated, on the contrary a new and a better way to run isomorhic apps better than alternative solutions which open doors to using languages other than js on the server side.
How you can take serious the guy who's using win xp on mac ?
This demo may be cute, but it represents a step in the wrong direction. Human time holds greater value than computer time, making these optimizations unnecessary. The amount of damage you've done to this community by these "oh look does your shit run on windows 98" is immense..
I don't think you understood the purpose of this talk lmao
React sucks 🎉😮 for sure.
Any Alternative suggestion??
Nah fam. Get ratioed you hater
@@surajjha5623 svelte
@@surajjha5623 pure HTML5
@@ShadoFXPerino would recommend
yoo who the hell using windows xp to do js framework demo?
Why don't you learn how to make tech presentations and demo sessions from Google? Every rank-and-file engineer there making a demo is coming across as a master-mind, while Dan is nothing short of a school-boy, who is daydreaming while talking about stuff in a non-challant manner of his. Not good. Leaves empty space in the aftetaste.
bad hater, just bad
That would explain how Google suck at engineering so much. But hey, at least their demos are alright!
This comment is just pure hate. No content.
Dan did a really cool presentation - what is your problem?
@@kevin00898
> _That would explain how Google suck at engineering so much._
do you have any proofs? )
kya kar raha hai re dan?