Qwik for Angular Developers

Description: You already know your way around Angular. You've heard about Qwik, but haven't had the chance to try it out yet. Maybe you are wondering how to implement certain functions in Qwik. The goal of this talk is to keep Angular & Qwik side by side to help you get started developing with Qwik. For this purpose, we will look at the basic building blocks that you need in your daily work: Components, Events, Navigation, Forms & HTTP. After this session, you will be able to understand Qwik even better by connecting the dots between Angular & Qwik.

Code at GitHub: https://github.com/co-IT/talk-qwik-angular

Transcript

1. Qwik for - Developers
2. New perspectives open up new paths.
3. How can I do … in Qwik?
4. @GregOnNet Gregor Woiwode, CTO Find me at the conference and say hi!
5. @GregOnNet Gregor Woiwode, CTO Find me at the conference and say hi! 🤔 write me an X-it?!
6. Playground - Insurance Branch - Document Manager
7. - 💫 Developer Experience - 🧬 Component Anatomy - 🧭 Routing - ☁ Http - 🤔 Code reusability Agenda
8. 💫 Developer Experience CLI CLI community built-in
9. CLI - Scaffolds Project - Installs integrations - Provides guidance
10. esLint - ⛔ Qwik has some constraints how its API needs to be used. - 🛣 Qwik provides esLint Rules guiding you.
11. esLint https://qwik.builder.io/docs/advanced/eslint/#missingExport - E.g. some functions must be exported. - Each rule is well documented.
12. Integrations https://qwik.builder.io/docs/integrations 🌳 unpic And many more… Auth.js ⚛ React Playwright vitest
13. Component Anatomy
14. Component Anatomy
15. JSX/TSX - JavaScript Syntax Extension
16. Component Anatomy
17. Component Anatomy
18. Component Anatomy
19. • OnInit • OnChanges • AfterViewInit • AfterViewChecked • AfterContentInit • AfterContentChecked • DoCheck • OnDestroy • useTask$ • useVisibleTask$ Component Life-Cycle
20. Component Anatomy
21. Component Anatomy
22. useTask$ - 👂can listen to state changes - 🏄is executed on the server first
23. useTask$ = OnInit + OnChanges + Server-Side-Execution
24. useTask$
25. https://qwik.builder.io/docs/components/tasks/#usetask … is executed on the server & the client. 🤯 useTask$
26. useVisibleTask$ - 📱is executed on the client - 🎨 is triggered initially after first render - 🔄 re-executes when dependency has changed
27. useVisibleTask$ = AfterViewInit + OnChanges
28. useVisibleTask$
29. • @HostListener() • InjectionToken<DOCUMENT> • useOnDocument() • useOnWindow() • useOn() Listen to Events
30. Component Anatomy
31. useOn…
32. • @Input() / input() • @Output() / output() • Props • PropFunction Coponent Communication
33. Component Communication
34. Component Communication
35. • signal() • computed() • effect() • input() • output() • model() • useStore() • useSignal() • useComputed() Reactive Primitives
36. DEMO
37. • Router • Guards • File based routing • Middleware • Layouts Navigation
38. DEMO
39. • HttpClient • Interceptors • fetch • useResource$ • routeLoader$ • routeAction$ • server$ HTTP
40. DEMO
41. Summary component$ STATE useSignal useStore TASKS useTask$ useVisibleTask$ CONTEXT createContextId useContext useContextProvider SLOTS Qwik enhanced progressively by hooks.
42. Summary component$ SERVER server$ env PAGES Routing Dynamic Head DATA routeLoader$ routeAction$ Endpoints LAYOUTS Qwik comes with Qwik City
43. Community
44. Community Join Discord via qwik.builder.io
45. Gregor Woiwode, CTO https://github.com/co-IT/talk-qwik-angular Slides & Code
46. Attributions - Photo by Anika Huizinga on Unsplash - Photo by Dawid Zawiła on Unsplash - Photo by RephiLe water on Unsplash - Photo by Jed Villejo on Unsplash