Build PWA with Ionic Toolkit

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:

pvl.kurnosov@gmail.com

@pavel_kurnosov

linkedin.com/in/pavelkurnosov