Speeding Up Your React App With Less JavaScript

Spanish audio is available in the player settings
Rate this content
Bookmark

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.

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

Builder.io is a headless visual tool, essentially a page builder that is unique because it can be installed via NPM and integrated directly into applications, allowing the registration of custom components for drag-and-drop functionality on websites.

Partytown is a feature developed by builder.io that helps in optimizing web performance by relocating third-party scripts into WebWorkers.

Mitosis is a tool that allows developers to write code once and generate outputs for multiple frameworks, supporting everything from Angular to web components and other frameworks.

Builder.io aims to address the issue of slow website performance, which is largely due to excessive JavaScript usage that affects startup times and overall user interaction with web pages.

QUIC can hydrate React components and provide solutions for intercommunication without adding significant JavaScript overhead, improving startup performance and interactivity.

Partial hydration is a technique where only certain parts of a web application, or 'islands', are hydrated based on user interaction or visibility, rather than hydrating the entire application upfront. This approach can significantly improve performance by reducing the amount of JavaScript processed on initial load.

The 'Quickify' function is used to wrap React components, enabling them to be lazily hydrated upon specific events like hover or visibility, which helps in reducing initial load times and improving performance.

By using QUIC, builder.io can demonstrate the performance capabilities of their system, especially in reducing JavaScript load and improving site responsiveness, which is crucial for their headless visual tool that integrates with various frameworks.

Miško Hevery
Miško Hevery
32 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to Mishko and builder.io

Short description:

I am Mishko, the creator of Angular and AngularJS. Currently, I work on QUIC and serve as the CTO of builder.io, a headless visual tool that allows you to build pages by NPM installing it. We believe in open source and have developed PartyTown and Mitosis. Our open source team includes Adam Bradley, Manuel, and Sammy.

Wow, you know what? Nothing makes me happier than seeing a packed room. Like you guys are really, thank you. Like this is amazing. And I have to take a picture. So smile. All right.

Yes. I like to start my talks with a joke on programming, because I'm a dad, et cetera. So here's your joke of the day. How do you measure functions? Well, you measure them in para-meters. OK, good, good. Thank you, thank you, thank you.

So hi. I am Mishko. I did this thing called Angular, AngularJS. And now I work on QUIC. And I'm a CTO of builder.io. Builder.io is a headless visual tool. It's basically a page builder. But what's unique about it is you do it by NPM installing it, rather than using it as a service. And that means you can put it inside of your application. And you can register your own components, which means your marketing can drag and drag your own components on your website. And means they don't have to bug you about doing stuff for the UI.

We believe in open source. We do a couple of cool things. There is PartyTown for taking your third party scripts and moving them into WebWorkers. There's Mitosis, which allows you to write code once and generate canonical output for all the frameworks out there. We include everything from Angular to web components and every other letter in between. And this is our open source team. Adam Bradley, who worked on Ionic, Manuel, who worked on Gin, which is a Go framework, and Sammy who works on Mitosis.

2. The Problem with Website Performance

Short description:

Most websites are slow, and Google has developed Core Web Vitals to address this issue. However, most real websites are still in the red, indicating poor performance. It's crucial to improve website performance as it directly impacts bounce rates, completion rates, and revenue generation.

So anyway, let's talk about what I see the problem to be. And the problem we're trying to solve is that most websites are slow. And it's such a big problem that Google is really focusing on this, right? Google has developed this thing called Core Web Vitals. And if you look at Core Web Vitals, you're going to find something interesting, that most websites, real websites, I don't mean like talk hello world kind of site where you put up and say, look, I can make this thing performant. No, I'm talking about real websites. Most real websites are actually in the red. And few websites like Amazon that actually have the money and resources to go after it are actually in the yellow. And that's kind of strange because there's a lot of data that shows that, hey, the better performant website is, the less bounce rate you have, the more completion to purchase out, et cetera, the more money you can make. So clearly there is something going on where people know that web-based websites are important, but nobody seems to be able to get there.

QnA