Progressive Web Apps

EZEKIEL CHENTNIK• Principal JavaScript Engineer @ Northwestern Mutual

• Building a new engineering culture with incredible engineers • Building highly available React/Redux Apps on incredible stack • Hack-a-thons, Experimenting, Engineer Bootcamp

• Author of ‘Developing a Redux Edge, O’Reilly Media’ • Previous: Large Scale Things @booking.com (Amsterdam, NL)

• 700,000+ transactions/day • Rapid UI & UX development, experimenting (me: shipping 30 features in 2 week period to millions of users with zero issues)

• Ran conclusive A/B tests worth $1,500,000 / day, quarter over quarter • UX designer, Senior JavaScript Engineer, Team Lead; on Maps & Geo Data team, Mobile

• Progressive• Discoverable• Linkable• Responsive• App-like• Connectivity-independent• Re-engageable• Installable• Fresh• Safe

Attributes of a PWA

Why PWA

2012: future Zeek already been done did this2013: You're crazy to build web apps.2015: You guys are visionaries.2016: Progressive web apps are kind of a thing.2017: Time to take over the world2018: future future Zeek continues to chuck middle finger at naysayers

Really Really,real world examples

• Flipkart• Twitter• Alibaba• Northwestern Mutual (is cool enough…)

Reference App

https://preact-pwa.appspot.com

Manifest

Web App Manifest

App Shell, lazy universal

App Shell

Universal JavaScript

Universal JavaScript

Service Workers

Offline caching

Performance Nuggets

• Large numbers are the accumulation of small numbers

• Performance is about perception (curb a users expectations, ~200ms)

• Perf first, customer experience is more important than Developer experience

• Lighthouse (demo)

CX > DX