"React from Another Dimension" by Dan Abramov at

[@vbboud]

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 KZbin Chapters youtubechapters.app/?v=zMf_xeGPn6s

[@SeanCassiere]

This is probably one of the best explanations of "use server" and "use client".

[@sergeysmyshlyaev9716]

Thank you for providing some information regarding what this video is about, because video title and description provide 0 information.

[@WalterKimaro]

There’s a reason why people used to think Dan created React, his understanding of React and his demos are always top notch😄

[@apidas]

I mean he made redux! obviously we'd think he made react also 😂

[@geraldodev]

kzbin.info/www/bejne/a5eqkJ-vg9p4d9k The one and only Jordan Walke (react creator)

[@kikevanegazz325]

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)

[@varma8669]

I literally thought he was the creator until recently and I've been using React for 3+ years. 🤣

[@adityatripathi1904]

@@kikevanegazz325 No. It means it wants to stay what it was intended to be. Just a library for making usable components.

[@dante_ele]

When useTransition first came out, I thought it was an animation hook. I was super excited React providing animation hooks :D

[@dejibimbola]

And I still thought it is until seeing this comment

[@AhmadAwais]

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.

[@AttilaKerekesMe]

this

[@dugger8439]

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

[@tamal]

Yeah, classic PHP and ASP are making a roaring comeback. We are back to the 90s.

[@electrovlady]

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❤

[@aghileslounis]

Amazing demo, works flawlessly. Can't imagine the complexity behind to make all of this work

[@SebastianGamboaQ]

Amazing job, I still remember html tables and php and I love how much web development have changed, love from Colombia❤

[@PandPwned]

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.

[@Atmos41]

This talk should be named "Dan trying to convince Remix OSS maintainers to integrate RSC"

[@mikimaine]

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.

[@yoJuicy]

So many haters. Awesome presentation. Dan did a great job explaining how React and Remix solve fundamental issues with the browser, server, and internet.

[@kevin00898]

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.

[@ryanquinn1257]

Oh my god did I have a flashback to my childhood when two minutes in Dan is talking about Sliders. That darn squeaky fence.

[@nattysweg343]

I like that this was rough around the edges, but still achieved in showing the power of moving the boundary of server and client.

[@madhuiitb-cse]

DAN is awesome. He made it really nice.

[@ashishpadhy6807]

WIndows XP really throws me back to the past memories

[@nidhinsnair]

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 🤗

[@daniellanciotti8908]

The Windows XP desktop was just awesome !!! haha

[@nandanchoudhary9798]

Where can we get source code of this demo?

[@PrasadLakmal91]

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.

[@mariossimou2635]

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

[@codeChuck]

Common Dan, everybody in React world knows you! You do not need to be so shy in front of us :)

[@runonce]

Anyone has the link to the repo?

[@SamMcDonald83]

He had me the moment he referenced Sliders 😅

[@PhilipAlexanderHassialis]

Let's hope that Remix will decide to also adopt React Server Components after this talk.

[@mdmathewdc]

Of course, they will not - The creators of Remix are egomaniacs!

[@coldestbeer]

@@mdmathewdc what framework have you created?

[@mdmathewdc]

@@coldestbeer Remix

[@coldestbeer]

@@mdmathewdc i would like to apologize

[@marvinalone]

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?

[@jessehorstman]

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.

[@PetrO465]

what code editor is used here?

[@fun2rideadventure]

it looks like sublime text editor .... but webstorm is better ...

[@itakpeemmanuel5863]

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?

[@denniscual4618]

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.

[@itakpeemmanuel5863]

@@denniscual4618 thanks. Like a full reload with router?

[@denniscual4618]

@@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.

[@RavnitSuri]

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

[@lutfiikbalmajid]

but, framework handle all that.

[@viniciusataidedealbuquerqu2837]

I just noticed that he is using sublime text haha

[@justanotherdumbnigga-vd6rd]

i feel like their live preview for html and css is superior to others

[@poshakajay]

I don't understand why do we need server actions? Not every app will connect frontend server directly to database.

[@srenhyer3895]

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.

[@nathankrasney]

Excellent!!!

[@giuseppe.gangi.]

thanks

[@DanielJustavino23]

What text editor is he using?

[@BenjiFriedman]

looks like SublimeText

[@Edw9n]

yea looks great for certain scenarios the people wondering about the point probably never had the problem rsc tries to solve

[@loucyx]

That Sliders reference! I loved that show, but sadly it got worse and worse over its seasons 😢

[@bl_int]

cool demo

[@ayushsanjpro4788]

and he still uses sublime

[@teragram8006]

Uh... why does the video's description section say "Backstreet's back" but nothing else? Actually its a little creepy tbh.

[@t4ngen7]

server side rendering reference?

[@idontsleep777]

Please centralize this div for me kkkkk 😢😢😢

[@coldtech06]

Always bet on React

[@Sammi84]

There was a time people would have said that about jquery. Times change.

[@sergeydiachenko1429]

If React could do something good, it wouldn't need Remix

[@coldtech06]

