Build PWA with Ionic Toolkit
Download as PPTX, PDF0 likes319 views
The document outlines a presentation on building Progressive Web Apps (PWAs) with the Ionic toolkit, covering topics such as the Ionic framework, Stencil, and the features and benefits of the Ionic PWA toolkit. It highlights the difference between hybrid apps and PWAs, emphasizing the advantages of using web standards and the performance of Stencil-compiled components. The document concludes with an invitation for questions and provides contact information for further inquiries.
Build PWA with Ionic Toolkit
- 1. Build PWA with Ionic Toolkit Pavel Kurnosov
- 2. Agenda 1. What is Ionic? 2. What is Stencil? 3. Say hello to Ionic PWA Toolkit 4. Demo
- 4. Ionic today Creator View App Deploy Package Monitor
- 5. Ionic Framework Web Technologies You Already Know and Love
- 6. 1. Open Source 2. Fully Cross-Platform 3. Premier Native Plugins 4. Complete toolkit including: - CLI - Livereload - Deeplinking - Ionic Icons Ionic framework
- 8. Difference between PWA and Hybrid Applications Hybrid PWA Access to native features * Presence in app store Always latest and greatest * Running in background *
- 9. Use same code to run in all platform
- 10. What is Stencil?
- 11. What is Stencil? A compiler that generates Custom Elements, part of the Web Components spec Not a framework: output is 100% standards-compliant Custom Elements Adds powerful framework features to Web Components
- 12. Why Stencil? Familiarity: features from frameworks but in a leaner, standards-compliant package Performance: Traditional frameworks proving too heavy for demanding mobile Prog Stability: Desire to use web standards and avoid constant framework churn Interoperability: Ability to create components that work across all major frameworks.
- 14. Stencil-compiled components have Reactivity Virtual DOM Lazy Loading High-performance Rendering JSX Server Side Rendering
- 15. Say hello to Ionic PWA toolkit
- 16. What is Ionic PWA toolkit? A Toolkit is the recommended way to build production ready Progressive Web Apps (PW
- 17. What does this toolkit using? Stencil Ionic (4.x+)
- 18. Features Stencil Ionic Framework Routing Push Notifications New version
- 19. Unit Tests Pre-rendering zero config Lazy loading zero config Code splitting Polyfills ES6 Lazy-img component Features Homescreen PWA
- 20. DEMO
- 21. What is next?
- 22. Q&A
Editor's Notes
- #3: Before dive into what is PWA toolkit from Ionic I will present what is Ionic and Stencil are Ionic products which are parts of this toolkit.
- #5: Not all products are free
- #9: We talk about Push notifications, bluetooth, file system, Offline/online and etc Only native apps can be published, so better distribution WPA load from server and cache, Hybrid possible with other services to do the same but not out of the box. Service workers run on an event driven model: browser UI making a network request, push notification background sync
- #10: Yes yes, there is a lot of memes about this concept, but I think Ionic managed to do it not so bad and you have a lot of options.
- #11: The main purpose of library was to help Ionic to build next version of the Ionic that will support PWA in better way then they have right now: Proper lazy loading Fast initial rendering To be 100% PWA compliant https://corehacker-10883.firebaseapp.com/
- #12: What Stencil promise to solve - complexity of building web components.
- #15: Virtual DOM: fast DOM updates without common DOM performance pitfalls Lazy Loading : By default components load asyncronously and can be bundled with related components Reactivity: Efficient updates based on property and state changes High-performance Rendering: async rendering system, similar to React Fiber JSX: Popular and familiar markup system pioneered by React Server Side Rendering: Hydrate pre-compiled components on the server without a headless browser
- #16: So far we seen all part in separate and now we are going to compile them altogether to see full picture.
- #19: Stencil for easily building and loading standardized Web Components Ionic Framework Routing Push Notifications setup Showing a toast when a new version of the PWA is available
- #20: Unit Tests Pre-rendering zero config lazy loading zero config code splitting Polyfills selectively loaded depending on the browser support ES6 by default for new browsers, ES5 for older browsers Everything needed for an add to homescreen PWA (service worker, web manifest and iOS meta tags) lazy-img component for lazy loading below the fold images
- #22: Cross Platform Build web apps that run equally well on iOS, Android, Electron, and as Progressive Web Apps Native Access Access the full Native SDK on each platform, and easily deploy to App Stores (and the web!) Open Source Capacitor is completely open source (MIT) and maintained by Ionic and its community. Web Native Build apps with standardized web technologies that will work for decades, and easily reach users on the app stores and the mobile web. Extensible Easily add custom native functionality with a simple Plugin API, or use existing Cordova plugins with our compatibility layer. Simple Focus on what you want to do, not how. Capacitor turns complex, proprietary Native APIs into simple JS calls.