Reactivity: There and Back Again

Rate this content
Bookmark

Everything old is new again. But this time it's different, promise!

12 min
02 Jun, 2023

Video Summary and Transcription

The Talk discusses the cyclical nature of technology evolution, with examples from civil engineering and software development. It explores the shift from serverless to client-side frameworks and the recent move back towards server-side processing. The evolution of technologies and states is examined, highlighting the progression from mutability to immutability and the introduction of observable immutability. The future and next generation of reactivity are also explored, with a focus on the blurring boundary between server and client and the importance of embracing uncertainty and avoiding dogma.

1. Everything Old is New Again

Short description:

I'm going to talk about everything old is new again. 200 years ago, the whole new technology field of civil engineering. Eisenbart Kingdom Brunel, the best civil engineer of all time. He built loads of stuff, including the first tunnel under Thames River, the big bridge near Bristol, and the biggest ocean steamers of the time. AI is about to get our jobs. React components were reading from the database in front file system, but apparently, they moved back to the server. Are we now back to writing PHP? Are we going in circles? I think that's not the case.

Good morning, everyone. I'm glad to be back here. And I'm going to talk about everything old is new again. You know my passion is reactivity. So I'll be telling a bit more about that but first I will go to an entirely different story. An entirely different era, actually.

200 years ago, the whole new technology field of civil engineering. And it was changing all the time. They invented steam engines, and ships, and trains, and stations, and railroads. And why one guy became particularly famous. Because he was probably the best civil engineer of all time. And his name is Eisenbart Kingdom Brunel. And what made him so great? I give you three reasons. First of all, he built loads of stuff. He built the first tunnel under Thames River. He built the big bridge near Bristol. He built the biggest ocean steamers of the time. And also, he dressed himself properly. So, sadly, we didn't stick with that tradition, if I look at myself, you all. But I think we can learn something from that. Thirdly, he had the most profound, eloquent quote about programming. Now, you might be wondering, what is that quote? I'll tell you in a bit, so stay tuned.

Meanwhile, while I was reading up on civil engineering, a lot of things changed in the front-end world. So, first of all, apparently, AI is about to get our jobs. Secondly, this thing happened. Suddenly, we had React components, and they were reading from the database in front file system. Apparently, they moved back to the server. And so, are we now back to writing PHP? Anyway, like, if I combined those two things, I'm not sure if that's a good thing or a bad thing. Not sure to hate the AI or pity it. In other words, are we going in circles? And I think that's not the case.

2. The Loop of Technology Evolution

Short description:

I think what's happening here is very interesting. We started with serverless things and server-rendered pages. Then we added interactivity with JavaScript and jQuery, but it got out of hand and we built a client-side framework. And now we're moving back to do more on the server. Is technology just going in loops?

I think what's happening here is very interesting. I mean, it's very easy to joke about it, but this is serious stuff. So, if I look at front-end engineering, how I know the evolution of it, as we started with all those serverless things, server-rendered pages, then we sprinkled some interactivity on top of it with some JavaScript, jQuery, and then it got out of hand and we built a proper client-side framework. And now we're making the move back again to do more on the server. So, it makes you wonder, is technology just going in loops? And this loop seems now to be closed, almost.

3. The Evolution of Technologies and States

Short description:

Often we start out a problem and two things have to happen simultaneously. We evolve existing technologies in small steps. Dan Abramov gave a great talk a couple of weeks ago where he was basically posing that if React would have started at server with server components and only added client-side interactivity later on, we would still have end up at the same place. Think about how we think about states over the years. We started with mutability, but then it became messy. Immutability is actually really efficient when it comes to changing objects. With the introduction of proxies, we can have observable immutability. Now we have signals, which is pretty much inspired by both paradigms. That's interesting to see where this goes. Here's another of one of those circles, reactivity.

But here's the interesting thing. Often we start out a problem and two things have to happen simultaneously. On one hand, we have this big revolution where we suddenly approach a problem entirely different and at the same time, we evolve existing technologies in small steps. And interestingly enough, in the end, they often come back together again.

Dan Abramov gave a great talk a couple of weeks ago where he was basically posing that if React would have started at server with server components and only added client-side interactivity later on, we would still have end up at the same place. And this loop, I think, exists in many places.

Think about how we think about states over the years. First of all, we started with mutability, which is how JavaScript works out of the box, but then it became messy. It's easy to write spaghetti code with it. And for frameworks, it's very hard to efficiently render UI. So we went to this immutability paradigm and we took a very radical different approach to how we manage states.

But then it turned out we can also sometimes overdo it. This was an interesting example a couple of months ago, where 10-stack table, which is a really good, a well-known library, in very specific cases, certainly became a thousand times faster. Why? Because they changed some immutable stuff back to immutability and internal administration. And we discovered again that, like, immutability is actually really efficient when it comes to changing objects etc. Anyway, that made us conclude, okay, let us do some immutability. Maybe in local places it is fine. Emur is taking that approach. It has, like, temporal, local immutability, and it makes things a lot more efficient.

