Progressive Web Apps with React.js from scratch
ProgressiveWeb AppswithReact.jsfrom Scratch+JimmyMoon@ragingwindGDE for Web
View Slide
Build Mobile Webfor the next generationݽ߄ੌ ۖಬ ઁ- ୭ࢶ ఋ ۖಬ- ֏झ ࠽ܻ ਬо ݫੋ ఋ- Ӓ۞ա Ӓٜ ֎ਖ ࢚ട ই ৌঈӒېࢲ, ݽ߄ੌ ਢজ- (ৌঈೠ ݽ߄ੌ ജ҃ীࢲ) ୭ࢶ ࢶఖٮۄࢲ- ݽ߄ੌ ജ҃ী ೠ ӝמ ઁҕ- ݽ߄ੌ ജ҃ী ݏח ۄ࠳۞ܻ/ۨਖ- preact, AngularJS 2 Mobile- पઁ ݽ߄ੌ ژח ਬࢎജ҃ীࢲ పझ- Remote Debugging AndroidDevices, WebPagetest
https://github.com/GoogleChrome/lighthouseۄೞझ! Ѫ- ҳӖীࢲ ղয֬ Progressive WebApp بҳৈ۞о ӝמਸ Ѩࢎ (҅ࣘ ୶о)- HTTPS ࢎਊ ഛੋ- য়ۄੋ/ৌঈೠ ֎ਖীࢲ ز- കझܽ ୶о (A2HS) غח- झېए झܽ (Splash Screen)- ಕ ۽٘ ࢿמ- ݽ߄ੌ-۪ٜܻ ٣ੋ- Progressively Enhanced ਗ- ప݃࢝җ ࠳ۄ ࣗହ ప݃࢝ ݒLighthouseAuditing 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, enzymehttps://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-FriendlyDesignݽ߄ੌ-ब ٣ੋਸ ೞ݅ ...- ؘझب ݃ࣁਃ- Responsive Web Design- নೠ ೧࢚ب/ࣄٜীࢲ (ࢎਊ ࠛಞহ) ز೧ঠ פ
Web App ManifestAdd to Home screenрױೠ JSON ੌ ೞ݅ ...- ࢸഋ ਢজ(Installable)- জप೯ ࠁ৬ ܴ, ই ࠁ- കझܽ ١۾ (Add to Home Screen)- ੋझ ߓց ਗ- झېए झܽ- ప݃ ஸ۞
ࢿ ࢎਊ ࢸਬب- ӓ ࢎਊীѱ জਸ рױ ࢸೞب۾ӂਬ- Home Screen ী ١۾ػ জ ҃ ߑޙਯ ࢚थAdd to Home Screenby Install Banner
Splash ScreenMake it as more App likeৈ۞࠙ জਸ জо- (؊࢚) ۽٬ ֢-ച-झܽ Ӓ݅- ֎౭࠳ জҗ э ҃ ઁҕ- Chrome, Firefox and Opera supports- Safari have broken in iOS9
http://realfavicongenerator.net/
$ npm install -g pwa-manifest
Entry Point for Application- য ݽٕ ۽٬- Routes / History ١۾- CSS / ప݃ ۽٬
Application- App Shell with Service Worker- যܻா࣌ UI ஹನք
App ShellArchitecture- ֎౭࠳ জ(জۨ) җ э ࡅܲ ۽٬ਸ ࠁৈח ೠо ߑߨ- PWA ীࢲ ઁউೞח ইఃఫ- ୭ࣗೠ HTML, CSS and JavaScript۽ জ ӝࠄ ҎѺ UI ܳ ҳࢿ- Toolbars, Drawers, Navigation- ࢲ࠺झ ਕழܳ ਊ೧ࢲ ޖઑѤ நए
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 ࢎਊ оמ- য়ۄੋ ࡺ݅ ইפۄ ࠛউೠ ֎ਖ ജ҃ীࢲب ୭࢚ জ ҃ ઁҕ
HTTPSNetwork connectionis secure- ӝઓ HTTP ࢚ ೧ఊ ߂ উࢿ ࠁ৮- Service Worker/Push Notification ܳࢎਊೞৈ ࢎਊо જইೞח জਸ ٜ݅ӝ- അ ޖܐ/о ࣛܖ࣌ ࢎਊоמ- Let's Encrypt- Cloudlare- Google App Engine for Node.js- Github Pages- Localhost ח Secure Origin ਵ۽ ੋध- Webpack Dev Server ীࢲ оמ
App Shell Cachingvia Service Worker in low-friction
Dynamic Contents Cachingvia Service Worker with toolbox
Components for Contents- ஶబஎܳ ਤೠ ࠭ઁ- React.js ীࢲח ES2015 ਸ ࠙ ਗ
Routes for Application- ۄ ஹನք ١۾- Lazy Loading by Code-splitting
PerformanceGoalৈ۞࠙ জ 5 ୡ(3G) ղ߈ হݶ...- ࠗ࠙ ࢎਊח ଵ ঋणפ- RAIL ಁఢ L ಁఢী (< 1sec)- ֎ਖ/ೞ٘ਝয ࢎೱਸ ղ۰ పझ- ߑޙदীח < 5 ୡ- ߑޙद(with S/W) ীח < 2
ࡅܲ ۽٬ ೧Ѿ଼ PRLP ಁఢ- Push: ୡӝ ҳزী ਃೠ ਃ ੌਸ (ࢶ) ׳- Render: ୡӝ ചݶ(݅) ҳز- Pre-cache: ୶о ੌ நद /w ࢲ࠺झਕழ- Lazy-load: ࢎਊ ਃ য়ݶ ҙ۲ػ ੌ ׳PRLPpattern
https://twitter.com/samccone/status/771786445015035904
Kicking mega byte bundle
Code-splittingby routesۄ ӝ߈ ࣗझ ଂѐӝ- ୡӝী ਃೠ ਃ ੌ ݢ ࠁղҊ- ܲ ۄী ਃೠ ੌٜ റী ׳(Lazy-loading)
- নೠ Webpack ۞Ӓੋਵ۽ ਊਸੌ ࣻ - CommonsChunkPlugin- Entrypoint ীࢲ ҕਊਵ۽ ࢎਊغח ܳ ܻ࠙, ࢎਊоמMore pluginsfor Webpack
Tree Shaking with Webpack 2- ES2015 ীࢲ ࢎਊ,- Dead Code (Unused export) ઁѢ
monolithic bundlescode-splitting by routes
Testing- xo ܳ ਊೠ ѼҊೠ ٘- ava ܳ ਊೠ Ҋࢿמ పझ- enzyme ݽ؍ E2E Test ࢎਊ
- ъઁҊ, ѼҊೞҊ, ܻ؊࠶(readable)ೠ ٬ झఋੌਸ ъઁ- ESLint ഐജ- ܻ ࢸػ নೠ ২࣌- নೠ ইਓು- Zero-config
- פݣ, ಁझ పझ- рױೠ ޙߨ- زद प೯- ࣁೠ పझ ઑ- ة݀ػ ஶఫझ(Ӗ۽ߥ) ਗ- ES2015 / Promise / Async /Observable ਗ
- React.js ਊ- Native API ܳ औѱ ࢎਊೡ ࣻ - jQuery ੋ ו՝- shallow(Virtual DOM), mount(DOM,jsdom, browser) ҳ࠙೧ࢲ ࢎਊоמ- +render- ܲ పझ ۨਖҗ ഐജࢿ ֫EnzymeJavaScript Testing utilities for Reactfrom airbnb
ӒܻҊ
Cache-busting- ਬפೠ ੌݺਸ ࢎਊೞৈ ܻࣗझܳ ഛपೞѱ ҙܻೞח ߑߨ- ٘ ӝ߈ ܻࣗझ ܻࣗझ ҙܻ ߑߨ- ୶оੋ ܴਸ ؊ೞח ߑध- chunk.js?v=1.2.0- chunk.d9834554decb6a8j.js- ࠂੌ ۽٘ ߑ- ݆ Webpack Plugins ࢎਊоמ
UniversalRendering- ࢲߡীࢲ ࢤࢿػ ୡӝ HTML ஶబஎܳ ߄۽ ࣠- ୡӝ ۪؊݂द ୶о HTML/JS/CSS ੌFetching ਸ ઁೠ- React.js / ழޭפ౭ ৌആ ਗ- ReactDOMServer.renderToString()- React Router- isomorphic-fetch
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 onlyfunctionally viable(minimal) view inthe HTML, JS, CSS included, andmore resource arrive progressively
- JS Based Render: HTML ׳ റ ݆ ੌਸ פ. ݽٚ झ݀ ۽٘ӒܻҊ य, प೯غযঠ জ प೯ؾפServer render + Hydrate / Fastboot:ݽٚ ߄झ݀о ز оמ೧ঠ ৮߷ زפ. (uncanny valley)- Progressive Render: ࣻ زী ਃೠ ୭ࣗೠ HTML/JS/CSS ܳ ׳ೞৈزоמೞѱ ೞҊ റ ରਵ۽ ࠁъפ
Chrome DevToolsfor Service Worker- DevTools > Application tab >Service Workers- 3G throttling and CPU throttling ࢎਊ೧ࢲ ୭ೠ ࠺तೠ ജ҃ীࢲ పझܳ ӂ
Fin