progressive web apps og payment request

33
Progressive Web Apps Filip Bruun Bech-Larsen @filipbech

Upload: filip-bruun-bech-larsen

Post on 19-Jan-2017

119 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Progressive Web Apps og Payment Request

Progressive Web Apps

Filip Bruun Bech-Larsen@filipbech

Page 2: Progressive Web Apps og Payment Request

Filip

Page 3: Progressive Web Apps og Payment Request
Page 4: Progressive Web Apps og Payment Request

Web vs native• Performance

• Hardware

• Offline

• Re-engangement

• Kun én platform

• Ingen gate-keepers

• Let/hurtigt deploy/update

• the link…

Page 5: Progressive Web Apps og Payment Request

Lad os løse problemerne

• Performance => RAIL

• Hardware => Standard APIs

• Offline => ServiceWorker

• Re-engangement => Push events + notifications

Page 6: Progressive Web Apps og Payment Request

Progressive Web Apps

• RAIL

• Responsive design

• Secure (kun HTTPS)

• Offline ServiceWorker

Page 7: Progressive Web Apps og Payment Request

RAIL Performance

• Response (100ms)

• Animation (5-10ms) (transform+opacity & will-change)

• Idle (50ms)

• Load (1s)

Page 8: Progressive Web Apps og Payment Request

Serviceworker• Javascript worker

• Kører i baggrunden også efter siden lukkes

• En proxy for alt på netværket

• Sync

• Push (og notificationclicks)

Page 9: Progressive Web Apps og Payment Request

gamle browsere

• “progressive”

Page 10: Progressive Web Apps og Payment Request

ok, vis nu noget kode

Page 11: Progressive Web Apps og Payment Request
Page 12: Progressive Web Apps og Payment Request
Page 13: Progressive Web Apps og Payment Request
Page 14: Progressive Web Apps og Payment Request
Page 15: Progressive Web Apps og Payment Request

use sw-toolbox.js for caching

Page 16: Progressive Web Apps og Payment Request

Web vs native

The Web haler ind, og selvom native altid vil være forrest, har vi et seriøst alternativ med

PWAs.

Største problem pt er iOS-supportSkriv lige til Tim Cook [email protected]

Page 17: Progressive Web Apps og Payment Request

Moderne javascript• “Bagud-kompatibilitet” er en kæmpe styrke

ved The Web, men det er også det største problem (vi kan ikke bare lave ny version og indføre breaking changes)

• I årevis betød det at der intet skete

• Men nu er der faktist kommet godt gang i udviklingen igen

Page 18: Progressive Web Apps og Payment Request

EcmaScript

• ES6, ES2015, ES2017 osv…

Page 19: Progressive Web Apps og Payment Request

Nye features • Class

• Fat arrow

• Destructuring

• Default parameters

• Rest+spread

• Symbols

• Generators

Page 20: Progressive Web Apps og Payment Request

lets see some more code…

Page 21: Progressive Web Apps og Payment Request
Page 23: Progressive Web Apps og Payment Request

Fede ES6-featuresbrug dem idag - transpiler for kompatibilitet

Page 24: Progressive Web Apps og Payment Request

og sikkert også…

• Async functions (await)

• Decorators

• Observables…

Page 25: Progressive Web Apps og Payment Request

PaymentRequest• En ny feature i Chrome 53 (pt i beta)

• Tager imod info+betaling fra kunden

• Perfekt eksempel på progressive enhancement

• OBS: Kræver SSL, Kun Android, mulig PCI-cert.

• First impressions

Page 26: Progressive Web Apps og Payment Request
Page 27: Progressive Web Apps og Payment Request
Page 28: Progressive Web Apps og Payment Request
Page 30: Progressive Web Apps og Payment Request

det er alt sammen godtmen hvad med mit projekt, mit framework, osv…

Page 31: Progressive Web Apps og Payment Request

Start idag

• Alle frameworks (eller uden framework)

• Husk “progressive” enhancement

• Start med simpel ressource-caching, og arbejd derfra

Page 32: Progressive Web Apps og Payment Request

Thanks

• @filipbech

• filipbech.github.io

Page 33: Progressive Web Apps og Payment Request