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

Progressive Web Apps with React.js from scratch

Transcript

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

   View Slide

2. View Slide

3. View Slide

4. Build Mobile Web
   for the next generation
   ݽ߄ੌ ೒ۖಬ਷ ੉ઁ
   - ୭਋ࢶ ఋ௄ ೒ۖಬ
   - ֏झ౟ ࠽ܻ঱ ਬ੷о ݫੋ ఋ௄
   - Ӓ۞ա Ӓٜ੄ ֎౟ਖ ࢚ട਷ ই઱ ৌঈ
   Ӓېࢲ, ݽ߄ੌ ਢজ਷
   - (ৌঈೠ ݽ߄ੌ ജ҃ীࢲ) ୭ࢶ੄ ࢶఖ
   ٮۄࢲ
   - ݽ߄ੌ ജ҃ী ੸೤ೠ ӝמ ઁҕ
   - ݽ߄ੌ ജ҃ী ݏח ۄ੉࠳۞ܻ/೐ۨ੐ਖ
   - preact, AngularJS 2 Mobile
   - पઁ ݽ߄ੌ ژח ਬࢎജ҃ীࢲ పझ౟
   - Remote Debugging Android
   Devices, WebPagetest
   

   View Slide

5. https://github.com/GoogleChrome/lighthouse
   ۄ੉౟ೞ਋झ! ੉Ѫ਷
   - ҳӖীࢲ ղয֬਷ Progressive Web
   App بҳ
   ৈ۞о૑ ӝמਸ Ѩࢎ (҅ࣘ ୶о઺)
   - HTTPS ࢎਊ ഛੋ
   - য়೐ۄੋ/ৌঈೠ ֎౟ਖীࢲ ز੘
   - കझ௼ܽ ୶о (A2HS) غח૑
   - झ೒ېए झ௼ܽ (Splash Screen)
   - ಕ੉૑ ۽٘ ࢿמ
   - ݽ߄ੌ-೐۪ٜܻ ٣੗ੋ
   - Progressively Enhanced ૑ਗ
   - ప݃࢝җ ࠳ۄ਋੷ ઱ࣗହ੄ ప݃࢝ ݒ஖
   Lighthouse
   Auditing tools for Progressive Web App
   

   View Slide

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
   

   View Slide

7. (੹ా੸ੋ) React.js ਢজ ҳઑ
   - build: ࠽٘ػ ೐۽؋࣌ ۨ٣ߡ੹
   - public: JS ࣗझ ౵ੌਸ ઁ৻ೠ ౵ੌ
   - scripts: ࠽٘/ѐߊী ҙ۲ػ ౵ੌ
   - src: JS ࣗझ
   - src/components: ஹನքஎٜ ࣗझ
   - package.json: ಁః૑ ౵ੌ
   - yarn.lock: yarn ҙ۲ ౵ੌ
   

   View Slide

8. Entry Point for Web
   - viewport ۽ ٣߄੉झী ݏѱ ۪؊݂
   - Web Manifest ୶о
   - ই੉௑ ୶о(192 / 384(512)) Pixel
   - കझ௼ܽ ١۾ ૑ਗ
   - झ೒ېए झ௼ܽ ࢎਊ
   - য೒ܻா੉࣌ ಪ౟ ۽٬
   - য೒ܻா੉࣌ ஶప੉ց ࢸ੿
   

   View Slide

9. Mobile-Friendly
   Design
   ݽ߄ੌ-઺ब੸ ٣੗ੋਸ ೞ૑݅ ...
   - ؘझ௼఑ب ੕૑ ݃ࣁਃ
   - Responsive Web Design
   - ׮নೠ ೧࢚ب/೗ࣄٜীࢲ (ࢎਊ੗ ࠛಞ
   হ੉) ز੘೧ঠ ೤פ׮
   

   View Slide

10. View Slide

11. View Slide

12. Web App Manifest
    Add to Home screen
    рױೠ JSON ౵ੌ ೞ૑݅ ...
    - ࢸ஖ഋ ਢজ(Installable)
    - জप೯ ੿ࠁ৬ ੉ܴ, ই੉௑ ੿ࠁ
    - കझ௼ܽ ١۾ (Add to Home Screen)
    - ੋझ఺ ߓց ૑ਗ
    - झ೒ېए झ௼ܽ
    - ప݃ ஸ۞
    

    View Slide

13. View Slide

14. ୽ࢿ ࢎਊ੗੄ ࢸ஖ਬب
    - ੸ӓ ࢎਊ੗ীѱ জਸ рױ൤ ࢸ஖ೞب۾
    ӂਬ
    - Home Screen ী ١۾ػ জ੄ ҃਋ ੤ߑ
    ޙਯ ࢚थ
    Add to Home Screen
    by Install Banner
    

    View Slide

