Progressive Web Apps with React.js in a nutshell at Google I/O devfest 2016

Progressive Web Apps with React.js in a nutshell at Google I/O devfest 2016

Transcript

1. Progressive Web Apps with React.js in a Nutshell
2. Progressive Web Apps with React.js in a Nutshell https://medium.com/@addyosmani
3. https://medium.com/@addyosmani - Part 1 - Introduction - Part 2 - Page Load Performance - Part 3 - Offline support and network resilience - Part 4 - Progressive Enhancement
4. Github / NPM +JimmyMoon @ragingwind Google Developer Expert
5. Part 1 - Introduction for Progressive Web Apps
6. https://react-hn.appspot.com
7. ȍȇȇ app.yaml ȍȇȇ dist ȍȇȇ hn-server-fetch.js: unofficial hn APIs ȍȇȇ nwb.config.js: nwb config ȍȇȇ package.json ȍȇȇ public Ȉ ȍȇȇ index-static.html Ȉ ȍȇȇ manifest.json Ȉ ȍȇȇ runtime-caching.js Ȉ Ȍȇȇ service-worker.js ȍȇȇ server.js ȍȇȇ src Ȉ ȍȇȇ App.js: App and Components Ȉ ȍȇȇ Comment.js Ȉ ȍȇȇ Item.js Ȉ ȍȇȇ NotFound.js Ȉ ȍȇȇ PermalinkedComment.js Ȉ ȍȇȇ Settings.js Ȉ ȍȇȇ Updates.js Ȉ ȍȇȇ UserProfile.js Ȉ ȍȇȇ index.js Ȉ ȍȇȇ routes.js Ȉ ȍȇȇ services: fetch APIs Ȉ ȍȇȇ stores: cache, store data Ȉ ȍȇȇ utils Ȉ Ȍȇȇ views: template Ȍȇȇ sw-precache-config.json - React.js ੄ ӝࠄ੸ੋ ࣗझ ౟ܻ - nwb ਸ ࢎਊೞৈ ೐۽ં౟ ࢤࢿ/ҙܻ - editing nwb.config.js - HackerHN Firebase APIs ࢎਊ
8. - ୡࠁ੗੄ ѐ֛ ੟ӝਊ - React.js ୭न ߡ੹ - Webpack 2 - Code-spliting - Tree-shaking - Commonchunk - and More - PRPL ಁఢ ੸ਊ - Service Worker పझ౟ ૑ਗ - ݒఠܻ঴ ٣੗ੋ with React MDL - рױೠ ҳઑ৬ ࠭ https://github.com/ ragingwind/bare-react-pwa
9. https://github.com/GoogleChrome/lighthouse - ֎౟ਖ োѾ੄ উ੹ - Add to Home screen ࢎਊ оמ ৈࠗ - Custom splash screen ࢎਊ оמ ৈࠗ - য়೐ۄੋ੉ա ৌঈೠ ֎౟ਖ ജ҃ী ز੘ оמ ৈࠗ - ಕ੉૑ ۽٘ ࢿמ਷ যځೠ૑ - ݽ߄ੌ-೐۪ٜܻ ٣੗ੋਸ ࢎਊ೮ח૑ - Progressively enhanced ܳ ૑ਗೞח জ ੋ૑ - ઱ࣗହ ࢝җ ੜ ݒ஖ غח૑ Lighthouse Auditing tools for Progressive Web App
10. Ready for Mobile Platform - ੉ઁח ݽ߄ੌ ೒ۖಬ੉ ୭਋ࢶ ఋ௄ ೒ۖ ಬ - ݽ߄ੌ ജ҃ী ੸೤ೠ JS Libraries/ Frameworks ࢎਊೞ੗ - preact - AngularJS 2 Mobile - पઁ ݽ߄ੌജ҃੉ա ਬࢎജ҃ীࢲ పझ ౟ೞ੗ - Remote Debugging Android Devices - WebPagetest
11. HTTPS Network connection is secure - ӝઓ HTTP ࢚੄ ೧ఊ ߂ উ੹ࢿ ࠁ৮ - Service Worker/Push Notification ܳ ࢎਊೞৈ ࢎਊ੗о જইೞח জਸ ٜ݅ӝ ਤ೧ࢲ - അ੤ ޖܐ/੷о੄ ࣛܖ࣌ ࢎਊоמ - Let's Encrypt - Cloudlare - Google App Engine for Node.js - Github Pages
13. Web App Manifest Add to Home screen - рױೠ JSON ౵ੌ - ࢸ஖ оמೠ (Installable) ਢজਸ ਤೠ ࢸ ੿ٜ, ੉ܴ, ই੉௑١ - Install Banner/Add to Home Screen - Splash Screen - Theme Color
14. Install Banners - ੗઱ ࢎਊೞח ࢎਊ੗ীѱ জਸ рױ൤ ࢸ ஖ೞب۾ ӂਬ - Home Screen ী ١۾ػ জ੄ ҃਋ ੤ߑ ޙਯ ब൤ ೱ࢚оמ
15. Splash Screen - ؊੉࢚ ۽٬઺ ֢-ച੉౟-झ௼ܽ਷ Ӓ݅ - ֎੉౭࠳ জҗ э਷ ҃೷ ઁҕ - Chrome, Firefox and Opera supports - Safari have broken in iOS9
16. http://realfavicongenerator.net/
17. http://app-manifest.firebaseapp.com/
18. $ npm install -g pwa-manifest
20. Mobile-Friendly Design - ݽ߄ੌ-઺ब੸ ٣੗ੋਸ ೞ૑݅ … ؘझ௼ ఑ب ੕૑ ݃ࣁਃ - Responsive Web Design - ׮নೠ ೧࢚ب/೗ࣄٜ ীࢲ ࢎਊ੗ ࠛಞহ ੉ ز੘೧ঠ ೤פ׮
21. - meta “viewport” ܳ ࢎਊೞৈ ࠳ۄ਋ઉ viewport ܳ ઑ੺ೞࣁਃ
23. Part 2 - Page Load Performance
25. Performance Goal - RAIL ಁఢ઺ L(Loading under 1sec) ী ૘઺ೞࣁਃ - ֎౟ਖ ઑѤਸ ղܻҊ ੷ࢎೱ ೞ٘ਝযী ࢲب ୽࠙൤ ੜ ز੘೧ঠ೤פ׮. - ୐ ߑޙदীח 5 ୡ ੉ղ(Speed Index of 3,000 or less) - ੤ߑޙद(with S/W, Speed Index of 1,000 or less)ীח 2 ୡ੉ղ জ਷ ࢎਊ ੗ ઑ੘ী ߈਽೧ঠ೤פ׮.
32. https://twitter.com/samccone/status/771786445015035904
37. Code-splitting by routes - ೞա੄ ௾ ౵ੌਸ ۄ਋౟ ӝ߈ਵ۽ ܻ࠙ - ׮ܲ ۄ਋౟ী ೙ਃೠ ౵ੌٜ਷ ੉റী ߹ ب۽ ۽٬оמ (Lazy-loading) - ୡӝ ۄ਋౟ ࢿמ ೱ࢚ਵ۽ ࢎਊ੗ ࢎਊо מ दр੉ খ׼ѹ૗
39. monolithic bundles code-splitting by routes
40. - ׮নೠ Webpack ೒۞Ӓੋਵ۽ ਊ۝ਸ ઴ੌ ࣻ ੓׮ - CommonsChunkPlugin, п Entrypoint ীࢲ ҕਊਵ۽ ࢎਊغח ୒௼ ܳ ܻ࠙, ࢎਊоמ - Tree Shaking, ؘ٘௏٘ ઁѢ۽ ୒௼ ਊ ۝ ׮੉য౟ оמ (but Webpack 2) More plugins for Webpack
41. Preload - ࢶ঱݅ਵ۽ ܻࣗझ ಁ஖ оמ (प೯হ੉) - ૑Әө૑ח only in Chrome
43. Implementing PRPL - Push - HTTP/2 + Server Push - Preload / Defer load - AggressiveSplittingPlugin - Rendering - ࢎਊೞח JS ೐ۨ੐ਕ௼ܳ ୭؀ೠ ഝਊೞࣁਃ - Pre-caching: - sw-precache - SWPrecacheWebpackPlugin - Lazy-load - require.ensure() or System.import()
44. Cache-busting - ਬפ௼ೠ ౵ੌݺਸ ࢎਊೞৈ ܻࣗझܳ ഛ पೞѱ ҙܻೞח ߑߨ - ௏٘ ӝ߈੄ ܻࣗझ੄ ܻࣗझ ҙܻ ߑߨ - ୶о੸ੋ ੉ܴਸ ؊ೞח ߑध - chunk.js?v=1.2.0 - chunk.d9834554decb6a8j.js - ઺ࠂ౵ੌ ׮਍۽٘ ߑ૑ - ݆਷ Webpack Plugins ࢎਊоמ
45. Webpack 2 Tree Shaking - ES2015 ীࢲ ࢎਊ, - Dead Code (Unused export) ઁѢ
46. Part 3 - Offline support and network resilience
48. ServiceWoker - Offline-dinosaur ܳ લ੉ӝ ਤ೧ࢲ కয լणפ׮ - ߔӒۄ਍٘ ীࢲ ߹ب۽ ز੘ - ੗߄ झ௼݀౟۽ ೐۽Ӓې߁ оמ - cache, fetch, sync ਵ۽ ֎౟ਖ ਃ୒ ઁ য оמ - Push notification ࢎਊ оמ - IndexedDB ࢎਊ оמ - য়೐ۄੋ ࡺ݅ ইפۄ ࠛউ੿ೠ ֎౟ਖ ജ ҃ীࢲب ୭࢚੄ জ ҃೷ ઁҕ
58. Chrome DevTools for Service Worker - DevTools > Application tab > Service Workers - 3G throttling and CPU throttling ࢎਊ ೧ࢲ ୭؀ೠ ࠺तೠ ജ҃ীࢲ పझ౟ܳ ӂ ੢
59. App Shell Architecture - ֎੉౭࠳ জ(জ೐ۨ੐) җ э੉ ࡅܲ ۽٬ ਸ ࠁৈ઱ח ೠо૑ ߑߨ - PWA ীࢲ ઁউೞח ইఃఫ୊ - ୭Ҋೠ੄ HTML, CSS and JavaScript ۽ জ੄ ӝࠄ ҎѺ UI ܳ ҳࢿ - Toolbars, Drawers, Navigation - ࢲ࠺झ ਕழܳ ੉ਊ೧ࢲ ޖઑѤ நए
61. App Shell Caching via Service Worker in low-friction - vanilla.js ਸ ࢎਊೞӝ - sw-precache / sw-toolbox ࢎਊೞӝ - Webpack ೒۞Ӓੋ ࢎਊೞӝ - offline-plugin - sw-precache-webpack-plugin - create-react-pwa ۽ ೐۽ં౟ ࢤࢿ
64. config.json
65. webpack.config.js
66. Using runtime/dynamic caching with sw-toolbox
69. Part 4 - Progressive Enhancement Building Progressively Becoming Apps Alex Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
71. Universal Rendering - ࢲߡীࢲ ࢤࢿػ ୡӝ HTML ஶబஎܳ ߄ ۽ ੹࣠ - ୡӝ ۪؊݂द ୶о HTML/JS/CSS ౵ੌ Fetching ਸ ઁೠ - React.js / ழޭפ౭੄ ৌആ ૑ਗ - ReactDOMServer.renderToStrin g() - React Router - isomorphic-fetch
73. Pro React - https://goo.gl/EXRM3k
79. Guarding against globals - ࢲߡ੄ Node.js ജ҃ীࢲ ز੘ೡ ҃਋ `document` ژח `window` ё୓ܳ ഛ ੋೡ ೙ਃо ੓णפ׮. - ReactDOM but 3rd party ஹನք౟ ࢎ ਊ૑ ૑ਗৈࠗ ഛੋ - Webpack ߣٜ݂द੉ `browser` ః (package.json) ܳ ੉ਊೞৈ JS ౵ੌਸ ܻ࠙೧ࢲ ࢎਊоמ
80. Remember: Interactivity is key - ਬפߡࢸ ۪؊݂੉ ߈٘द জ੉ ޖઑѤ TTI ࢚కо ػ׮ח Ѫਸ ੄޷ೞ૑ ঋणפ ׮. - प೯ী ೙ਃೠ ୭ࣗೠ੄ HTML җ ۄ਋౴ ী ೙ਃೠ JS/CSS ܳ ࢎਊೞࣁਃ - ੉റী ೙ਃೠ ܻࣗझ৬ ௏٘ܳ ׮਍۽٘ ೧ࢲ ੼ର੸ਵ۽ ӝמਸ ୶о दఃࣁਃ (PRLP ಁఢ)
81. - JS Based Render: HTML ੉ ੹׳ റ ݆ ਷ ੌਸ ೤פ׮. ݽٚ झ௼݀౟ ׮਍۽٘ ӒܻҊ ౵य, प೯غযঠ জ੉ प೯ؾפ׮ - Server render + Hydrate / Fastboot: ݽٚ ੗߄झ௼݀౟о ز੘ оמ೧ঠ ৮߷ ൤ ز੘೤פ׮. (uncanny valley) - Progressive Render: ೙ࣻ ز੘ী ೙ਃ ೠ ୭ࣗೠ੄ HTML/JS/CSS ܳ ੹׳ೞৈ ز੘оמೞѱ ೞҊ ੉റ ੼ର੸ਵ۽ ࠁъ ೤פ׮
82. - 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
83. - JS Based Render: HTML ੉ ੹׳ റ ݆ ਷ ੌਸ ೤פ׮. ݽٚ झ௼݀౟ ׮਍۽٘ ӒܻҊ ౵य, प೯غযঠ জ੉ प೯ؾפ׮ Server render + Hydrate / Fastboot: ݽٚ ੗߄झ௼݀౟о ز੘ оמ೧ঠ ৮߷ ൤ ز੘೤פ׮. (uncanny valley) - Progressive Render: ೙ࣻ ز੘ী ೙ਃ ೠ ୭ࣗೠ੄ HTML/JS/CSS ܳ ੹׳ೞৈ ز੘оמೞѱ ೞҊ ੉റ ੼ର੸ਵ۽ ࠁъ ೤פ׮
84. Testing Progressive Enhancement - ୭Ӕ ٣ߡӦ ో਷ ੗߄झ௼݀౟о হח ҃ ਋, ֎౟ਖ ജ҃੉ જ૑ ঋ਷ ҃਋ܳ दޯ ۨ੉౟ оמ೤פ׮.
85. http://slack.gdg.kr/ /join #pwa
86. Fin