Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps with React.js in a nutshel...

Jimmy Moon
May 20, 2016
53

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

Jimmy Moon

May 20, 2016
Tweet

Transcript

  1. https://medium.com/@addyosmani - Part 1 - Introduction - Part 2 -

    Page Load Performance - Part 3 - Offline support and network resilience - Part 4 - Progressive Enhancement
  2. ȍȇȇ 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 ࢎਊ
  3. - ୡࠁ੗੄ ѐ֛ ੟ӝਊ - React.js ୭न ߡ੹ - Webpack

    2 - Code-spliting - Tree-shaking - Commonchunk - and More - PRPL ಁఢ ੸ਊ - Service Worker పझ౟ ૑ਗ - ݒఠܻ঴ ٣੗ੋ with React MDL - рױೠ ҳઑ৬ ࠭ https://github.com/ ragingwind/bare-react-pwa
  4. https://github.com/GoogleChrome/lighthouse - ֎౟ਖ োѾ੄ উ੹ - Add to Home screen

    ࢎਊ оמ ৈࠗ - Custom splash screen ࢎਊ оמ ৈࠗ - য়೐ۄੋ੉ա ৌঈೠ ֎౟ਖ ജ҃ী ز੘ оמ ৈࠗ - ಕ੉૑ ۽٘ ࢿמ਷ যځೠ૑ - ݽ߄ੌ-೐۪ٜܻ ٣੗ੋਸ ࢎਊ೮ח૑ - Progressively enhanced ܳ ૑ਗೞח জ ੋ૑ - ઱ࣗହ ࢝җ ੜ ݒ஖ غח૑ Lighthouse Auditing tools for Progressive Web App
  5. Ready for Mobile Platform - ੉ઁח ݽ߄ੌ ೒ۖಬ੉ ୭਋ࢶ ఋ௄

    ೒ۖ ಬ - ݽ߄ੌ ജ҃ী ੸೤ೠ JS Libraries/ Frameworks ࢎਊೞ੗ - preact - AngularJS 2 Mobile - पઁ ݽ߄ੌജ҃੉ա ਬࢎജ҃ীࢲ పझ ౟ೞ੗ - Remote Debugging Android Devices - WebPagetest
  6. HTTPS Network connection is secure - ӝઓ HTTP ࢚੄ ೧ఊ

    ߂ উ੹ࢿ ࠁ৮ - Service Worker/Push Notification ܳ ࢎਊೞৈ ࢎਊ੗о જইೞח জਸ ٜ݅ӝ ਤ೧ࢲ - അ੤ ޖܐ/੷о੄ ࣛܖ࣌ ࢎਊоמ - Let's Encrypt - Cloudlare - Google App Engine for Node.js - Github Pages
  7. Web App Manifest Add to Home screen - рױೠ JSON

    ౵ੌ - ࢸ஖ оמೠ (Installable) ਢজਸ ਤೠ ࢸ ੿ٜ, ੉ܴ, ই੉௑١ - Install Banner/Add to Home Screen - Splash Screen - Theme Color
  8. Install Banners - ੗઱ ࢎਊೞח ࢎਊ੗ীѱ জਸ рױ൤ ࢸ ஖ೞب۾

    ӂਬ - Home Screen ী ١۾ػ জ੄ ҃਋ ੤ߑ ޙਯ ब൤ ೱ࢚оמ
  9. Splash Screen - ؊੉࢚ ۽٬઺ ֢-ച੉౟-झ௼ܽ਷ Ӓ݅ - ֎੉౭࠳ জҗ

    э਷ ҃೷ ઁҕ - Chrome, Firefox and Opera supports - Safari have broken in iOS9
  10. Mobile-Friendly Design - ݽ߄ੌ-઺ब੸ ٣੗ੋਸ ೞ૑݅ … ؘझ௼ ఑ب ੕૑

    ݃ࣁਃ - Responsive Web Design - ׮নೠ ೧࢚ب/೗ࣄٜ ীࢲ ࢎਊ੗ ࠛಞহ ੉ ز੘೧ঠ ೤פ׮
  11. 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 ୡ੉ղ জ਷ ࢎਊ ੗ ઑ੘ী ߈਽೧ঠ೤פ׮.
  12. Code-splitting by routes - ೞա੄ ௾ ౵ੌਸ ۄ਋౟ ӝ߈ਵ۽ ܻ࠙

    - ׮ܲ ۄ਋౟ী ೙ਃೠ ౵ੌٜ਷ ੉റী ߹ ب۽ ۽٬оמ (Lazy-loading) - ୡӝ ۄ਋౟ ࢿמ ೱ࢚ਵ۽ ࢎਊ੗ ࢎਊо מ दр੉ খ׼ѹ૗
  13. - ׮নೠ Webpack ೒۞Ӓੋਵ۽ ਊ۝ਸ ઴ੌ ࣻ ੓׮ - CommonsChunkPlugin,

    п Entrypoint ীࢲ ҕਊਵ۽ ࢎਊغח ୒௼ ܳ ܻ࠙, ࢎਊоמ - Tree Shaking, ؘ٘௏٘ ઁѢ۽ ୒௼ ਊ ۝ ׮੉য౟ оמ (but Webpack 2) More plugins for Webpack
  14. 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()
  15. Cache-busting - ਬפ௼ೠ ౵ੌݺਸ ࢎਊೞৈ ܻࣗझܳ ഛ पೞѱ ҙܻೞח ߑߨ

    - ௏٘ ӝ߈੄ ܻࣗझ੄ ܻࣗझ ҙܻ ߑߨ - ୶о੸ੋ ੉ܴਸ ؊ೞח ߑध - chunk.js?v=1.2.0 - chunk.d9834554decb6a8j.js - ઺ࠂ౵ੌ ׮਍۽٘ ߑ૑ - ݆਷ Webpack Plugins ࢎਊоמ
  16. ServiceWoker - Offline-dinosaur ܳ લ੉ӝ ਤ೧ࢲ కয լणפ׮ - ߔӒۄ਍٘

    ীࢲ ߹ب۽ ز੘ - ੗߄ झ௼݀౟۽ ೐۽Ӓې߁ оמ - cache, fetch, sync ਵ۽ ֎౟ਖ ਃ୒ ઁ য оמ - Push notification ࢎਊ оמ - IndexedDB ࢎਊ оמ - য়೐ۄੋ ࡺ݅ ইפۄ ࠛউ੿ೠ ֎౟ਖ ജ ҃ীࢲب ୭࢚੄ জ ҃೷ ઁҕ
  17. Chrome DevTools for Service Worker - DevTools > Application tab

    > Service Workers - 3G throttling and CPU throttling ࢎਊ ೧ࢲ ୭؀ೠ ࠺तೠ ജ҃ীࢲ పझ౟ܳ ӂ ੢
  18. App Shell Architecture - ֎੉౭࠳ জ(জ೐ۨ੐) җ э੉ ࡅܲ ۽٬

    ਸ ࠁৈ઱ח ೠо૑ ߑߨ - PWA ীࢲ ઁউೞח ইఃఫ୊ - ୭Ҋೠ੄ HTML, CSS and JavaScript ۽ জ੄ ӝࠄ ҎѺ UI ܳ ҳࢿ - Toolbars, Drawers, Navigation - ࢲ࠺झ ਕழܳ ੉ਊ೧ࢲ ޖઑѤ நए
  19. 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 ۽ ೐۽ં౟ ࢤࢿ
  20. Part 4 - Progressive Enhancement Building Progressively Becoming Apps Alex

    Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
  21. Universal Rendering - ࢲߡীࢲ ࢤࢿػ ୡӝ HTML ஶబஎܳ ߄ ۽

    ੹࣠ - ୡӝ ۪؊݂द ୶о HTML/JS/CSS ౵ੌ Fetching ਸ ઁೠ - React.js / ழޭפ౭੄ ৌആ ૑ਗ - ReactDOMServer.renderToStrin g() - React Router - isomorphic-fetch
  22. Guarding against globals - ࢲߡ੄ Node.js ജ҃ীࢲ ز੘ೡ ҃਋ `document`

    ژח `window` ё୓ܳ ഛ ੋೡ ೙ਃо ੓णפ׮. - ReactDOM but 3rd party ஹನք౟ ࢎ ਊ૑ ૑ਗৈࠗ ഛੋ - Webpack ߣٜ݂द੉ `browser` ః (package.json) ܳ ੉ਊೞৈ JS ౵ੌਸ ܻ࠙೧ࢲ ࢎਊоמ
  23. Remember: Interactivity is key - ਬפߡࢸ ۪؊݂੉ ߈٘द জ੉ ޖઑѤ

    TTI ࢚కо ػ׮ח Ѫਸ ੄޷ೞ૑ ঋणפ ׮. - प೯ী ೙ਃೠ ୭ࣗೠ੄ HTML җ ۄ਋౴ ী ೙ਃೠ JS/CSS ܳ ࢎਊೞࣁਃ - ੉റী ೙ਃೠ ܻࣗझ৬ ௏٘ܳ ׮਍۽٘ ೧ࢲ ੼ର੸ਵ۽ ӝמਸ ୶о दఃࣁਃ (PRLP ಁఢ)
  24. - JS Based Render: HTML ੉ ੹׳ റ ݆ ਷

    ੌਸ ೤פ׮. ݽٚ झ௼݀౟ ׮਍۽٘ ӒܻҊ ౵य, प೯غযঠ জ੉ प೯ؾפ׮ - Server render + Hydrate / Fastboot: ݽٚ ੗߄झ௼݀౟о ز੘ оמ೧ঠ ৮߷ ൤ ز੘೤פ׮. (uncanny valley) - Progressive Render: ೙ࣻ ز੘ী ೙ਃ ೠ ୭ࣗೠ੄ HTML/JS/CSS ܳ ੹׳ೞৈ ز੘оמೞѱ ೞҊ ੉റ ੼ର੸ਵ۽ ࠁъ ೤פ׮
  25. - 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
  26. - JS Based Render: HTML ੉ ੹׳ റ ݆ ਷

    ੌਸ ೤פ׮. ݽٚ झ௼݀౟ ׮਍۽٘ ӒܻҊ ౵य, प೯غযঠ জ੉ प೯ؾפ׮ Server render + Hydrate / Fastboot: ݽٚ ੗߄झ௼݀౟о ز੘ оמ೧ঠ ৮߷ ൤ ز੘೤פ׮. (uncanny valley) - Progressive Render: ೙ࣻ ز੘ী ೙ਃ ೠ ୭ࣗೠ੄ HTML/JS/CSS ܳ ੹׳ೞৈ ز੘оמೞѱ ೞҊ ੉റ ੼ର੸ਵ۽ ࠁъ ೤פ׮
  27. Testing Progressive Enhancement - ୭Ӕ ٣ߡӦ ో਷ ੗߄झ௼݀౟о হח ҃

    ਋, ֎౟ਖ ജ҃੉ જ૑ ঋ਷ ҃਋ܳ दޯ ۨ੉౟ оמ೤פ׮.
  28. Fin