15. Splash Screen
    Make it as more App like
    ৈ۞࠙੄ জਸ জо஖
    - (؊੉࢚) ۽٬ ઺ ֢-ച੉౟-झ௼ܽ਷ Ӓ݅
    - ֎੉౭࠳ জҗ э਷ ҃೷ ઁҕ
    - Chrome, Firefox and Opera supports
    - Safari have broken in iOS9
    

    View Slide

16. http://realfavicongenerator.net/
    

    View Slide

17. $ npm install -g pwa-manifest
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. Entry Point for Application
    - ௏য ݽٕ ۽٬
    - Routes / History ١۾
    - CSS / ప݃ ۽٬
    

    View Slide

23. View Slide

24. View Slide

25. Application
    - App Shell with Service Worker
    - য೒ܻா੉࣌ UI ஹನք౟
    

    View Slide

26. App Shell
    Architecture
    - ֎੉౭࠳ জ(জ೐ۨ੐) җ э੉ ࡅܲ ۽٬
    ਸ ࠁৈ઱ח ೠо૑ ߑߨ
    - PWA ীࢲ ઁউೞח ইఃఫ୊
    - ୭ࣗೠ੄ HTML, CSS and JavaScript
    ۽ জ੄ ӝࠄ ҎѺ UI ܳ ҳࢿ
    - Toolbars, Drawers, Navigation
    - ࢲ࠺झ ਕழܳ ੉ਊ೧ࢲ ޖઑѤ நए
    

    View Slide

27. View Slide

28. https://react-mdl.github.io/react-mdl/
    

    View Slide

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

    View Slide

30. ServiceWoker
    - HTTPS ীࢲ ૑ਗ, ࠁউࢿ ೱ࢚
    - Offline-dinosaur ܳ લ੉ӝ ਤ೧ࢲ కয
    լणפ׮
    - ߔӒۄ਍٘ ীࢲ ߹ب۽ ز੘
    - ੗߄ झ௼݀౟۽ ೐۽Ӓې߁ оמ
    - cache, fetch, sync ਵ۽ ֎౟ਖ ਃ୒ ઁ
    য оמ
    - Push notification ࢎਊ оמ
    - IndexedDB ࢎਊ оמ
    - য়೐ۄੋ ࡺ݅ ইפۄ ࠛউ੿ೠ ֎౟ਖ ജ
    ҃ীࢲب ୭࢚੄ জ ҃೷ ઁҕ
    

    View Slide

31. View Slide

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 ীࢲ оמ
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. App Shell Caching
    via Service Worker in low-friction
    

    View Slide

38. View Slide

39. View Slide

40. Dynamic Contents Caching
    via Service Worker with toolbox
    

    View Slide

41. View Slide

42. Components for Contents
    - ஶబஎܳ ਤೠ ࠭ઁ੘
    - React.js ীࢲח ES2015 ਸ ୽࠙൤ ૑ਗ
    

    View Slide

43. View Slide

44. Routes for Application
    - ۄ਋౟ ஹನք౟ ١۾
    - Lazy Loading by Code-splitting
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. Performance
    Goal
    ৈ۞࠙੄ জ੉ 5 ୡ(3G) ੉ղ੄
    ߈਽੉ হ׮ݶ...
    - ؀ࠗ࠙੄ ࢎਊ੗ח ଵ૑ ঋणפ׮
    - RAIL ಁఢ઺ L ಁఢী ૘઺ (< 1sec)
    - ֎౟ਖ/ೞ٘ਝয ࢎೱਸ ղ۰ పझ౟
    - ୐ ߑޙदীח < 5 ୡ
    - ੤ߑޙद(with S/W) ীח < 2
    

    View Slide

51. ࡅܲ ۽٬੄ ೧Ѿ଼ PRLP ಁఢ
    - Push: ୡӝ ҳزী ೙ਃೠ ઺ਃ ౵ੌਸ (਋
    ࢶ) ੹׳
    - Render: ୡӝ ചݶ(݅) ҳز
    - Pre-cache: ୶о ౵ੌ நद /w ࢲ࠺झਕழ
    - Lazy-load: ࢎਊ੗ ਃ୒੉ য়ݶ ҙ۲ػ ౵
    ੌ ੹׳
    PRLP
    pattern
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. https://twitter.com/samccone/status/771786445015035904
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. Kicking mega byte bundle
    

    View Slide

60. Code-splitting
    by routes
    ۄ਋౟ ӝ߈ ࣗझ ଂѐӝ
    - ୡӝী ೙ਃೠ ઺ਃ ౵ੌ ݢ੷ ࠁղҊ
    - ׮ܲ ۄ਋౟ী ೙ਃೠ ౵ੌٜ਷ ੉റী ੹׳
    (Lazy-loading)
    

    View Slide

