Quick introduction to Qwik
0 likes228 views
The document discusses current trends in web development, particularly focusing on the concept of transitional web applications (TWAs) and a framework called Qwik. Qwik allows for a new approach to building web applications by emphasizing resumability instead of hydration, enabling faster performance. Additionally, it introduces Qwik City as a meta-framework for routing and layout management, along with Partytown, which optimizes third-party script loading.
![Content delivery networks [4]
4](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-6-320.jpg)
![Edge computing [5]
5](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-7-320.jpg)
![Transitional web applications (TWAs) (2021) [3]
• In October 2021, Rich Harris proposed the idea of TWAs [3]
6](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-8-320.jpg)
![Transitional web applications (TWAs) (2021) [3]
• In October 2021, Rich Harris proposed the idea of TWAs [3]
• TWA = pickBestIdeas(traditionalWeb, SPA)
6](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-9-320.jpg)
![Transitional web applications (TWAs) (2021) [3]
• In October 2021, Rich Harris proposed the idea of TWAs [3]
• TWA = pickBestIdeas(traditionalWeb, SPA)
• TWAs utilize SSR for fast initial loading times while not relying
on JavaScript
6](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-10-320.jpg)
![Transitional web applications (TWAs) (2021) [3]
• In October 2021, Rich Harris proposed the idea of TWAs [3]
• TWA = pickBestIdeas(traditionalWeb, SPA)
• 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](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-11-320.jpg)
![Progressive enhancement in a nutshell (2008) [2]
7](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-12-320.jpg)
![Disappearing frameworks (2021) [1]
• Disappearing frameworks come with almost zero cost and vanish
from the application [1]
8](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-13-320.jpg)
![Disappearing frameworks (2021) [1]
• Disappearing frameworks come with almost zero cost and vanish
from the application [1]
• Strong contrast to the current frameworks that load upfront and
rely on expensive hydration for SSR
8](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-14-320.jpg)
![Disappearing frameworks (2021) [1]
• Disappearing frameworks come with almost zero cost and vanish
from the application [1]
• 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](https://image.slidesharecdn.com/webdevandsausagesquickintroductiontoqwik-230224094551-3119136c/85/Quick-introduction-to-Qwik-15-320.jpg)
Quick introduction to Qwik
- 1. Quick introduction to qwik Juho Vepsäläinen Web Dev & Sausages – 23.02.2023
- 2. What to expect 1. Current trends 2. What the Qwik? 3. Qwik City 4. Partytown 5. Conclusion 1
- 4. Past, present, future Source: Miško Hevery: WebApps at Scale 2
- 6. Content delivery networks [4] 4
- 8. Transitional web applications (TWAs) (2021) [3] • In October 2021, Rich Harris proposed the idea of TWAs [3] 6
- 9. Transitional web applications (TWAs) (2021) [3] • In October 2021, Rich Harris proposed the idea of TWAs [3] • TWA = pickBestIdeas(traditionalWeb, SPA) 6
- 10. Transitional web applications (TWAs) (2021) [3] • In October 2021, Rich Harris proposed the idea of TWAs [3] • TWA = pickBestIdeas(traditionalWeb, SPA) • TWAs utilize SSR for fast initial loading times while not relying on JavaScript 6
- 11. Transitional web applications (TWAs) (2021) [3] • In October 2021, Rich Harris proposed the idea of TWAs [3] • TWA = pickBestIdeas(traditionalWeb, SPA) • 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
- 12. Progressive enhancement in a nutshell (2008) [2] 7
- 13. Disappearing frameworks (2021) [1] • Disappearing frameworks come with almost zero cost and vanish from the application [1] 8
- 14. Disappearing frameworks (2021) [1] • Disappearing frameworks come with almost zero cost and vanish from the application [1] • Strong contrast to the current frameworks that load upfront and rely on expensive hydration for SSR 8
- 15. Disappearing frameworks (2021) [1] • Disappearing frameworks come with almost zero cost and vanish from the application [1] • 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
- 16. What the Qwik?
- 17. Qwik in summary • Qwik was initiated by Miško Hevery (Angular.js) 9
- 18. Qwik in summary • Qwik was initiated by Miško Hevery (Angular.js) • Qwik is a new take on how to build web applications 9
- 19. Qwik in summary • Qwik was initiated by Miško Hevery (Angular.js) • Qwik is a new take on how to build web applications • The big idea is deferring work through resumability and the avoidance of hydration 9
- 20. Qwik in summary • Qwik was initiated by Miško Hevery (Angular.js) • Qwik is a new take on how to build web applications • The big idea is deferring work through resumability and the avoidance of hydration • In other words, Qwik serializes the application/framework state into HTML when rendering the application 9
- 21. Qwik in summary • Qwik was initiated by Miško Hevery (Angular.js) • Qwik is a new take on how to build web applications • The big idea is deferring work through resumability and the avoidance of hydration • In other words, Qwik serializes the application/framework state into HTML when rendering the application • Qwik leverages JSX but implements state via reactive bindings and avoids component re-rendering 9
- 22. Qwik in summary • Qwik was initiated by Miško Hevery (Angular.js) • Qwik is a new take on how to build web applications • The big idea is deferring work through resumability and the avoidance of hydration • In other words, Qwik serializes the application/framework state into HTML when rendering the application • 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
- 24. Qwik City
- 25. Qwik City - the metaframework for Qwik • Qwik City is to Qwik what Next.js is to React 10
- 26. 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
- 27. Demo time (choose one) 1. Static build 2. Styling with Tailwind 3. Routing 4. Actions/loaders 10
- 28. Partytown
- 30. Partytown - Say goodbye to slow third-parties • Partytown pushes third-party script loading to a web worker 12
- 31. Partytown - Say goodbye to slow third-parties • Partytown pushes third-party script loading to a web worker • Framework/library agnostic 12
- 32. Partytown - Say goodbye to slow third-parties • Partytown pushes third-party script loading to a web worker • 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
- 33. Conclusion
- 34. Quo vadis Qwik? • Expect more stability 13
- 35. Quo vadis Qwik? • Expect more stability • More interactive models for developing UIs (builder.io business model) 13
- 36. Quo vadis Qwik? • Expect more stability • More interactive models for developing UIs (builder.io business model) • Stronger ecosystem 13
- 37. Quo vadis Qwik? • Expect more stability • More interactive models for developing UIs (builder.io business model) • Stronger ecosystem • More usage in practice 13
- 38. Quo vadis Qwik? • Expect more stability • More interactive models for developing UIs (builder.io business model) • Stronger ecosystem • More usage in practice • Feels like the beginning of something great 13
- 41. 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
- 42. 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