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

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

Jimmy Moon
September 20, 2016
37

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

Progressive Web Apps with React.js from scratch

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