Qwik for Instant-Loading Websites & Apps
Table of Contents
IntroductionMiško Hevery, the creator of Angular, introduces a new framework, Qwik. The Qwik framework is performance-focused, delivering pure HTML and incrementally loading JS as needed.
Evolution of Client-Side FrameworksMiš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.jsMiš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
Advantages of ResumabilityMiš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 PerformanceMiš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.
Progressivity & MitosisMiš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 AppMiško generates a basic Qwik application and runs the development server. Code along as the application is built. Check our code in the solution repo linked below.
Data, Routing, & Interactivity
Rendering Data on the ServerMiš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 InteractivityMiš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 ServerMiš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 ParametersMiš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 ServerMiš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 & RedirectionMiško implements saving changes to the contact data and redirects the user away from the edit page.
Lazy Execution & Authentication
Multi-Page vs. Single-Page ApplicationsMiš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.
AuthenticationMiš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.