Quick introduction to Qwik

Quick introduction to qwik
Juho Vepsäläinen
Web Dev & Sausages – 23.02.2023

What to expect
1. Current trends
2. What the Qwik?
3. Qwik City
4. Partytown
5. Conclusion
1

Past, present, future
Source: Miško Hevery: WebApps at Scale
2

Content delivery networks [4]
4

Transitional web applications (TWAs) (2021) [3]
• In October 2021, Rich Harris proposed the idea of TWAs [3]
6

• TWA = pickBestIdeas(traditionalWeb, SPA)
6

• TWAs utilize SSR for fast initial loading times while not relying
on JavaScript
6

• TWAs utilize SSR for fast initial loading times while not relying
on JavaScript
• TWAs provide consistent experience and accessibility as a
built-in feature
6

Progressive enhancement in a nutshell (2008) [2]
7

Disappearing frameworks (2021) [1]
• Disappearing frameworks come with almost zero cost and vanish
from the application [1]
8

• Strong contrast to the current frameworks that load upfront and
rely on expensive hydration for SSR
8

• Strong contrast to the current frameworks that load upfront and
rely on expensive hydration for SSR
• Changing the viewpoint allows new technical solutions to
emerge
8

Qwik in summary
• Qwik was initiated by Miško Hevery (Angular.js)
9

Qwik in summary
• Qwik is a new take on how to build web applications
9

Qwik in summary
• The big idea is deferring work through resumability and the
avoidance of hydration
9

Qwik in summary
• In other words, Qwik serializes the application/framework state
into HTML when rendering the application
9

Qwik in summary
• Qwik leverages JSX but implements state via reactive bindings
and avoids component re-rendering
9

Qwik in summary
• Qwik leverages JSX but implements state via reactive bindings
and avoids component re-rendering
• Qwik can consume React components making it easier to adopt
9

Qwik City - the metaframework for Qwik
• Qwik City is to Qwik what Next.js is to React
10

Qwik City - the metaframework for Qwik
• Qwik City is to Qwik what Next.js is to React
• In other words, opinions related to routing, layouts, menus,
breadcrumbs, content, data endpoints and more
10

Demo time (choose one)
1. Static build
2. Styling with Tailwind
3. Routing
4. Actions/loaders
10

Partytown - Say goodbye to slow third-parties
• Partytown pushes third-party script loading to a web worker
12

• Framework/library agnostic
12

• Framework/library agnostic
• Helps a lot if you rely on analytics or other external
dependencies as blocking the main thread is a common issue
12

Quo vadis Qwik?
• Expect more stability
13

Quo vadis Qwik?
• More interactive models for developing UIs (builder.io business
model)
13

Quo vadis Qwik?
model)
• Stronger ecosystem
13

Quo vadis Qwik?
model)
• More usage in practice
13

Quo vadis Qwik?
model)
• More usage in practice
• Feels like the beginning of something great
13

github.com/survivejs/qwik-katas
13

Thank you!
Questions please
13

References i
Carniato, R.
Understanding transitional javascript apps, Nov 2021.
Gustafson, A., Overkamp, L., Brosset, P., Prater, S. V., Wills, M.,
and PenzeyMoog, E.
Understanding progressive enhancement, Oct 2008.
Harris, R.
Have single-page apps ruined the web?, Oct 2021.
Pathan, A.-M. K., Buyya, R., et al.
A taxonomy and survey of content delivery networks.
Grid Computing and Distributed Systems Laboratory, University
of Melbourne, Technical Report 4, 2007 (2007), 70.
14

References ii
Shi, W., Cao, J., Zhang, Q., Li, Y., and Xu, L.
Edge computing: Vision and challenges.
IEEE internet of things journal 3, 5 (2016), 637–646.
• City photo by asmuSe
• Hare photo by nathalieburblis
• Partytown condensed
15

Quick introduction to Qwik

More Related Content

What's hot

Similar to Quick introduction to Qwik

More from Juho Vepsäläinen

Recently uploaded

Quick introduction to Qwik