Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Progressive Web Apps with React.js from scratch at Google Devfest 2016 in Busan
Search
Jimmy Moon
September 20, 2016
0
58
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
Edge Computing for WebApp
ragingwind
0
77
Micro-Saas for developer who want a new
ragingwind
0
63
How to use The Fourth Language
ragingwind
0
170
Please Use The Fourth Language - WebAssembly
ragingwind
0
130
Head topics in Javascript, 2020
ragingwind
1
630
Recap Modern WebAssembly in CDS 2019
ragingwind
0
250
Today headlines in Javascript, 2019
ragingwind
0
450
Today, The Actions in Javascript
ragingwind
2
720
PWA Updates in Chrome 68
ragingwind
0
160
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
GitHub's CSS Performance
jonrohan
1026
450k
The Invisible Customer
myddelton
117
13k
Side Projects
sachag
451
42k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Automating Front-end Workflow
addyosmani
1362
200k
Design by the Numbers
sachag
277
18k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Producing Creativity
orderedlist
PRO
340
39k
Unsuck your backbone
ammeep
666
57k
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