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...
Search
Jimmy Moon
September 20, 2016
0
68
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
98
Micro-Saas for developer who want a new
ragingwind
0
74
How to use The Fourth Language
ragingwind
0
180
Please Use The Fourth Language - WebAssembly
ragingwind
0
180
Head topics in Javascript, 2020
ragingwind
1
670
Recap Modern WebAssembly in CDS 2019
ragingwind
0
290
Today headlines in Javascript, 2019
ragingwind
0
490
Today, The Actions in Javascript
ragingwind
2
790
PWA Updates in Chrome 68
ragingwind
0
200
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Gamification - CAS2011
davidbonilla
81
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Why Our Code Smells
bkeepers
PRO
336
57k
Building Applications with DynamoDB
mza
94
6.3k
Facilitating Awesome Meetings
lara
54
6.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Scaling GitHub
holman
459
140k
Site-Speed That Sticks
csswizardry
6
510
Fireside Chat
paigeccino
37
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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