Using the React Ecosystem With the World's First O(1) Javascript Framework?

Rate this content
Bookmark

What if you can use the fastest JavaScript framework along with React? What if you can build applications that feel fast regardless of application size?

Let's see how incredible Qwik is along with React.

18 min
15 Nov, 2023

AI Generated Video Summary

Reshapability in the next generation of front-end frameworks with OOV one loading time. Quick is a web framework that loads instantly and does not require hydration. QUIC allows lazy loading of specific code components, minimizing initial JavaScript downloads. QUIC CD is a metaframework built around QUIC, offering directory-based routing, nested layouts, file-based menus, and data endpoints. This represents a significant shift in front-end frameworks.

1. Reshapability in Next-Gen Front-End Frameworks

Short description:

Reshapability in the next generation of front-end frameworks with OOV one loading time. The concept of reshapability is a mental shift from the current generation of front-end frameworks. Hydration in JavaScript frameworks slows down the initial loading time. Quick is a web framework that loads instantly and does not require hydration. It focuses on super fast load times and delivers the fastest user experience by optimizing server-side HTML and lazy loading JavaScript.

Reshapability in the next generation of front-end framework with OOV one loading time. I spice up a little bit of my TED talk and it's called Reshapability in the next generation of front-end frameworks with OOV one loading time.

Hi, my name is Ruby Jane Kabagnot. I'm originally from the Philippines but I have been working in Oslo Norway for the past few years now. And I think some people are already familiar with the term Reshapability. This was coined by the creators of QUIC including the so-called father of Angular JS, Misko Hevry, who said this idea of reshapability is a mental shift or a paradigm shift from the way the current generation of front-end frameworks works, which is the hydration process.

And so to explain the Reshapability, we need to understand the so-called hydration process of the current generation of frameworks. Because the fundamental problem in this hydration thing in front-end frameworks is that our application or app needs to hydrate at least once in the server and then do the same thing in the browser. But you may ask so what? Well, basically, it just means that the so-called DTI, or Time to Interactive of the application becomes slower. And this can be very frustrating or felt by your end users, especially if you got a big application or your users are using a slower network connection or just older devices. And of course, no one wants a frame website that takes forever to download, right?

And why they need to hydrate? So to explain this further, the hydration in JavaScript frameworks is like turning your static painting or static painting into an interactive touchscreen. So basically, the server provides the initial painting or HTML. And then we need but we need to actually touch controls or the event handlers, right? And the features which is the application state to make everything interactive or your application interactive. But the thing is, this step can slow down the initial loading time of the application. So making your painting look touch ready when it's not, which is really frustrating for your users. Like what I said, simply put the hydration step in the client side is to make our application interactive. So what about Quick? So Quick is a new web framework that makes your web apps or our web application loads instantly, no matter how big or complex they are. Basically, it just uses, they said one kilobyte or one KB of JavaScript to start. So ensuring a fast performance of any scale. Now, unlike other frameworks, Quick doesn't require hydration, so your apps are interactive right away. So this is achieved by feature what they say, region mobility. Basically, Quick focuses on super fast load times. And even on, even if you're using mobile or because it's just serving HTML as needed. No, sorry, it just loads the HTML needed and loading and just loaded the JavaScript incrementally. So overall, Quick aims to deliver the fastest possible user experience by optimizing your server side HTML and rendering, HTML rendering and lazy loading the JavaScript. So what is this region mobility? So because Quick is different because it does not require hydration or eager execution of your code on the client side. It uses region mobility. So meaning not requiring hydration is what makes the Quick application startup almost instantaneous. So the browser or your client does not need to do anything because it already has all the information that it needs. It has information that needs in so-called stateful HTML to basically determine where the things are in the application, which includes these three important things that you are event listeners, the framework code, and the application code.

2. Quick Framework and Getting Started

Short description:

Quick allows pages to become interactive without downloading and executing client-side JavaScript, serving HTML with minimal JavaScript. Quick knows how to serialize closures, allowing the app to resume from the server to the client without hydration. Quick applications act like streamable apps, saving server state and resuming on the client. Getting started with Qwik involves choosing a package manager and running the CLI command. Qwik is a resumable and replayable framework that doesn't require executing all components on the client. Qwik is showcased with a simple app featuring a counter component.

