progressive web apps og payment request
Post on 19-Jan-2017
127 Views
Preview:
TRANSCRIPT
Progressive Web Apps
Filip Bruun Bech-Larsen@filipbech
Filip
Web vs native• Performance
• Hardware
• Offline
• Re-engangement
• Kun én platform
• Ingen gate-keepers
• Let/hurtigt deploy/update
• the link…
Lad os løse problemerne
• Performance => RAIL
• Hardware => Standard APIs
• Offline => ServiceWorker
• Re-engangement => Push events + notifications
Progressive Web Apps
• RAIL
• Responsive design
• Secure (kun HTTPS)
• Offline ServiceWorker
RAIL Performance
• Response (100ms)
• Animation (5-10ms) (transform+opacity & will-change)
• Idle (50ms)
• Load (1s)
Serviceworker• Javascript worker
• Kører i baggrunden også efter siden lukkes
• En proxy for alt på netværket
• Sync
• Push (og notificationclicks)
gamle browsere
• “progressive”
ok, vis nu noget kode
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 tcook@apple.com
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
EcmaScript
• ES6, ES2015, ES2017 osv…
Nye features • Class
• Fat arrow
• Destructuring
• Default parameters
• Rest+spread
• Symbols
• Generators
lets see some more code…
DemoSource:
https://github.com/filipbech/filipbech.github.io/tree/master/demos/push/
Fede ES6-featuresbrug dem idag - transpiler for kompatibilitet
og sikkert også…
• Async functions (await)
• Decorators
• Observables…
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
Demo(Chrome 53, Android)
https://github.com/filipbech/filipbech.github.io/tree/master/demos/paymentrequest
det er alt sammen godtmen hvad med mit projekt, mit framework, osv…
Start idag
• Alle frameworks (eller uden framework)
• Husk “progressive” enhancement
• Start med simpel ressource-caching, og arbejd derfra
top related