build pwa with ionic toolkit
TRANSCRIPT
Build PWA with Ionic Toolkit
Pavel Kurnosov
Agenda
1. What is Ionic?
2. What is Stencil?
3. Say hello to Ionic PWA Toolkit
4. Demo
What is Ionic?
Ionic today
Creator View App Deploy Package Monitor
Ionic Framework
Web Technologies You Already Know and Love
1. Open Source
2. Fully Cross-Platform
3. Premier Native Plugins
4. Complete toolkit including:
- CLI
- Livereload
- Deeplinking
- Ionic Icons
Ionic framework
Cross-platform
Difference between PWA and Hybrid Applications
Hybrid PWA
Access to native features *
Presence in app store
Always latest and greatest *
Running in background *
Use same code to run
in all platform
What is Stencil?
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
Why Stencil?
Familiarity: features from frameworks but in a leaner, standards-compliant
package
Performance: Traditional frameworks proving too heavy for demanding mobile Progressive Web Applications
Stability: Desire to use web standards and avoid constant framework churn
Interoperability: Ability to create components that work across all major
frameworks.
Example Stencil component
Stencil-compiled components have
Reactivity
Virtual DOM
Lazy Loading
High-performance Rendering
JSX
Server Side Rendering
Say hello to Ionic PWA
toolkit
What is Ionic PWA toolkit?
The Ionic PWA Toolkit is the recommended way to build production ready Progressive Web Apps (PWAs) with Ionic
What does this toolkit using?
Stencil Ionic (4.x+)
Features
Stencil Ionic Framework Routing
Push Notifications New version
Unit Tests Pre-rendering zero config Lazy loading zero config
Code splitting Polyfills ES6
Lazy-img component
Features
Homescreen PWA
DEMO
What is next?
Q&A
Contact details:
@pavel_kurnosov
linkedin.com/in/pavelkurnosov