Qwik - The No Hydration Approach to Performant Sites

Rate this content
Bookmark

Let's talk about hydration and the problems it creates. Resumability is an alternative to hydration which does not force eager execution of client side code resulting in instant on applications even as the application scales in coplexity.

This talk has been presented at DevOps.js Conf 2024, check out the latest edition of this JavaScript Conference.

FAQ

Party Town is a feature or project associated with Builder.io. It is part of the open source initiatives by the Builder.io team, aiming to enhance web performance and development efficiency.

Builder.io is a headless visual CMS that allows marketing teams to build websites without coding experience by using a drag and drop interface. It can be installed in existing applications using npm install.

Qwik is a new framework that focuses on a 'no hydration' approach for improved performance on websites. It aims to optimize speed by minimizing the JavaScript needed for interactivity, which is crucial for passing Core Web Vitals.

Core Web Vitals are metrics created by Google to measure the speed and performance of web pages. These metrics are crucial because they affect user experience and are increasingly becoming factors in search engine rankings.

According to Marciko Heveri, the main challenge with current web frameworks is that they require too much JavaScript to be shipped to the client, which slows down performance and makes it difficult to meet Core Web Vitals.

Qwik differs by skipping traditional hydration processes. Instead of re-executing all components on the client-side, Qwik transfers essential component state from the server, allowing immediate interactivity without re-executing the entire codebase.

Qwik optimizes loading times by only downloading and executing the necessary code when a user interacts with specific elements. This approach minimizes the amount of code needed on the client side, significantly enhancing performance.

Qwik Insights is an optional service that collects anonymous statistics about application interactions to optimize prefetching of resources. It helps in determining which functions are likely needed together, improving load efficiency and user experience.

Miško Hevery
Miško Hevery
20 min
15 Feb, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Builder.io is a headless visual CMS that allows drag and drop of UI components. Core Web Vitals are important for improving website performance. Hydration in frameworks affects performance and interaction with the app. Qwik offers a different approach to hydration, eliminating the need for downloading unnecessary code. Qwik's resumability feature improves performance by starting with HTML and avoiding the re-execution of code.

1. Introduction to Builder.io and Qwik

Short description:

Hi, my name is Marciko Heveri, CTO at Builder.io. We work on Qwik, a new kind of framework. Builder.io is a headless visual CMS that allows drag and drop of UI components. We also have Party Town and a team of amazing people working on our open source.

Hi, my name is Marciko Heveri, I am the CTO at Builder.io, and I've done these things called Angular and Karma, and now we're working on Qwik. So let's talk about Builder.io for a second. Builder.io is a headless visual CMS. It basically means that you get to drag and drop your components into your existing application that you can install using, you can install Builder.io using npm install.

Okay, let me restart. Okay, let's start from here again. Qwik, no hydration approach to perform on websites. Hello, my name is Mischko Heveri, I'm a CTO at Builder.io and I've done this thing called Angular and now I work on Qwik, which is a new kind of framework I want to talk to you about today. Builder.io does a headless visual CMS. Headless means that it is hosted on your existing website where you can install it using npm install and visual means that you get to take your own components and you can allow your marketing team to do drag and drop of the UI and build websites without having to have any sort of coding experience. Another cool thing we do is called Party Town, and these are some of the amazing people that work on our open source at Builder.io.

2. Improving Performance with Core Web Vitals

Short description:

Today, I want to talk about Core Web Vitals and the importance of reducing JavaScript to improve performance. Many websites struggle to pass Core Web Vitals, including Amazon. To illustrate, let's start with a simple counter example and gradually introduce more realistic components. Real-world applications consist of multiple components, wrappers, actions, and UI updates. These components often need to share data through wrappers. Despite its simplicity, even this basic application requires downloading several code files to the client.

So what I want to talk to you about today is speed, and specifically the Core Web Vitals and how to get it to Core Web Vitals as high as possible. Turns out the answer is relatively simple but hard to do, ship less JavaScript. And Google cares about it a lot, and as a result they created these Core Web Vitals metrics that they track and perform.

But it turns out that as our websites are getting more and more popular and more complicated, the amount of JavaScript we're shipping to the client is slowly increasing over the years, as you can see over here. So as the number of amount of JavaScript is increasing, it makes it harder and harder to actually pass Core Web Vitals. And you can see that most of the websites that are kind of out there actually have trouble passing Core Web Vitals. And even Amazon that cares very deeply about performance, and they are some of the most web performance websites out there, is having trouble passing these scores. And it really comes down to the amount of JavaScript that's being shipped to the client.

And so let's start with a very simple example. And let's build a counter example. Well, counter will probably look something like this. You know, we have a button that you hit plus one, and there's a count and it increments the value. And so this is kind of the simplest possible application that you can think of. But I don't think this is a really representative of the real world app, because in this particular application we have our mutation, which is your listener, our state, which is the current count, and the rendering, which is the binding of what the value is, all inside of a single component. And realistically, usually their mutation, the state and a rendering are separated into separate components.

And so let's look at that as a more realistic example. Or we break this thing up. And so an example of this would look something like this, where you have the counter component that is at the root, and it contains two smaller components, the action and the display, where the counter contains the state and the action has the listener, and the display shows just the current count. Now, even that is not actually quite realistic, because typically we have additional things like we have AppRoot, we have extra wrappers that you use for the purposes of the layout of the components and so on. And all of these extra things actually make it more realistic to what the actual application is. So here's what this would look like.

As you can see, we still have a counter, but now our action is wrapped in an additional component and so is our display. And the reason I'm showing this is because you need to get data through these additional wrappers, and it will have effect in the way the application runs. And finally, let's introduce an action item and a display icon. And the idea behind those things is that there are essentially leaps. There are components that don't do anything, but oftentimes we have these components in our application. So a more realistic example of what an application really looks like is a mixture of these app components, the counter, the different kind of wrappers, finally a place where we actually perform some of the actions, and a location where we actually update the UI. You can think of the performing of the action as the buy button on a page, and you can see the count as the showing the current shopping cart on the UI. So really, what we have is we have the situation where the mutation and the display are actually far apart from each other, and they have to share a common root component, the least common denominator kind of root component, which encompasses both, which contains the state, and so the state is then passed down to both of these locations. Now, the thing is that you would think that for such a simple application, the only code that you have to download to the client is really just the mutation action, maybe the state and maybe the display.

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

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.

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.