A short introduction to Ionic and new web components compiler from the Ionic team - StencilJS. And as result - new Ionic PWA Toolkit that is using both technologies to help build PWA.
8. Difference between PWA and Hybrid Applications
Hybrid PWA
Access to native features *
Presence in app store
Always latest and greatest *
Running in background *
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.
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.
Not all products are free
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
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.
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/
What Stencil promise to solve - complexity of building web components.
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
So far we seen all part in separate and now we are going to compile them altogether to see full picture.
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
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
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.