This talk is available on my website: https://oren.github.io
(the developer's version)
- Native-level experience.
- Performance & responsiveness.
- Single codebase.
- Multiple devices, desktop and mobile.
(the product manager version)
A way to improve the following:
- Conversion rate
- Page visits
- User time spent on app
- Quicker time to market
- Business model freedom
- App discovery
- App installation fatigue
- App loyalty
- App reach
https://cloudfour.com/thinks/the-business-case-for-progressive-web-apps/
(Takes 30% of your sales)
- Available offline/weak network using Service Worker.
- Measure peformance with the tool Lighthouse.
- Icon on home screen.
- (Android/Mozilla/IE) App-like 'loading' page, no URL, push notification and more.
https://developers.google.com/web/fundamentals/performance/prpl-pattern/
- Precache
- Render initial route
- Push server
- Lazy-load
React on steroids - 3k, similar API
https://developit.github.io/preact-perf
- Creates a single js file from all the JavaScript files.
- Enables a dev server with hot module reloading - https://webpack.github.io/docs/hot-module-replacement-with-webpack.html.
- Dynamic bundle splitting - https://webpack.js.org/guides/code-splitting-async.
- Tree-shaking capabilities - https://webpack.js.org/guides/tree-shaking
Converts ES2015 syntax to ES5 so my browser will be able to render the JavaScript. Things like import, let, require, arrow function, and also converts jsx to JavaScript.
- https://github.com/css-modules/css-modules
- https://m.alphasights.com/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b
npm i -g preact-clipreact create app
cd app
preact watch
- Precache: The service worker is configured for offline use.
- Render initial route: use a tool called prerender.
- HTTP2/Push Server:
preact servecreates a simple HTTP2 server. - Lazy-Load: Automatic code-splitting for routes and shared "chunks" are optimized for reuse. Navigating from
/aboutto/contactwill dynamically (or "lazily") load the "contact" bundle and any associated chunks. This is all thanks to webpack.
- How Twitter light was built: https://blog.twitter.com/official/en_us/topics/product/2017/introducing-twitter-lite.html
- How M.UBER was built: https://eng.uber.com/m-uber
- Financial times PWA: https://app.ft.com
- AliExpress PWA: https://m.aliexpress.com
- Preact: https://preactjs.com
- Preact-cli: https://github.com/developit/preact-cli