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

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