remix does uses react though?

[@johnniefujita]

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.

[@astroswell]

Доклад зачётный, спасибо. Представляю сколько магии там с бандлингом и сплитингом :)

[@arjunsreekumar3653]

oh no! I had just uninstalled sublime..

[@mdmathewdc]

What was the point of this talk? 😅

[@Edw9n]

he's giving an intro to the new server components thing?

[@Sacos0]

have you learned english recently ?

[@mdmathewdc]

@@Sacos0 I'm gonna learn it tomorrow

[@render_the_void]

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

[@kwhandy]

yoo who the hell using windows xp to do js framework demo?

[@vladimirkrasulya8693]

How you can take serious the guy who's using win xp on mac ?

[@yoggg932]

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.

[@DauntingGecko]

Couldn’t agree more. It’s cringy and amateurish

[@rewazilol]

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]

@@rewazilol His track record includes Redux and the useEffect dependency array... These have since widely been regarded as a bad idea.

[@rewazilol]

@@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.

[@rewazilol]

​@@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.

[@kaitokid9308]

oh man.. not another hype.

[@rillnews]

А lot of useless words at the beginning...

[@damiangilz]

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.

[@flapstones]

why's it making it a chore?...if anything its making everything easier, thats the point

[@kevin00898]

I wish you were right, but other options suck so much more :(

[@theLowestPointInMyLife]

Solid has great potential but is stuck as part time volunteer thing while low IQ masses plow on with lame duck react

[@kevin00898]

@@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.

[@theLowestPointInMyLife]

@@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

[@pixeldrifter]

Only the most diehard React fanbois can sit through this. What a mess.

[@DanAbramov8]

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.

[@zf0666]

@@DanAbramov8 The talk was really great and understandable. Thanks!

[@justanotherdumbnigga-vd6rd]

[@Edw9n]

@@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

[@BSimone95]

@@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!

[@micelumail5829]

He has overreacted, I'm 100% sure

[@brentsteyn6671]

Svelte is more elegant. But.... Rust, is even better. 🍌💦

[@mrgerbeck]

Nah... HTML is the best programming language

[@invinciblemode]

Svelte is not js

[@Jaood_xD]

Crablang is way better than your pathetic iron oxide 🦀

[@__jan]

@@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.

[@invinciblemode]

@@__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.

[@vnshngpnt]

Sad attempt to sell ugly solution to keep outdated framework in business.

[@DanAbramov8]

what do you find ugly about it? it’s not like there is even an API…

[@snnsnn]

​@@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.

[@hamzakyamanywa9792]

@vnshngpnt You just angry because you did not take the time to understand the talk.

[@kevin00898]

Outdated usually means there's a better modern solution. What is it then?

[@snnsnn]

@@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.

[@jakethunder1447]

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..

[@MattSitton]

I don't think you understood the purpose of this talk lmao

[@AlexanderOsnovnoi]

Когда вы будете в следующий раз называть русских - плохими, помните, что Дэн Абрамов из России)

[@kevin00898]

В России все - русские? Живёт ли Дэн в России сейчас? Вот именно.

[@Denn-t5t]

@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 ...

[@sergeydiachenko1429]

А что в нем хорошего? Продвигал Redux, а теперь продвигает это, Redux уже плохо использовать видите ли. Через пару лет и Remix станет плохим. Абрамов - это консистенция всех плохих решений в React сообществе, и он распостраняет методологии на весь мир, а разработчикам приходится использовать эту кашу из решений. Вспомните как React начинал. Легковесная библиотека, которая умеет отрисовывать компоненты. Виртуал DOM и тд. И напару с Flux состояниями она решает все нужды фронтэнда. А сейчас? На главной же странице с установкой React, идет совет сразу его использовать с 1 из 3 фреймворков, один из которых Remix. Все плюсы Реакта на его старте, давно уже не имеют смысла, он оброс кучей дополнительных идеологий, фрэймворков, которые идут в комплекте. При этом нет вразумительной структуры у проектов и стека, который не устареет через пару лет. React это просто распиаренная в свое времялиба, которая постоянно меняет свои подходы и топчится на месте, едет по накатанной, и Remix это еще один временный костыль на React.

[@IAmOxidised7525]

React sucks 🎉😮 for sure.

[@surajjha5623]

Any Alternative suggestion??

[@SR-ti6jj]

Nah fam. Get ratioed you hater

[@abduelrah3676]

@@surajjha5623 svelte

[@ShadoFXPerino]

@@surajjha5623 pure HTML5

[@swattertroops-yaaa]

@@ShadoFXPerino would recommend

[@AndrewGrinchak]

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.

[@Sacos0]

bad hater, just bad

[@kevin00898]

That would explain how Google suck at engineering so much. But hey, at least their demos are alright!

[@Sammi84]

This comment is just pure hate. No content.

[@srenhyer3895]

Dan did a really cool presentation - what is your problem?

[@render_the_void]

@@kevin00898 > _That would explain how Google suck at engineering so much._ do you have any proofs? )

[@animanoir]

My passion is to create User Interfaces!