Facing Frontend's Existential Crisis

Rate this content
Bookmark

The state of frontend development last couple years is in an odd place for the uninitiated web developer and expert alike. Server Components? Resumability? Hydration? Waterfalls? Islands? Why so much focus on water? And why are we even talking about this? In this talk, SolidJS creator Ryan Carniato explores the landscape of modern web development to understand how we got here and what these solutions really solve.

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

FAQ

Ryan Carniato's talk primarily focused on the changes in front-end technology over the past few years, with a specific emphasis on the challenges and solutions related to JavaScript and single-page applications.

Ryan mentioned that if attendees wanted to hear more about Solid, they should listen to Achille's talk later. His presentation was more focused on discussing broader trends in front-end technology.

The web turning 30 signifies the rapid evolution of web development practices over the decades. Ryan Carniato highlighted that each decade brought dramatic changes, with the past decade being dominated by single-page applications.

The primary assets contributing to the size of web pages include HTML, CSS, and JavaScript. Among these, JavaScript is one of the most expensive assets per byte due to its parsing and execution time.

The 'uncanny valley' refers to the time between when a server-rendered page is visible and when it becomes interactive. This happens because server-rendered pages often require additional JavaScript for hydration, which can delay interactivity.

Islands architecture involves breaking up a web application into sections where some parts are server-rendered, and others are client-rendered. This can minimize the amount of JavaScript and data sent to the client, improving load performance.

Server components render on the server but communicate using a diffing format rather than HTML. This approach allows the use of React's features like context and async data handling without the issues of state-tearing that can occur with islands.

Resumability refers to serializing the state of a framework so that no hydration is needed on the client side. This can significantly reduce the execution cost and improve load performance.

Ryan Carniato believes the future of web frameworks is still evolving because there are ongoing innovations and explorations aimed at solving real problems. He emphasizes that every framework benefits from these advancements, and the best solutions may still be ahead.

Solid Start is a meta framework designed for builders, offering flexibility and performance for rendering on the server. It supports both single-page applications and server rendering, starting at a minimal size and allowing developers to add tools as needed.

Ryan Carniato
Ryan Carniato
37 min
14 Jun, 2024

Comments

Sign in or register to post your comment.
  • Haris Khan
    Haris Khan
    Schiphol
    Transcription is wrong, it's from create react app talk
Video transcription, chapters and summary will be available later.

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

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.
SOLIDify Your React Code
React Day Berlin 2023React Day Berlin 2023
11 min
SOLIDify Your React Code
Watch video: SOLIDify Your React Code
Clean code is easily understood, readable, changeable, extensible, and maintainable. SOLID principles enforce good practices for scalable and maintainable software. The Single Responsibility Principle (SRP) ensures that components have a single reason to change. The Open-Close Principle (OCP) allows components to be easily extended without modifying the underlying source code. The Liskov Substitution Principle (LSP) enables swapping child elements within a subtype component. The Interface Segregation Principle (ISP) states that components should only depend on the props they actually use.
SolidStart 1.0: Peeking Under the Hood
React Summit 2024React Summit 2024
30 min
SolidStart 1.0: Peeking Under the Hood
SolidStart is an efficient, unopinionated, and ergonomic full-stack framework that provides great defaults and flexibility. It includes features such as a bundler, a serializer, a server, and a router. The serializer, Seroval, enables streaming and real-time state synchronization between server and client. SolidStart offers powerful file routes, RPCs, and single-flight mutations. It is recommended for building UIs in full applications, Spark, single-page apps, and native apps.