So Quick. So the way Quick operates is that the page can become interactive without downloading and executing the JavaScript on the client. So this means that the page is almost instantaneous or over one loading time. So this is the primary premise of the Quick framework is that to serve HTML with minimal JavaScript with only increasing interaction as needed.

So here's an image of the hydration for the typical current frameworks, front-end frameworks, and this is reachability for Quick. So how is Quick doing this reachability? In a nutshell, Quick knows how to serialize your closures. And this is the thing that other frameworks are not able to do. So what are closures? So closures are if you remember JavaScript closures are a function that has a state or data. So basically, Quick can take that closure and serialize it, which is essentially how Quick is able to just resume or bring your app into life right away from the server to the client without having to do the hydration process. So this is the thing that what makes Quick resumable or replayable is because the client doesn't need to execute all the components to figure out where the listeners are.

So Quick is progressive, so this means that the user starts to interact with the page because Quick will start downloading, executing all the necessary code for that interaction. So in this way, Quick applications act more like streamable apps rather than downloading everything upfront before interaction. So bridge streamability is supposedly simple in concept. You save the server site state and then move it to the client and then continue or resume where the server left off. But it may be simple in concept, but it's hard to implement until Quick. So because Qwik can take that closure and serialize it. This is essentially how Qwik is able to just resume or bring your app into life right away from the server to the client without having to do the hydration process or eagerly executing your code. So this is the thing about what makes Qwik resumable or replayable, is that because the client doesn't need to execute all the components to figure out where the listeners are.

Getting started. So you can choose your preferred package manager. So you can run the following command. You can do the npm create Qwik app latest, pnpm, yarn. And then we have this thing now, bond, which is the latest runtime now, JavaScript, that is competing for our attention. So I know it's powered by ZIG, so it aims to be an all-in-one JavaScript runtime and toolkit. Yeah, so anyway, back to Qwik. So the CLI will guide you through the interactive menu to set the project name, and then select one of the starters, and ask you if you want to install dependencies.

So let's see Qwik in action. So I have here the homepage or the landing page of a simple Qwik app. And if you open up DevTools here, we can see that there's no JavaScript delivered to the browser because this is just a simple side page and no interactivity required. And we have here a counter component.

3. QUIC Lazy Loading and QRL

Short description:

QUIC allows lazy loading of specific code components, minimizing initial JavaScript downloads. The framework breaks apart functions and components, only downloading what is needed. The use of dollar signs in code indicates lazy loading. QUIC Optimizer automatically creates separate files for each function or component. QRL, a specific form of URL, is used to lazy load content by pointing to JavaScript chunks.

So I have here two buttons. And there's still no JavaScript, right? Until the alert button prints an alert message. And the current button as it wanted the counter. But you don't see any JavaScript here until we click the alert button.

So the click alert button only adds only the particular piece of code, and it contains the message that gets downloaded. Not the increment button. Even the framework code gets downloaded for the whole application. So now let's click the alert increment button and let's see how this particular piece of code gets downloaded. And of course the framework code.

So what's amazing about that is that because how the code was was implemented. Let's take a look at it. So we have here our simple standard counter component. And if you're familiar with React, you know this syntax looks pretty much like React with its use of JavaScript or J, sorry, JSX. So we have our buttons, the increment and the elite button in one single DSS file. And yet, QUIC only downloaded the JavaScript that it needed. So QUIC was able to break apart the function of the alert message and extract it out. So when we click the alert button, remember, just the alert message gets downloaded and nothing else. It didn't even download to the client the framework code or the increment button because it doesn't need to do it at that time. Only when we click the increment button did the the framework code gets downloaded to update the UI.

So how does QUIC do it? So you'll notice here there's this dollar sign and there's a component dollar sign. So whenever you see this dollar sign in your function or your component or event listeners, that should tell you that this function or component is being lazy loaded. You as a developer, but what's amazing about that is that you as a developer doesn't have to do anything special in your code to make this fine-grained lazy loading to happen. With QUIC, it just works out of the box. So QUIC has this thing called QUIC Optimizer that will run in the build whenever you're building the QUIC application. And it will search for all the dollar signs to create separate files for each function or component or event as soon as it will find.

So the question is, how does QUIC do it? So let's take a look here at the Allow button here, and it has this OnClickedProperty. And it has a URL or QRL in QUIC that contains all the information that QUIC needs to lazy load and execute. So QRL is a particular form of URL that QUIC uses to lazy load your content. So there are specially formatted URLs that are left as attributes in the HTML to tell QUIC where the handles for the code should be or for the code should be loaded from. And it points to JavaScript chunks to be lazy loaded.

