❖ Consultant at Auth0 ❖ Open Sourcerer ❖ Self-Acclaimed Developer Evangelist ❖ Community Builder ❖ Jollof Rice Ambassador ❖ Google Developer Expert ❖ Live in Lagos, Nigeria
Progressive enhancement used throughout Progressive Easily discovered by search engines Discoverable It’s the web, linkable by definition Linkable UI fits device’s form factor and screen size Responsive Looks & interacts like a native app App-like
Offline-first & cache support via service workers Connectivity Independent Engage users through push notifications Re-engageable Install to device’s home screen, run in fullscreen Installable Always get newest data from server Fresh Always served over HTTPS Secure
1 1 ❖ How does this bring cash to the table? ❖ How do I code this stuff? ❖ Do I have to write from scratch or there awesome tools out there? ❖ How do I convince my manager to make the switch? I am a diehard PHP developer, do I really have to learn JavaScript? ❖ This is a PHP Conference man! Should you even be talking about this stuff?
Conference 21 ❖ 104% in conversion rate for new users. ❖ 74% increase in user sessions. ❖ 2x more pages visited per session per user across all browsers. URL: https://aliexpress.com
Conference 25 ❖ 100 % increase in engagement ❖ 43% increase in sessions per user ❖ 3x increase in scroll depth ❖ 20% increase in ad viewability URL: https://forbes.com
Service Worker is an air traffic controller. Think of your web apps requests as planes taking off. Service Worker is the air traffic controller that routes the requests. It can load from the network or even off the cache.” Jeff Posnick - Google
service worker is a programmable proxy, a script, that your browser runs in the background. It has the ability to intercept, handle http requests and also respond to them in various ways. It responds to network requests, push notifications, connectivity changes and many more
It is a JavaScript worker & can’t access the DOM directly. ❖ It allows you to control how network requests from your page are handled. ❖ It allows you to cache all static resources which automatically reduces network requests and improve performance. ❖ It allows you to serve up a custom page when the user is offline. With this powerful ability, you can serve up lots of resources from the cache and program it to practically do whatever you want!
39 ❖ Hide the Browser UI (optional) When launched from a user’s home screen, you can hide the browser, if you like. "display": "standalone" If not: "display": "browser"
47 ❖ Code Splitting With Webpack 2 ❖ Use <link rel=”preload”> to improve initial load time. ❖ Use <link rel=”dns-prefetch”> to attempt to resolve domain names before users click on a link. Twitter saw a 36% improvement in load time with this technique. ❖ Server-side rendering
Lighthouse is an open-source tool from Google that audits a web app for PWA features. It provides a set of metrics to help guide you in building a PWA with a full application-like experience for your users. Lighthouse tests if your app: • Can load in offline or flaky network conditions • Is relatively fast • Is served from a secure origin • Uses certain accessibility best practices
- Load time - First Byte - Start Render - Speed Index - DOM Elements npm install webpagetest --save const webpagetest = require(‘WebPageTest’); Alternative: Use The API
- Load time - First Byte - Start Render - Speed Index - DOM Elements npm install webpagetest --save const webpagetest = require(‘WebPageTest’); Alternative: Use The API
The Fast 3kb alternative to React with the same ES6 API ❖ npm install -g preact-cli ❖ preact create badassapp ❖ cd badassapp ❖ npm start ❖ npm run build Out-of-the-box
unicodeveloper
masuda220
tako8ki
eatplaynap
ajstarks
nkmrh
koher
yosuke_furukawa
tamacjp
eminetto
koike91
david74chou
dunglas
dotmariusz
chrislema
speakerdeck
jonrohan
chriscoyier
bryan
cromwellryan
erikaheidi
brettharned
wjessup
paigeccino
roundedbygravity
