Progressive Web Apps with React.js from scratch at Google Devfest 2016 in Busan

687ac25540fe35fcb5e828f75c4a6079?s=47 Jimmy Moon
September 20, 2016
12

Progressive Web Apps with React.js from scratch at Google Devfest 2016 in Busan

Progressive Web Apps with React.js from scratch

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

September 20, 2016
Tweet

Transcript

  1. Progressive Web Apps with React.js from Scratch +JimmyMoon @ragingwind GDE

    for Web
  2. None
  3. None
  4. Build Mobile Web for the next generation ݽ߄ੌ ೒ۖಬ਷ ੉ઁ

    - ୭਋ࢶ ఋ௄ ೒ۖಬ - ֏झ౟ ࠽ܻ঱ ਬ੷о ݫੋ ఋ௄ - Ӓ۞ա Ӓٜ੄ ֎౟ਖ ࢚ട਷ ই઱ ৌঈ Ӓېࢲ, ݽ߄ੌ ਢজ਷ - (ৌঈೠ ݽ߄ੌ ജ҃ীࢲ) ୭ࢶ੄ ࢶఖ ٮۄࢲ - ݽ߄ੌ ജ҃ী ੸೤ೠ ӝמ ઁҕ - ݽ߄ੌ ജ҃ী ݏח ۄ੉࠳۞ܻ/೐ۨ੐ਖ - preact, AngularJS 2 Mobile - पઁ ݽ߄ੌ ژח ਬࢎജ҃ীࢲ పझ౟ - Remote Debugging Android Devices, WebPagetest
  5. https://github.com/GoogleChrome/lighthouse ۄ੉౟ೞ਋झ! ੉Ѫ਷ - ҳӖীࢲ ղয֬਷ Progressive Web App بҳ

    ৈ۞о૑ ӝמਸ Ѩࢎ (҅ࣘ ୶о઺) - HTTPS ࢎਊ ഛੋ - য়೐ۄੋ/ৌঈೠ ֎౟ਖীࢲ ز੘ - കझ௼ܽ ୶о (A2HS) غח૑ - झ೒ېए झ௼ܽ (Splash Screen) - ಕ੉૑ ۽٘ ࢿמ - ݽ߄ੌ-೐۪ٜܻ ٣੗ੋ - Progressively Enhanced ૑ਗ - ప݃࢝җ ࠳ۄ਋੷ ઱ࣗହ੄ ప݃࢝ ݒ஖ Lighthouse Auditing tools for Progressive Web App
  6. ୡࠁ੗(?) ܳ ਤೠ ӝࠄ੸ੋ ... - рױೠ ҳઑ, ࠭৬ ֢୹ػ

    ജ҃ ࢸ੿ - ୭न ߡ੹੄ ӝࣿ झఖ - 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
  7. (੹ా੸ੋ) React.js ਢজ ҳઑ - build: ࠽٘ػ ೐۽؋࣌ ۨ٣ߡ੹ -

    public: JS ࣗझ ౵ੌਸ ઁ৻ೠ ౵ੌ - scripts: ࠽٘/ѐߊী ҙ۲ػ ౵ੌ - src: JS ࣗझ - src/components: ஹನքஎٜ ࣗझ - package.json: ಁః૑ ౵ੌ - yarn.lock: yarn ҙ۲ ౵ੌ
  8. Entry Point for Web - viewport ۽ ٣߄੉झী ݏѱ ۪؊݂

    - Web Manifest ୶о - ই੉௑ ୶о(192 / 384(512)) Pixel - കझ௼ܽ ١۾ ૑ਗ - झ೒ېए झ௼ܽ ࢎਊ - য೒ܻா੉࣌ ಪ౟ ۽٬ - য೒ܻா੉࣌ ஶప੉ց ࢸ੿
  9. Mobile-Friendly Design ݽ߄ੌ-઺ब੸ ٣੗ੋਸ ೞ૑݅ ... - ؘझ௼఑ب ੕૑ ݃ࣁਃ

    - Responsive Web Design - ׮নೠ ೧࢚ب/೗ࣄٜীࢲ (ࢎਊ੗ ࠛಞ হ੉) ز੘೧ঠ ೤פ׮
  10. None
  11. None
  12. Web App Manifest Add to Home screen рױೠ JSON ౵ੌ

    ೞ૑݅ ... - ࢸ஖ഋ ਢজ(Installable) - জप೯ ੿ࠁ৬ ੉ܴ, ই੉௑ ੿ࠁ - കझ௼ܽ ١۾ (Add to Home Screen) - ੋझ఺ ߓց ૑ਗ - झ೒ېए झ௼ܽ - ప݃ ஸ۞
  13. None
  14. ୽ࢿ ࢎਊ੗੄ ࢸ஖ਬب - ੸ӓ ࢎਊ੗ীѱ জਸ рױ൤ ࢸ஖ೞب۾ ӂਬ

    - Home Screen ী ١۾ػ জ੄ ҃਋ ੤ߑ ޙਯ ࢚थ Add to Home Screen by Install Banner
  15. Splash Screen Make it as more App like ৈ۞࠙੄ জਸ

    জо஖ - (؊੉࢚) ۽٬ ઺ ֢-ച੉౟-झ௼ܽ਷ Ӓ݅ - ֎੉౭࠳ জҗ э਷ ҃೷ ઁҕ - Chrome, Firefox and Opera supports - Safari have broken in iOS9
  16. http://realfavicongenerator.net/

  17. $ npm install -g pwa-manifest

  18. None
  19. None
  20. None
  21. None
  22. Entry Point for Application - ௏য ݽٕ ۽٬ - Routes

    / History ١۾ - CSS / ప݃ ۽٬
  23. None
  24. None
  25. Application - App Shell with Service Worker - য೒ܻா੉࣌ UI

    ஹನք౟
  26. App Shell Architecture - ֎੉౭࠳ জ(জ೐ۨ੐) җ э੉ ࡅܲ ۽٬

    ਸ ࠁৈ઱ח ೠо૑ ߑߨ - PWA ীࢲ ઁউೞח ইఃఫ୊ - ୭ࣗೠ੄ HTML, CSS and JavaScript ۽ জ੄ ӝࠄ ҎѺ UI ܳ ҳࢿ - Toolbars, Drawers, Navigation - ࢲ࠺झ ਕழܳ ੉ਊ೧ࢲ ޖઑѤ நए
  27. None
  28. https://react-mdl.github.io/react-mdl/

  29. theme.css from https://getmdl.io/customize/index.html

  30. ServiceWoker - HTTPS ীࢲ ૑ਗ, ࠁউࢿ ೱ࢚ - Offline-dinosaur ܳ

    લ੉ӝ ਤ೧ࢲ కয լणפ׮ - ߔӒۄ਍٘ ীࢲ ߹ب۽ ز੘ - ੗߄ झ௼݀౟۽ ೐۽Ӓې߁ оמ - cache, fetch, sync ਵ۽ ֎౟ਖ ਃ୒ ઁ য оמ - Push notification ࢎਊ оמ - IndexedDB ࢎਊ оמ - য়೐ۄੋ ࡺ݅ ইפۄ ࠛউ੿ೠ ֎౟ਖ ജ ҃ীࢲب ୭࢚੄ জ ҃೷ ઁҕ
  31. None
  32. 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 ীࢲ оמ
  33. None
  34. None
  35. None
  36. None
  37. App Shell Caching via Service Worker in low-friction

  38. None
  39. None
  40. Dynamic Contents Caching via Service Worker with toolbox

  41. None
  42. Components for Contents - ஶబஎܳ ਤೠ ࠭ઁ੘ - React.js ীࢲח

    ES2015 ਸ ୽࠙൤ ૑ਗ
  43. None
  44. Routes for Application - ۄ਋౟ ஹನք౟ ١۾ - Lazy Loading

    by Code-splitting
  45. None
  46. None
  47. None
  48. None
  49. None
  50. Performance Goal ৈ۞࠙੄ জ੉ 5 ୡ(3G) ੉ղ੄ ߈਽੉ হ׮ݶ... -

    ؀ࠗ࠙੄ ࢎਊ੗ח ଵ૑ ঋणפ׮ - RAIL ಁఢ઺ L ಁఢী ૘઺ (< 1sec) - ֎౟ਖ/ೞ٘ਝয ࢎೱਸ ղ۰ పझ౟ - ୐ ߑޙदীח < 5 ୡ - ੤ߑޙद(with S/W) ীח < 2
  51. ࡅܲ ۽٬੄ ೧Ѿ଼ PRLP ಁఢ - Push: ୡӝ ҳزী ೙ਃೠ

    ઺ਃ ౵ੌਸ (਋ ࢶ) ੹׳ - Render: ୡӝ ചݶ(݅) ҳز - Pre-cache: ୶о ౵ੌ நद /w ࢲ࠺झਕழ - Lazy-load: ࢎਊ੗ ਃ୒੉ য়ݶ ҙ۲ػ ౵ ੌ ੹׳ PRLP pattern
  52. None
  53. None
  54. None
  55. https://twitter.com/samccone/status/771786445015035904

  56. None
  57. None
  58. None
  59. Kicking mega byte bundle

  60. Code-splitting by routes ۄ਋౟ ӝ߈ ࣗझ ଂѐӝ - ୡӝী ೙ਃೠ

    ઺ਃ ౵ੌ ݢ੷ ࠁղҊ - ׮ܲ ۄ਋౟ী ೙ਃೠ ౵ੌٜ਷ ੉റী ੹׳ (Lazy-loading)
  61. None
  62. - ׮নೠ Webpack ೒۞Ӓੋਵ۽ ਊ۝ਸ ઴ੌ ࣻ ੓׮ - CommonsChunkPlugin

    - Entrypoint ীࢲ ҕਊਵ۽ ࢎਊغח ୒௼ ܳ ܻ࠙, ࢎਊоמ More plugins for Webpack
  63. None
  64. None
  65. Tree Shaking with Webpack 2 - ES2015 ীࢲ ࢎਊ, -

    Dead Code (Unused export) ઁѢ
  66. None
  67. monolithic bundles code-splitting by routes

  68. None
  69. Testing - xo ܳ ੉ਊೠ ѼҊೠ ௏٘ - ava ܳ

    ੉ਊೠ Ҋࢿמ పझ౟ - enzyme ݽ؍ E2E Test ࢎਊ
  70. - ъઁ੸੉Ҋ, ѼҊೞҊ, ܻ؊࠶(readable) ೠ ௏٬ झఋੌਸ ъઁ - ESLint

    ഐജ - ޷ܻ ࢸ੿ػ ׮নೠ ২࣌ - ׮নೠ ইਓು - Zero-config
  71. None
  72. - ޷פݣ, ಁझ౟ పझ౟ - рױೠ ޙߨ - زद प೯

    - ࣁ޻ೠ పझ౟ ઑ੿ - ة݀ػ ஶఫझ౟(Ӗ۽ߥ) ૑ਗ - ES2015 / Promise / Async / Observable ૑ਗ
  73. - React.js ੹ਊ - Native API ܳ औѱ ࢎਊೡ ࣻ

    ੓਺ - jQuery ੸ੋ ו՝ - shallow(Virtual DOM), mount(DOM, jsdom, browser) ҳ࠙೧ࢲ ࢎਊоמ - +render - ׮ܲ పझ౟ ೐ۨ੐ਖҗ ഐജࢿ ֫਺ Enzyme JavaScript Testing utilities for React from airbnb
  74. None
  75. None
  76. ӒܻҊ

  77. Cache-busting - ਬפ௼ೠ ౵ੌݺਸ ࢎਊೞৈ ܻࣗझܳ ഛ पೞѱ ҙܻೞח ߑߨ

    - ௏٘ ӝ߈੄ ܻࣗझ੄ ܻࣗझ ҙܻ ߑߨ - ୶о੸ੋ ੉ܴਸ ؊ೞח ߑध - chunk.js?v=1.2.0 - chunk.d9834554decb6a8j.js - ઺ࠂ౵ੌ ׮਍۽٘ ߑ૑ - ݆਷ Webpack Plugins ࢎਊоמ
  78. None
  79. None
  80. Universal Rendering - ࢲߡীࢲ ࢤࢿػ ୡӝ HTML ஶబஎܳ ߄ ۽

    ੹࣠ - ୡӝ ۪؊݂द ୶о HTML/JS/CSS ౵ੌ Fetching ਸ ઁೠ - React.js / ழޭפ౭੄ ৌആ ૑ਗ - ReactDOMServer.renderToStrin g() - React Router - isomorphic-fetch
  81. None
  82. None
  83. Remember: Interactivity is key - ਬפߡࢸ ۪؊݂੉ ߈٘द জ੉ ޖઑѤ

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

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

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

    > Service Workers - 3G throttling and CPU throttling ࢎਊ ೧ࢲ ୭؀ೠ ࠺तೠ ജ҃ীࢲ పझ౟ܳ ӂ ੢
  88. Fin