61. View Slide

62. - ׮নೠ Webpack ೒۞Ӓੋਵ۽ ਊ۝ਸ
    ઴ੌ ࣻ ੓׮
    - CommonsChunkPlugin
    - Entrypoint ীࢲ ҕਊਵ۽ ࢎਊغח ୒௼
    ܳ ܻ࠙, ࢎਊоמ
    More plugins
    for Webpack
    

    View Slide

63. View Slide

64. View Slide

65. Tree Shaking with Webpack 2
    - ES2015 ীࢲ ࢎਊ,
    - Dead Code (Unused export) ઁѢ
    

    View Slide

66. View Slide

67. monolithic bundles
    code-splitting by routes
    

    View Slide

68. View Slide

69. Testing
    - xo ܳ ੉ਊೠ ѼҊೠ ௏٘
    - ava ܳ ੉ਊೠ Ҋࢿמ పझ౟
    - enzyme ݽ؍ E2E Test ࢎਊ
    

    View Slide

70. - ъઁ੸੉Ҋ, ѼҊೞҊ, ܻ؊࠶(readable)
    ೠ ௏٬ झఋੌਸ ъઁ
    - ESLint ഐജ
    - ޷ܻ ࢸ੿ػ ׮নೠ ২࣌
    - ׮নೠ ইਓು
    - Zero-config
    

    View Slide

71. View Slide

72. - ޷פݣ, ಁझ౟ పझ౟
    - рױೠ ޙߨ
    - زद प೯
    - ࣁ޻ೠ పझ౟ ઑ੿
    - ة݀ػ ஶఫझ౟(Ӗ۽ߥ) ૑ਗ
    - ES2015 / Promise / Async /
    Observable ૑ਗ
    

    View Slide

73. - React.js ੹ਊ
    - Native API ܳ औѱ ࢎਊೡ ࣻ ੓਺
    - jQuery ੸ੋ ו՝
    - shallow(Virtual DOM), mount(DOM,
    jsdom, browser) ҳ࠙೧ࢲ ࢎਊоמ
    - +render
    - ׮ܲ పझ౟ ೐ۨ੐ਖҗ ഐജࢿ ֫਺
    Enzyme
    JavaScript Testing utilities for React
    from airbnb
    

    View Slide

74. View Slide

75. View Slide

76. ӒܻҊ
    

    View Slide

77. Cache-busting
    - ਬפ௼ೠ ౵ੌݺਸ ࢎਊೞৈ ܻࣗझܳ ഛ
    पೞѱ ҙܻೞח ߑߨ
    - ௏٘ ӝ߈੄ ܻࣗझ੄ ܻࣗझ ҙܻ ߑߨ
    - ୶о੸ੋ ੉ܴਸ ؊ೞח ߑध
    - chunk.js?v=1.2.0
    - chunk.d9834554decb6a8j.js
    - ઺ࠂ౵ੌ ׮਍۽٘ ߑ૑
    - ݆਷ Webpack Plugins ࢎਊоמ
    

    View Slide

78. View Slide

79. View Slide

80. Universal
    Rendering
    - ࢲߡীࢲ ࢤࢿػ ୡӝ HTML ஶబஎܳ ߄
    ۽ ੹࣠
    - ୡӝ ۪؊݂द ୶о HTML/JS/CSS ౵ੌ
    Fetching ਸ ઁೠ
    - React.js / ழޭפ౭੄ ৌആ ૑ਗ
    - ReactDOMServer.renderToStrin
    g()
    - React Router
    - isomorphic-fetch
    

    View Slide

81. View Slide

82. View Slide

83. Remember:
    Interactivity is key
    - ਬפߡࢸ ۪؊݂੉ ߈٘द জ੉ ޖઑѤ
    TTI ࢚కо ػ׮ח Ѫਸ ੄޷ೞ૑ ঋणפ
    ׮.
    - प೯ী ೙ਃೠ ୭ࣗೠ੄ HTML җ ۄ਋౴
    ী ೙ਃೠ JS/CSS ܳ ࢎਊೞࣁਃ
    - ੉റী ೙ਃೠ ܻࣗझ৬ ௏٘ܳ ׮਍۽٘
    ೧ࢲ ੼ର੸ਵ۽ ӝמਸ ୶о दఃࣁਃ
    (PRLP ಁఢ)
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

87. Chrome DevTools
    for Service Worker
    - DevTools > Application tab >
    Service Workers
    - 3G throttling and CPU throttling ࢎਊ
    ೧ࢲ ୭؀ೠ ࠺तೠ ജ҃ীࢲ పझ౟ܳ ӂ
    ੢
    

    View Slide

88. Fin
    

    View Slide