Welcome to
Complete Guide to Qwik
Harness Qwik Resumable Architecture for Lightning-Fast Startup Times
Course Syllabus and Content
Qwik in Action
1 Lesson
Why is there a need for another framework? the current approach is not producing fast sites, and this problem will not disappear by waiting for a faster CPU.
Introduction
7 Lessons
Introduction to the frontend development. Now, the responsibility of creating good or bad applications depends on you because the means available are all there.
Overview of TypeScript. TypeScript introduced types into an untyped language like Javascript to ensure code consistency.
Overview of the frontend architectures. In this lesson you will understand the difference from Client Side Rendering and Multi Page Application.
Overview of the hydration. In this lesson you will understand the difference from Hydration and Island architecture/Partial Hydration.
React Server Component. In this lesson you will understand the difference from Server Component and Client Component.
Qwik resumability will change the frontend ecosystem, In this lesson you will understand why is so great.
Wrap up of frontend architectures module.
Qwik, the framework built on top of closure-extraction
5 Lessons
In this lesson you will be able to understand more about performance and you will understand how improve your application with less JavaScript.
Resumability is the core concept behind Qwik. In this lesson you will understand better the process.
Code Extraction is a topic hard to master, you will understand how it works with different approaches.
JSX syntax is the most famous one because of React, but what about the other frameworks, Vue, Angular?
Wrap up of Code extraction module.
Getting started with Qwik
5 Lessons
Let's see together the fundamentals of Qwik. In this lesson you will compare Webpack and Vite.
The Qwik build process is so important because the resumability process requires correct and intelligent bundling.
Qwik CLI and amazing tool to have a great Developer Experience with Qwik.
Qwik Middleware an easy and clever way to expose your RESTful APIs or GraphQL APIs.
Wrap up of Getting Started with Qwik module.
SEO and Core Web Vitals
6 Lessons
In this lesson you will learn the pillars of SEO. You will lean few new terms and metrics that can help you to measure your application.
In this lesson you will learn the some new things about SEO and crawler.
Partytown an amazing library to execute third scripts in the service worker.
Core Web Vitals are so important for own application. You will learn in detail all the metrics.
Core Web Vitals Labs Data vs Field Data. These two information are so different, let's figure out the peculiarity of those.
Wrap up of SEO module.
Deploy Qwik in production
5 Lessons
There are many ways to deploy a Qwik application. You can have your own server and deploy your Qwik application easily with the Qwik CLI and integrations.
Cloud solution are a good alternative for a low cost pipeline and host. Nowadays these kind of services are so smart and great, you should try them.
With different team and many developers, it's important to master branching strategies to avoid problems during your day by day.
Progressive Web App approach can be an alternative to the stores. You can publish you application with a lot of benefit with PWA.
Wrap up of Deploy Qwik in Production module.
Style and render data with Qwik
5 Lessons
Style an application is so important let's see how engage your Stakeholders into this process.
CSS is so huge, there are a lot of ways to style your application with Qwik, let's see them together.
Tailwind is an amazing library, let's see together how master it. I will share you some tips and tricks to use Tailwind in a better way.
In this lesson you will learn how manage data with Qwik. There are a lot of APIs to explore, let's jump into the code.
Wrap up of Style and Data module.
Creating an e-commerce with Qwik and Supabase
5 Lessons
In this lesson you will learn how architect a modern frontend end application.
In this lesson you will learn the trade offs of technical decisions. I share with you some tips and tricks.
In this lesson you will explore Supabase. This is an amazing service to leverage your business.
A custom authentication is too complex and risky to implement from scratch. Let's use the Supabase auth to optimize our goals.
Wrap up of Create an e-commerce module.
Rendering products with Orama full text search
6 Lessons
Supabase CLI an handy tool to improve consistency across environments.
Let's use the Supabase CLI to manage our database migrations and schemas.
In this lesson you will create the e-commerce homepage with the Supabase client to read the data.
Every e-commerce has a detail page, let's create our product detail page with Qwik.
Cache is really useful and in this lesson I will explain in the detail how it works. I will share my experience in this topic with some cool analogies.
Wrap up of Supabase module.
Adding cart and checkout process with Stripe
5 Lessons
Let's improve out application with a useful "Add to favorites" feature.
In this lesson you will learn how to use Stripe to manage your payments in a secure way.
Let's try the Supabase database function. This is an easy way to allows us to do several things and also add some logic to our procedure.
A real-time database with Supabase is so simple to implement, let's build together a new functionality with this great feature.
Wrap up of e-commerce module.
Adding tests to our Qwik application
6 Lessons
Let's explore together the benefit of testing. In this lesson you will explore the various types of tests, Unit Test, E2E, Visual regression tests and more.
Let's discuss together how and when testing is valuable for our business. 3X Explore/Expand/Extract can help us is this reasoning.
In this lesson you will lean the Test driven development TDD flow. It's a really good practice to put in place.
In this lesson you will lean how test your components with Cypress.
Do you need a Qwik component library? Qwik UI is the project for you because can give you a lot of Qwik accessible components out of the box.
Wrap up of Qwik Testing module.
Final thoughts
5 Lessons
Let's explore a bit of history of Qwik. A new framework with a great past.
Qwik and React together, no problem, qwikify$ is the API to solve your problems.
Qwik and Astro together, no problem, @qwikdev/astro is the library to solve your problems.
Qwik and micro-frontends together, no problem, out of the box Qwik can manage this scenario with no external dependencies.
Wrap up of Final thought module.