Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Progressive Web Apps with React.js from scratch at Google Devfest 2016 in Busan
Jimmy Moon
September 20, 2016
0
31
Progressive Web Apps with React.js from scratch at Google Devfest 2016 in Busan
Progressive Web Apps with React.js from scratch
Jimmy Moon
September 20, 2016
Tweet
Share
More Decks by Jimmy Moon
See All by Jimmy Moon
Micro-Saas for developer who want a new
ragingwind
0
15
How to use The Fourth Language
ragingwind
0
83
Please Use The Fourth Language - WebAssembly
ragingwind
0
61
Head topics in Javascript, 2020
ragingwind
1
570
Recap Modern WebAssembly in CDS 2019
ragingwind
0
220
Today headlines in Javascript, 2019
ragingwind
0
430
Today, The Actions in Javascript
ragingwind
2
580
PWA Updates in Chrome 68
ragingwind
0
130
Learning Next.js in Minutes
ragingwind
0
69
Featured
See All Featured
How GitHub (no longer) Works
holman
297
140k
Music & Morning Musume
bryan
35
4.3k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Git: the NoSQL Database
bkeepers
PRO
415
59k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
The Invisible Customer
myddelton
110
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
15k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Design by the Numbers
sachag
271
17k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Transcript
Progressive Web Apps with React.js from Scratch +JimmyMoon @ragingwind GDE
for Web
None
None
Build Mobile Web for the next generation ݽ߄ੌ ۖಬ ઁ
- ୭ࢶ ఋ ۖಬ - ֏झ ࠽ܻ ਬо ݫੋ ఋ - Ӓ۞ա Ӓٜ ֎ਖ ࢚ട ই ৌঈ Ӓېࢲ, ݽ߄ੌ ਢজ - (ৌঈೠ ݽ߄ੌ ജ҃ীࢲ) ୭ࢶ ࢶఖ ٮۄࢲ - ݽ߄ੌ ജ҃ী ೠ ӝמ ઁҕ - ݽ߄ੌ ജ҃ী ݏח ۄ࠳۞ܻ/ۨਖ - preact, AngularJS 2 Mobile - पઁ ݽ߄ੌ ژח ਬࢎജ҃ীࢲ పझ - Remote Debugging Android Devices, WebPagetest
https://github.com/GoogleChrome/lighthouse ۄೞझ! Ѫ - ҳӖীࢲ ղয֬ Progressive Web App بҳ
ৈ۞о ӝמਸ Ѩࢎ (҅ࣘ ୶о) - HTTPS ࢎਊ ഛੋ - য়ۄੋ/ৌঈೠ ֎ਖীࢲ ز - കझܽ ୶о (A2HS) غח - झېए झܽ (Splash Screen) - ಕ ۽٘ ࢿמ - ݽ߄ੌ-۪ٜܻ ٣ੋ - Progressively Enhanced ਗ - ప݃࢝җ ࠳ۄ ࣗହ ప݃࢝ ݒ Lighthouse Auditing tools for Progressive Web App
ୡࠁ(?) ܳ ਤೠ ӝࠄੋ ... - рױೠ ҳઑ, ࠭৬ ֢ػ
ജ҃ ࢸ - ୭न ߡ ӝࣿ झఖ - Node >= 6 - React.js >= 15 - Webpack >= 2 - ES2015 stage-2 - Progressive Web App ӝࣿ ਗ - PRPL ಁఢ - Service Worker ѐߊ పझ ਗ - App Shell (React MDL җ ప݃) - Web Manifest - ୭न ѐߊ بҳٜ - ಁః ҙܻ: yarn - పझ: xo, ava, enzyme https://github.com/ ragingwind/bare-react-pwa
(ాੋ) React.js ਢজ ҳઑ - build: ࠽٘ػ ۽؋࣌ ۨ٣ߡ -
public: JS ࣗझ ੌਸ ઁ৻ೠ ੌ - scripts: ࠽٘/ѐߊী ҙ۲ػ ੌ - src: JS ࣗझ - src/components: ஹನքஎٜ ࣗझ - package.json: ಁః ੌ - yarn.lock: yarn ҙ۲ ੌ
Entry Point for Web - viewport ۽ ٣߄झী ݏѱ ۪؊݂
- Web Manifest ୶о - ই ୶о(192 / 384(512)) Pixel - കझܽ ١۾ ਗ - झېए झܽ ࢎਊ - যܻா࣌ ಪ ۽٬ - যܻா࣌ ஶపց ࢸ
Mobile-Friendly Design ݽ߄ੌ-ब ٣ੋਸ ೞ݅ ... - ؘझب ݃ࣁਃ
- Responsive Web Design - নೠ ೧࢚ب/ࣄٜীࢲ (ࢎਊ ࠛಞ হ) ز೧ঠ פ
None
None
Web App Manifest Add to Home screen рױೠ JSON ੌ
ೞ݅ ... - ࢸഋ ਢজ(Installable) - জप೯ ࠁ৬ ܴ, ই ࠁ - കझܽ ١۾ (Add to Home Screen) - ੋझ ߓց ਗ - झېए झܽ - ప݃ ஸ۞
None
ࢿ ࢎਊ ࢸਬب - ӓ ࢎਊীѱ জਸ рױ ࢸೞب۾ ӂਬ
- Home Screen ী ١۾ػ জ ҃ ߑ ޙਯ ࢚थ Add to Home Screen by Install Banner
Splash Screen Make it as more App like ৈ۞࠙ জਸ
জо - (؊࢚) ۽٬ ֢-ച-झܽ Ӓ݅ - ֎౭࠳ জҗ э ҃ ઁҕ - Chrome, Firefox and Opera supports - Safari have broken in iOS9
http://realfavicongenerator.net/
$ npm install -g pwa-manifest
None
None
None
None
Entry Point for Application - য ݽٕ ۽٬ - Routes
/ History ١۾ - CSS / ప݃ ۽٬
None
None
Application - App Shell with Service Worker - যܻா࣌ UI
ஹನք
App Shell Architecture - ֎౭࠳ জ(জۨ) җ э ࡅܲ ۽٬
ਸ ࠁৈח ೠо ߑߨ - PWA ীࢲ ઁউೞח ইఃఫ - ୭ࣗೠ HTML, CSS and JavaScript ۽ জ ӝࠄ ҎѺ UI ܳ ҳࢿ - Toolbars, Drawers, Navigation - ࢲ࠺झ ਕழܳ ਊ೧ࢲ ޖઑѤ நए
None
https://react-mdl.github.io/react-mdl/
theme.css from https://getmdl.io/customize/index.html
ServiceWoker - HTTPS ীࢲ ਗ, ࠁউࢿ ೱ࢚ - Offline-dinosaur ܳ
લӝ ਤ೧ࢲ కয լणפ - ߔӒۄ٘ ীࢲ ߹ب۽ ز - ߄ झ݀۽ ۽Ӓې߁ оמ - cache, fetch, sync ਵ۽ ֎ਖ ਃ ઁ য оמ - Push notification ࢎਊ оמ - IndexedDB ࢎਊ оמ - য়ۄੋ ࡺ݅ ইפۄ ࠛউೠ ֎ਖ ജ ҃ীࢲب ୭࢚ জ ҃ ઁҕ
None
HTTPS Network connection is secure - ӝઓ HTTP ࢚ ೧ఊ
߂ উࢿ ࠁ৮ - Service Worker/Push Notification ܳ ࢎਊೞৈ ࢎਊо જইೞח জਸ ٜ݅ӝ - അ ޖܐ/о ࣛܖ࣌ ࢎਊоמ - Let's Encrypt - Cloudlare - Google App Engine for Node.js - Github Pages - Localhost ח Secure Origin ਵ۽ ੋध - Webpack Dev Server ীࢲ оמ
None
None
None
None
App Shell Caching via Service Worker in low-friction
None
None
Dynamic Contents Caching via Service Worker with toolbox
None
Components for Contents - ஶబஎܳ ਤೠ ࠭ઁ - React.js ীࢲח
ES2015 ਸ ࠙ ਗ
None
Routes for Application - ۄ ஹನք ١۾ - Lazy Loading
by Code-splitting
None
None
None
None
None
Performance Goal ৈ۞࠙ জ 5 ୡ(3G) ղ ߈ হݶ... -
ࠗ࠙ ࢎਊח ଵ ঋणפ - RAIL ಁఢ L ಁఢী (< 1sec) - ֎ਖ/ೞ٘ਝয ࢎೱਸ ղ۰ పझ - ߑޙदীח < 5 ୡ - ߑޙद(with S/W) ীח < 2
ࡅܲ ۽٬ ೧Ѿ଼ PRLP ಁఢ - Push: ୡӝ ҳزী ਃೠ
ਃ ੌਸ ( ࢶ) ׳ - Render: ୡӝ ചݶ(݅) ҳز - Pre-cache: ୶о ੌ நद /w ࢲ࠺झਕழ - Lazy-load: ࢎਊ ਃ য়ݶ ҙ۲ػ ੌ ׳ PRLP pattern
None
None
None
https://twitter.com/samccone/status/771786445015035904
None
None
None
Kicking mega byte bundle
Code-splitting by routes ۄ ӝ߈ ࣗझ ଂѐӝ - ୡӝী ਃೠ
ਃ ੌ ݢ ࠁղҊ - ܲ ۄী ਃೠ ੌٜ റী ׳ (Lazy-loading)
None
- নೠ Webpack ۞Ӓੋਵ۽ ਊਸ ੌ ࣻ - CommonsChunkPlugin
- Entrypoint ীࢲ ҕਊਵ۽ ࢎਊغח ܳ ܻ࠙, ࢎਊоמ More plugins for Webpack
None
None
Tree Shaking with Webpack 2 - ES2015 ীࢲ ࢎਊ, -
Dead Code (Unused export) ઁѢ
None
monolithic bundles code-splitting by routes
None
Testing - xo ܳ ਊೠ ѼҊೠ ٘ - ava ܳ
ਊೠ Ҋࢿמ పझ - enzyme ݽ؍ E2E Test ࢎਊ
- ъઁҊ, ѼҊೞҊ, ܻ؊࠶(readable) ೠ ٬ झఋੌਸ ъઁ - ESLint
ഐജ - ܻ ࢸػ নೠ ২࣌ - নೠ ইਓು - Zero-config
None
- פݣ, ಁझ పझ - рױೠ ޙߨ - زद प೯
- ࣁೠ పझ ઑ - ة݀ػ ஶఫझ(Ӗ۽ߥ) ਗ - ES2015 / Promise / Async / Observable ਗ
- React.js ਊ - Native API ܳ औѱ ࢎਊೡ ࣻ
- jQuery ੋ ו՝ - shallow(Virtual DOM), mount(DOM, jsdom, browser) ҳ࠙೧ࢲ ࢎਊоמ - +render - ܲ పझ ۨਖҗ ഐജࢿ ֫ Enzyme JavaScript Testing utilities for React from airbnb
None
None
ӒܻҊ
Cache-busting - ਬפೠ ੌݺਸ ࢎਊೞৈ ܻࣗझܳ ഛ पೞѱ ҙܻೞח ߑߨ
- ٘ ӝ߈ ܻࣗझ ܻࣗझ ҙܻ ߑߨ - ୶оੋ ܴਸ ؊ೞח ߑध - chunk.js?v=1.2.0 - chunk.d9834554decb6a8j.js - ࠂੌ ۽٘ ߑ - ݆ Webpack Plugins ࢎਊоמ
None
None
Universal Rendering - ࢲߡীࢲ ࢤࢿػ ୡӝ HTML ஶబஎܳ ߄ ۽
࣠ - ୡӝ ۪؊݂द ୶о HTML/JS/CSS ੌ Fetching ਸ ઁೠ - React.js / ழޭפ౭ ৌആ ਗ - ReactDOMServer.renderToStrin g() - React Router - isomorphic-fetch
None
None
Remember: Interactivity is key - ਬפߡࢸ ۪؊݂ ߈٘द জ ޖઑѤ
TTI ࢚కо ػח Ѫਸ ೞ ঋणפ . - प೯ী ਃೠ ୭ࣗೠ HTML җ ۄ ী ਃೠ JS/CSS ܳ ࢎਊೞࣁਃ - റী ਃೠ ܻࣗझ৬ ٘ܳ ۽٘ ೧ࢲ ରਵ۽ ӝמਸ ୶о दఃࣁਃ (PRLP ಁఢ)
- JS Based Render: HTML ׳ റ ݆
ੌਸ פ. ݽٚ झ݀ ۽٘ ӒܻҊ य, प೯غযঠ জ प೯ؾפ - Server render + Hydrate / Fastboot: ݽٚ ߄झ݀о ز оמ೧ঠ ৮߷ زפ. (uncanny valley) - Progressive Render: ࣻ زী ਃ ೠ ୭ࣗೠ HTML/JS/CSS ܳ ׳ೞৈ زоמೞѱ ೞҊ റ ରਵ۽ ࠁъ פ
- JS Based Render: HTML ׳ റ ݆
ੌਸ פ. ݽٚ झ݀ ۽٘ ӒܻҊ य, प೯غযঠ জ प೯ؾפ Server render + Hydrate / Fastboot: ݽٚ ߄झ݀о ز оמ೧ঠ ৮߷ زפ. (uncanny valley) - Progressive Render: Sending only functionally viable(minimal) view in the HTML, JS, CSS included, and more resource arrive progressively
- JS Based Render: HTML ׳ റ ݆
ੌਸ פ. ݽٚ झ݀ ۽٘ ӒܻҊ य, प೯غযঠ জ प೯ؾפ Server render + Hydrate / Fastboot: ݽٚ ߄झ݀о ز оמ೧ঠ ৮߷ زפ. (uncanny valley) - Progressive Render: ࣻ زী ਃ ೠ ୭ࣗೠ HTML/JS/CSS ܳ ׳ೞৈ زоמೞѱ ೞҊ റ ରਵ۽ ࠁъ פ
Chrome DevTools for Service Worker - DevTools > Application tab
> Service Workers - 3G throttling and CPU throttling ࢎਊ ೧ࢲ ୭ೠ ࠺तೠ ജ҃ীࢲ పझܳ ӂ
Fin