4. QUIC Loader, QUIC JSON, and QUIC React

Short description:

QUIC Loader registers global events and lazy loads the rest of the application. QUIC JSON serializes the app state, making HTML CDN cacheable. QUIC React allows using existing React components and libraries within QUIC. Configure QUIC Project to use QUIC React and install required dependencies. QUIC React enables creating interactive React apps without loading React in the user's browsers. QUICify utility turns React components into HTML on the server and adds interactivity with QUIC signals. Lightning-fast application with React components. Rules: don't mix React and QUIC components in the same file, use recommended folder for React components.

And also, QUIC has this thing called QUIC Loader. So QUIC Loader basically does the job of registering global events. And if an event occurs, search the DOM, pointing to the URL that should be lazy loaded. It is about one kilobyte when minified. So basically QUIC Loader is the one that knows how to download the rest of the application on a native basis.

And also, we have this QUIC JSON. This is how QUIC is doing the serialization of the application, including the application code, the framework code, and more significantly how it can serialize your event listeners. So the app state is stored in QUIC JSON, making the HTML CDN cacheable.

So what about QUIC React? So QUIC React allows within QUIC. So basically, the advantage of using QUIC React is that you can use existing React components and libraries within QUIC. Because another thing about QUIC React is that it has a huge community of build tools that make your life easier for us as developers. So yeah, QUIC is newer and promising, but it's not yet at a point where it can pull a lot of people away from the React's bustling ecosystem. So yeah, that's a good thing, right? So yeah, before you can use QUIC React, you can need to configure the QUIC Project to use QUIC React. So if you don't have a QUIC application yet, then you need to create one first and then follow the instructions and run the command, add react to your application. And the above command will then install the required dependencies in your package JSON. So like React, QUIC uses JSX syntax to define the HTML output. So QUIC React allows you to use React within QUIC. So the advantage, like what I said, is using QUIC React is that you can use your existing React components and libraries within QUIC.

So let's have a quick demo on QUIC React with material UI. So here we can make your interactive React apps without React ever loading in the user's browsers. So in this case, we have React components using the QUIC framework. So if you interact with this application, you see that the React never loads. You can see in the DevTools that React does not appear. But you can see it adds this attribute client visible to make it so that certain components hydrate when visible on load or whatever. So here in the DevTools you will see that React loaded but only for this particular one component. So this using the QUICify utility in QUIC to essentially turn React components into pure simple HTML that only runs on the server and then you can optionally make them reactive using signals in QUIC that loads extremely little amount of client-side code to add interactivity. So this can help make your application use React components basically lightning fast. QUIC React. Here's a Quick React, the rules are the following, you just don't mix React and QUIC components in the same file. Then this is the recommended folder that you can put your React components or folder.

5. QUIC CD: Metaframework with Lazy-Loading

Short description:

QUIC CD is a metaframework built around QUIC, offering directory-based routing, nested layouts, file-based menus, and data endpoints. QUIC provides fine-grained, lazy-loading features out of the box, automatically splitting applications into smaller JavaScript code chunks. This represents a significant shift in front-end frameworks, making it an exciting time for the front-end world.

You can also, like QUICify, convert the React components into QUIC components. So QUIC and QUIC CD. So QUIC basically is a regime-multi-framework at its core. So QUIC CD is a metaframework built around QUIC. So it offers directory-based routing, nested layouts, file-based menus and data endpoints. So basically QUIC CD is what is Next.js to React, and then Knox is to Vue. And then Svelte is to—sorry, Svelte with KIT to Svelte.

So to recap, QUIC and its visionability. So there's no hydration, which means performance scales well of all one notation. So the developer experience is good and very performant. And basically, QUIC gives us this fine-grained, lazy-loading feature out of the box. It will automatically split up your application into smallest possible chunks of JavaScript code.

So QUIC is a big metal shift from where things are in the front-end framework, but I believe it's a very exciting time for that front-end world.

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 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
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.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
JSNation 2023JSNation 2023
26 min
When Optimizations Backfire
Ever loaded a font from the Google Fonts CDN? Or added the loading=lazy attribute onto an image? These optimizations are recommended all over the web – but, sometimes, they make your app not faster but slower.
In this talk, Ivan will show when some common performance optimizations backfire – and what we need to do to avoid that.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
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.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.