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

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

687ac25540fe35fcb5e828f75c4a6079?s=47 Jimmy Moon
May 20, 2016
28

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

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

May 20, 2016
Tweet

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
  12. None
  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

  19. None
  20. Mobile-Friendly Design - ݽ߄ੌ-઺ब੸ ٣੗ੋਸ ೞ૑݅ … ؘझ௼ ఑ب ੕૑

    ݃ࣁਃ - Responsive Web Design - ׮নೠ ೧࢚ب/೗ࣄٜ ীࢲ ࢎਊ੗ ࠛಞহ ੉ ز੘೧ঠ ೤פ׮
  21. - meta “viewport” ܳ ࢎਊೞৈ ࠳ۄ਋ઉ viewport ܳ ઑ੺ೞࣁਃ

  22. None
  23. Part 2 - Page Load Performance

  24. None
  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 ୡ੉ղ জ਷ ࢎਊ ੗ ઑ੘ী ߈਽೧ঠ೤פ׮.
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. https://twitter.com/samccone/status/771786445015035904

  33. None
  34. None
  35. None
  36. None
  37. Code-splitting by routes - ೞա੄ ௾ ౵ੌਸ ۄ਋౟ ӝ߈ਵ۽ ܻ࠙

    - ׮ܲ ۄ਋౟ী ೙ਃೠ ౵ੌٜ਷ ੉റী ߹ ب۽ ۽٬оמ (Lazy-loading) - ୡӝ ۄ਋౟ ࢿמ ೱ࢚ਵ۽ ࢎਊ੗ ࢎਊо מ दр੉ খ׼ѹ૗
  38. None
  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
  42. None
  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

  47. None
  48. ServiceWoker - Offline-dinosaur ܳ લ੉ӝ ਤ೧ࢲ కয լणפ׮ - ߔӒۄ਍٘

    ীࢲ ߹ب۽ ز੘ - ੗߄ झ௼݀౟۽ ೐۽Ӓې߁ оמ - cache, fetch, sync ਵ۽ ֎౟ਖ ਃ୒ ઁ য оמ - Push notification ࢎਊ оמ - IndexedDB ࢎਊ оמ - য়೐ۄੋ ࡺ݅ ইפۄ ࠛউ੿ೠ ֎౟ਖ ജ ҃ীࢲب ୭࢚੄ জ ҃೷ ઁҕ
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  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 - ࢲ࠺झ ਕழܳ ੉ਊ೧ࢲ ޖઑѤ நए
  60. None
  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 ۽ ೐۽ં౟ ࢤࢿ
  62. None
  63. None
  64. config.json

  65. webpack.config.js

  66. Using runtime/dynamic caching with sw-toolbox

  67. None
  68. None
  69. Part 4 - Progressive Enhancement Building Progressively Becoming Apps Alex

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

    ੹࣠ - ୡӝ ۪؊݂द ୶о HTML/JS/CSS ౵ੌ Fetching ਸ ઁೠ - React.js / ழޭפ౭੄ ৌആ ૑ਗ - ReactDOMServer.renderToStrin g() - React Router - isomorphic-fetch
  72. None
  73. Pro React - https://goo.gl/EXRM3k

  74. None
  75. None
  76. None
  77. None
  78. None
  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