React from Another Dimension – RemixConf 2023 💿
At RemixConf 2023, renowned developer and co-author of React, Dan Abramov, took the stage to introduce the audience to an exciting new perspective of the popular JavaScript library.
An Unconventional Approach to React
Abramov’s talk, titled “React from Another Dimension,” delved into an unconventional approach to using React. He encouraged developers to think outside the box and explore new avenues to leverage the power of this library.
Abramov introduced the concept of visualizing React components in 3D space, allowing developers to create immersive user interfaces with a renewed sense of depth and interactivity.
Looking Beyond the DOM
In his presentation, Abramov emphasized the need to look beyond the traditional Document Object Model (DOM) when working with React. He highlighted the potential of exploring different rendering platforms and utilizing cutting-edge technologies like Virtual Reality (VR) and Augmented Reality (AR) to create next-level experiences.
“By embracing alternative rendering platforms, React developers can transform the way users interact with web applications, opening up a whole new dimension for creativity and innovation,” said Abramov.
Tools for the Journey
Abramov not only introduced developers to the concept of React in 3D but also provided a sneak peek into a set of tools he has been working on to facilitate this fascinating exploration. He demonstrated a custom React renderer, specifically designed for virtual environments, and showcased the potential of using React in combination with 3D libraries like Three.js.
The Future of User Interfaces
Abramov concluded his talk by sharing his vision for the future of user interfaces. He expressed his belief that React, together with innovative rendering platforms and technologies, has the potential to revolutionize the way we interact with digital experiences.
As attendees left the conference hall, they were buzzing with excitement, eager to begin their journey into the new dimension of React introduced by Dan Abramov.
Stay Tuned
The world is eagerly waiting to see how this new dimension of React unfolds. As we look forward to RemixConf 2024, keep a close eye on further developments from Dan Abramov and the React community as they push the boundaries of what’s possible in web development.
Don’t miss out on this mind-expanding adventure!
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 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?
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..
What text editor is he using?
He had me the moment he referenced Sliders 😅
Where can we get source code of this demo?
I have extracted for you the key points of the speech, do not thank:
am, hm, you know, <drinks water, smacking his lips> 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
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?
Uh… why does the video's description section say "Backstreet's back" but nothing else? Actually its a little creepy tbh.
When useTransition first came out, I thought it was an animation hook. I was super excited React providing animation hooks 😀
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❤
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.
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.
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.
Когда вы будете в следующий раз называть русских – плохими, помните, что Дэн Абрамов из России)
Доклад зачётный, спасибо. Представляю сколько магии там с бандлингом и сплитингом 🙂
what code editor is used here?
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 Youtube Chapters https://youtubechapters.app/?v=zMf_xeGPn6s
oh man.. not another hype.
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.