Reactivity: There and Back Again

Rate this content
Bookmark

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

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Brunel was known for his radical view against setting strict rules or conditions in engineering, believing that such practices could hinder future improvements. He emphasized the importance of flexibility and continuous advancement in engineering practices.

Front-end engineering has transitioned through several phases, initially focusing on server-rendered pages, then moving to client-side frameworks with JavaScript and jQuery, and recently shifting back toward server-side processing. This reflects a cyclical yet progressive evolution in technology.

The speaker suggests that while technological development often appears to be cyclical, each cycle builds upon previous knowledge and practices, leading to gradual improvements and innovations. This concept is described as 'spiraling' into something larger and more refined over time.

Immutability and mutability are approaches to state management in programming. The discussion highlights a shift from mutability to immutability for cleaner and more efficient code, and then a reintegration of some mutable concepts when beneficial, showing a balanced and evolving approach to managing state.

Modern web frameworks are increasingly incorporating reactivity in a predictable and efficient manner. Frameworks like Vue, MobX, and Solid have advanced the concept of reactive programming to ensure that applications are responsive and efficient without being unpredictable or unreliable.

The speaker anticipates further integration of reactivity across network boundaries, such as with React Server components and new frameworks that allow reactivity to extend from the server to the client seamlessly, potentially standardizing how reactivity is handled across platforms.

Eisenbart Kingdom Brunel was a renowned civil engineer known for his groundbreaking projects like the first tunnel under the Thames River, the big bridge near Bristol, and the largest ocean steamers of his time. His contributions significantly advanced the field of civil engineering.

Michel Weststrate
Michel Weststrate
12 min
02 Jun, 2023

Comments

Sign in or register to post your comment.
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.
Available in Español: Reactividad: De ida y vuelta

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.

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

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Impact: Growing as an Engineer
React Summit 2022React Summit 2022
27 min
Impact: Growing as an Engineer
Top Content
This Talk explores the concepts of impact and growth in software engineering. It emphasizes the importance of finding ways to make the impossible possible and the role of mastery in expanding one's sphere of impact. The Talk also highlights the significance of understanding business problems and fostering a culture of collaboration and innovation. Effective communication, accountability, and decision-making are essential skills for engineers, and setting goals and finding sponsors can help drive career growth. Feedback, goal setting, and stepping outside of comfort zones are crucial for personal development and growth. Taking responsibility for one's own growth and finding opportunities for impact are key themes discussed in the Talk.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
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
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
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
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
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.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.