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
56

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. Build Mobile Web for the next generation ݽ߄ੌ ೒ۖಬ਷ ੉ઁ

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

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

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

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

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

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

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

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

    জо஖ - (؊੉࢚) ۽٬ ઺ ֢-ച੉౟-झ௼ܽ਷ Ӓ݅ - ֎੉౭࠳ জҗ э਷ ҃೷ ઁҕ - Chrome, Firefox and Opera supports - Safari have broken in iOS9
  10. App Shell Architecture - ֎੉౭࠳ জ(জ೐ۨ੐) җ э੉ ࡅܲ ۽٬

    ਸ ࠁৈ઱ח ೠо૑ ߑߨ - PWA ীࢲ ઁউೞח ইఃఫ୊ - ୭ࣗೠ੄ HTML, CSS and JavaScript ۽ জ੄ ӝࠄ ҎѺ UI ܳ ҳࢿ - Toolbars, Drawers, Navigation - ࢲ࠺झ ਕழܳ ੉ਊ೧ࢲ ޖઑѤ நए
  11. ServiceWoker - HTTPS ীࢲ ૑ਗ, ࠁউࢿ ೱ࢚ - Offline-dinosaur ܳ

    લ੉ӝ ਤ೧ࢲ కয լणפ׮ - ߔӒۄ਍٘ ীࢲ ߹ب۽ ز੘ - ੗߄ झ௼݀౟۽ ೐۽Ӓې߁ оמ - cache, fetch, sync ਵ۽ ֎౟ਖ ਃ୒ ઁ য оמ - Push notification ࢎਊ оמ - IndexedDB ࢎਊ оמ - য়೐ۄੋ ࡺ݅ ইפۄ ࠛউ੿ೠ ֎౟ਖ ജ ҃ীࢲب ୭࢚੄ জ ҃೷ ઁҕ
  12. 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 ীࢲ оמ
  13. Performance Goal ৈ۞࠙੄ জ੉ 5 ୡ(3G) ੉ղ੄ ߈਽੉ হ׮ݶ... -

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

    ઺ਃ ౵ੌਸ (਋ ࢶ) ੹׳ - Render: ୡӝ ചݶ(݅) ҳز - Pre-cache: ୶о ౵ੌ நद /w ࢲ࠺झਕழ - Lazy-load: ࢎਊ੗ ਃ୒੉ য়ݶ ҙ۲ػ ౵ ੌ ੹׳ PRLP pattern
  15. Code-splitting by routes ۄ਋౟ ӝ߈ ࣗझ ଂѐӝ - ୡӝী ೙ਃೠ

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

    - Entrypoint ীࢲ ҕਊਵ۽ ࢎਊغח ୒௼ ܳ ܻ࠙, ࢎਊоמ More plugins for Webpack
  17. Testing - xo ܳ ੉ਊೠ ѼҊೠ ௏٘ - ava ܳ

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

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

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

    ੓਺ - jQuery ੸ੋ ו՝ - shallow(Virtual DOM), mount(DOM, jsdom, browser) ҳ࠙೧ࢲ ࢎਊоמ - +render - ׮ܲ పझ౟ ೐ۨ੐ਖҗ ഐജࢿ ֫਺ Enzyme JavaScript Testing utilities for React from airbnb
  21. Cache-busting - ਬפ௼ೠ ౵ੌݺਸ ࢎਊೞৈ ܻࣗझܳ ഛ पೞѱ ҙܻೞח ߑߨ

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

    ੹࣠ - ୡӝ ۪؊݂द ୶о HTML/JS/CSS ౵ੌ Fetching ਸ ઁೠ - React.js / ழޭפ౭੄ ৌആ ૑ਗ - ReactDOMServer.renderToStrin g() - React Router - isomorphic-fetch
  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. Chrome DevTools for Service Worker - DevTools > Application tab

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