But in parallel, there were also evolutions going on. So we also figured that, like, with the introduction of proxies around 2015, 2016, we can have observable immutability. Well, we still have immutability, but actually frameworks can know what is happening with those objects. And now we have recently a new hot thing, which is signals. It is pretty much inspired by both paradigms. And frameworks like Soled and Quick are making it popular. That's interesting to see where this goes. It exists both immutable and immutable flavors. And one of the interesting things I'm sometimes thinking about is, if you start to compose our signals and we have trees of signals, are we then basically back at the mutable programming model? But now different. So maybe there's a circle closing here. Here's another of one of those circles, reactivity.

4. The Future of Reactivity

Short description:

10 years ago, we had reactive frameworks like Backbone, Angular, and Knockout. Then React introduced a different approach with mutable trees and top-down rendering. Reactivity continued to evolve, leading to predictable frameworks like Vue, MobX, Felta, Quick, and Solid. The question now is, what comes next?

So 10 years ago, it was already briefly mentioned in the intro, we had those reactive frameworks like Backbone, Angular, Knockout. And at some point we figured, hey, they're very unpredictable, unreliable. Let's take a very different approach. And that's very different approach was Reacts, introducing this idea that you have like mutable trees and conceptually render top-down and type tree and it should be fine. And it's also a very radical change and a very big improvement. But at the same time, reactivity itself was developed further as well. So we got frameworks that actually were predictable and examples of this are Vue and MobX, Felta, Quick and Solid again. So we had also this evolution going on at the same time. And the interesting question is, where will we end up next? And there are some things I'm intrigued about, what I think might happen.

5. The Next Generation of Reactivity

Short description:

So what does the next generation of reactivity look like? The boundary of the server and the client is blurring. Reactivity goes across the network boundary. We're spiraling into something bigger, learning from the past. We must act in the light of uncertainty. Dogma kills innovation. Brunel's quote about not laying down rules in engineering. Everything old will be new again. MobX will have decorators again now that they're standardized.

So what does the next generation of reactivity look like? First of all, within React, there's this really interesting thing going on of React Forget. It still sticks to the same model, but it gives you as a developer the experience of reactivity basically, where you have pretty straightforward code and you don't have to think about how to optimize, how to build dependencies, those kinds of things.

The other very interesting development that is going on is basically that the boundary of the server and the client is blurring. We see that with React Server components and React Server actions. We see it also in something like Quik, where we can have closures on the server, serialize them, and run them on the client. And so what I think would be really cool, and I'm really waiting for the FUSH framework to standardize this or make this popular, is where reactivity goes across the network boundary, and we can subscribe to changes directly on the server and vice versa.

Anyway, so this might be another circle that's closing. And it makes you wonder, does everything become new again? And is it a bad thing or a good one? And I think there's three interesting lessons to take from this. One, is I truly believe we're not going in circles. I think we're spiraling. I think we're spiraling into something bigger, where we learn from everything we did in the past, but also take benefits from everything we did in the past. Secondly, it means that for us as engineers, we have to be able to act in the light of uncertainty. We don't know exactly where we're spiraling towards. But in the meantime, we have to do our work and serve our users. And so don't worry if you're not perfectly sure which one of the frameworks is exactly the best one. And thirdly, a very important one, is that like dogma skill innovation, at the point where you become fixed on one solution, you basically stop the spiral. If you are at a point where like everything should be immutable, or everything should be mutable, that's where progress stops. And that does bring me back to Brunel. So remember, Brunel was building bridges. So he has this quote. And I think he was talking about programming, but it didn't exist yet at the time. Because he was building bridges and so that's a very responsible thing to do. It doesn't have version control. And if you don't build them right, people might die. That's how bridges work. So this quote must have been about programming. And he basically said, I am opposed to the laying down of rules or conditions to be observed in the construction of bridges, lest the progress of improvement tomorrow might be embarrassed or shackled by recording or registering as law the prejudice or errors of today. So I think that's one very radical view of engineering. And so that's what I want to leave you with. Everything old will be new again. And in that light as well, one very small announcement, MobX will have decorators again now that they're standardized. And with that I will leave you.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Summit 2022React Summit 2022
27 min
Impact: Growing as an Engineer
Top Content
Becoming a web engineer is not easy, but there are tons of resources out there to help you on your journey. But where do you go from there? What do you do to keep growing, and to keep expanding the value you bring to your company? In this talk we’ll look at the different kinds of impact you can have as a web engineer. We’ll walk through what it means to take on bigger, more complex projects, and how to scale yourself, and grow the community around you. By driving our own development we can all grow our impact, and in this talk, we’ll discuss how to go about this.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)