Qwik for Instant-Loading Websites & Apps
Topics:
Table of Contents
Introduction
Framework Performance
The State of Front-End Frameworks
Miško shares performance metrics and website trends to highlight why poor web performance correlates with using JavaScript. With most frameworks, the initial bundle size may be small, but there is a consistent upward slope in bundle size as more components are added.
Evolution of Client-Side Frameworks
Miško discusses how frameworks have evolved from fast user experiences with poor developer experiences to slow user experiences and great developer experiences. Qwik seeks to eliminate performance issues while providing an approachable and intuitive developer experience.
Qwik vs Next.js
Miško compares Qwik with new framework features like React Server Components and Next.js. React server components still require the framework to be sent to the client, so they lack the resumability feature provided by Qwik
Hydration vs Resumability
Miško explains why hydration is a workaround for creating better-performing web applications. With Qwik, the initial HTML load is not a non-interactive shell waiting for hydration. It's an interactive page bootstrapped with a small, static amount of JavaScript.
Advantages of Resumability
Miško explains how hydration leads to an application being replayed. This affects performance because replaying the application on the client duplicates the work the server performed. Resumability picks up where the server left off, eliminating duplicate execution and increasing performance.
Startup vs. Runtime Performance
Miško compares metrics for startup and runtime performance. Frameworks with fast runtime performance will not necessarily have fast startup performance. Runtime performance metrics often measure less frequent use cases.
Qwik Setup
Qwik Demonstrations
Miško demonstrates how Qwik renders an application without sending JavaScript over the network. Based on user interactions, required JavaScript bundles are delivered to the client as needed.
Progressivity & Mitosis
Miško demonstrates Mitosis, a subset of JSX that supports generating code for many front-end frameworks. Resumability is also shown using a basic ToDo application.
Setup the Qwik App
Miško generates a basic Qwik application and runs the development server. Code along as the application is built. Qwik version 0.16.2 was used when creating this course. Check our code in the solution repo linked below.
Data, Routing, & Interactivity
Rendering Data on the Server
Miško uses the onGet method to load a list of contacts on the server. This method is a server method and is never sent to the client. The useEndpoint method pulls the data into the client component, which renders the results in the onResolved handler.
CSS & UI Component Interactivity
Miško creates a CSS file and imports it into the contacts component. An HTML input element is added to filter the list of contacts. When the filtering logic is included in the component, Qwik sends the necessary state of the application down to the client
Filtering Data on the Server
Miško maps through the data on the server, so the payload sent to the client contains a subset of the contact data. The server-side filtering occurs in the onGet method. A SimpleContact type is declared to ensure type-safety throughout the component.
Route Parameters
Miško creates a page for displaying a single contact. Square brackets are used in the folder name to identify the contacted route parameter. Additional CSS styling is added to the component.
Posting Data to the Server
Miško adds an edit page for a contact record. The edit page posts the contact data to the server. Missing data errors are added to an errors object and displayed back in the client form.
Saving Data & Redirection
Miško implements saving changes to the contact data and redirects the user away from the edit page.
Lazy Execution & Authentication
Lazy Execution of Components
Miško demonstrates how Qwik recognizes when component execution is required. If a component is not visible on the page, the JavaScript required by the component will not be loaded and executed until it is visible.
Multi-Page vs. Single-Page Applications
Miško demonstrates how the application can be switched from a multi-page (MPA) to a single-page application (SPA). The Link element replaces the HTML anchor element. Instead of causing a full page reload, the Link element will navigate as a SPA without losing the current state.
Authentication
Miško adds authentication to the application. The onRequest method is added to the layout and behaves like middleware, catching every request to the server. A condition is added to check for a cookie and redirect the user to the login if it is not present.
Production Mode
Miško exports a production build of the application. A ServiceWorker eagerly downloads the JavaScript bundles behind the scenes, making future requests available in the cache.
