Qwik Creator (Previously Angular)
Qwik for Instant-Loading Websites & Apps
3 hours, 48 minutes
CC
Course Description
As web apps become more dynamic and interactive, developers are faced with the challenge of managing larger and larger amounts of JavaScript, often resulting in poor performance. The Qwik JavaScript framework offers a new approach to this problem by using a unique resumable architecture that allows for fast startup times and amazing Lighthouse scores, even with large codebases!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: February 28, 2023
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 2 minutes
Miš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.
Framework Performance
Section Duration: 1 hour, 8 minutes
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.
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.
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
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.
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.
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
Section Duration: 33 minutes
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.
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.
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
Section Duration: 1 hour, 12 minutes
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.
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
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.
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.
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.
Miško implements saving changes to the contact data and redirects the user away from the edit page.
Lazy Execution & Authentication
Section Duration: 43 minutes
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.
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.
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.
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.
Wrapping Up
Section Duration: 7 minutes
Miško ends the course by sharing a few Qwik resources, including the tutorials, examples, and playground. You can view some deep-dive bonus lessons on our YouTube channel.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops