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

Progressive Web Apps with React.js in a nutshell at Google I/O devfest 2016

Jimmy Moon
May 20, 2016
41

Progressive Web Apps with React.js in a nutshell at Google I/O devfest 2016

Progressive Web Apps with React.js in a nutshell at Google I/O devfest 2016

Jimmy Moon

May 20, 2016
Tweet

Transcript

  1. Progressive
    Web Apps
    with
    React.js
    in a Nutshell

    View Slide

  2. Progressive
    Web Apps
    with
    React.js
    in a Nutshell
    https://medium.com/@addyosmani

    View Slide

  3. https://medium.com/@addyosmani
    - Part 1 - Introduction
    - Part 2 - Page Load Performance
    - Part 3 - Offline support and network
    resilience
    - Part 4 - Progressive Enhancement

    View Slide

  4. Github / NPM
    +JimmyMoon
    @ragingwind
    Google Developer Expert

    View Slide

  5. Part 1 - Introduction
    for Progressive Web Apps

    View Slide

  6. https://react-hn.appspot.com

    View Slide

  7. ȍȇȇ app.yaml
    ȍȇȇ dist
    ȍȇȇ hn-server-fetch.js: unofficial hn APIs
    ȍȇȇ nwb.config.js: nwb config
    ȍȇȇ package.json
    ȍȇȇ public
    Ȉ ȍȇȇ index-static.html
    Ȉ ȍȇȇ manifest.json
    Ȉ ȍȇȇ runtime-caching.js
    Ȉ Ȍȇȇ service-worker.js
    ȍȇȇ server.js
    ȍȇȇ src
    Ȉ ȍȇȇ App.js: App and Components
    Ȉ ȍȇȇ Comment.js
    Ȉ ȍȇȇ Item.js
    Ȉ ȍȇȇ NotFound.js
    Ȉ ȍȇȇ PermalinkedComment.js
    Ȉ ȍȇȇ Settings.js
    Ȉ ȍȇȇ Updates.js
    Ȉ ȍȇȇ UserProfile.js
    Ȉ ȍȇȇ index.js
    Ȉ ȍȇȇ routes.js
    Ȉ ȍȇȇ services: fetch APIs
    Ȉ ȍȇȇ stores: cache, store data
    Ȉ ȍȇȇ utils
    Ȉ Ȍȇȇ views: template
    Ȍȇȇ sw-precache-config.json
    - React.js ੄ ӝࠄ੸ੋ ࣗझ ౟ܻ
    - nwb ਸ ࢎਊೞৈ ೐۽ં౟ ࢤࢿ/ҙܻ
    - editing nwb.config.js
    - HackerHN Firebase APIs ࢎਊ

    View Slide

  8. - ୡࠁ੗੄ ѐ֛ ੟ӝਊ
    - React.js ୭न ߡ੹
    - Webpack 2
    - Code-spliting
    - Tree-shaking
    - Commonchunk
    - and More
    - PRPL ಁఢ ੸ਊ
    - Service Worker పझ౟ ૑ਗ
    - ݒఠܻ঴ ٣੗ੋ with React MDL
    - рױೠ ҳઑ৬ ࠭
    https://github.com/
    ragingwind/bare-react-pwa

    View Slide

  9. https://github.com/GoogleChrome/lighthouse
    - ֎౟ਖ োѾ੄ উ੹
    - Add to Home screen ࢎਊ оמ ৈࠗ
    - Custom splash screen ࢎਊ оמ ৈࠗ
    - য়೐ۄੋ੉ա ৌঈೠ ֎౟ਖ ജ҃ী ز੘
    оמ ৈࠗ
    - ಕ੉૑ ۽٘ ࢿמ਷ যځೠ૑
    - ݽ߄ੌ-೐۪ٜܻ ٣੗ੋਸ ࢎਊ೮ח૑
    - Progressively enhanced ܳ ૑ਗೞח
    জ ੋ૑
    - ઱ࣗହ ࢝җ ੜ ݒ஖ غח૑
    Lighthouse
    Auditing tools for Progressive Web App

    View Slide

  10. Ready for
    Mobile Platform
    - ੉ઁח ݽ߄ੌ ೒ۖಬ੉ ୭਋ࢶ ఋ௄ ೒ۖ

    - ݽ߄ੌ ജ҃ী ੸೤ೠ JS Libraries/
    Frameworks ࢎਊೞ੗
    - preact
    - AngularJS 2 Mobile
    - पઁ ݽ߄ੌജ҃੉ա ਬࢎജ҃ীࢲ పझ
    ౟ೞ੗
    - Remote Debugging Android
    Devices
    - WebPagetest

    View Slide

  11. HTTPS
    Network connection
    is secure
    - ӝઓ HTTP ࢚੄ ೧ఊ ߂ উ੹ࢿ ࠁ৮
    - Service Worker/Push Notification ܳ
    ࢎਊೞৈ ࢎਊ੗о જইೞח জਸ ٜ݅ӝ
    ਤ೧ࢲ
    - അ੤ ޖܐ/੷о੄ ࣛܖ࣌ ࢎਊоמ
    - Let's Encrypt
    - Cloudlare
    - Google App Engine for Node.js
    - Github Pages

    View Slide

  12. View Slide

  13. Web App Manifest
    Add to Home screen
    - рױೠ JSON ౵ੌ
    - ࢸ஖ оמೠ (Installable) ਢজਸ ਤೠ ࢸ
    ੿ٜ, ੉ܴ, ই੉௑١
    - Install Banner/Add to Home
    Screen
    - Splash Screen
    - Theme Color

    View Slide

  14. Install Banners
    - ੗઱ ࢎਊೞח ࢎਊ੗ীѱ জਸ рױ൤ ࢸ
    ஖ೞب۾ ӂਬ
    - Home Screen ী ١۾ػ জ੄ ҃਋ ੤ߑ
    ޙਯ ब൤ ೱ࢚оמ

    View Slide

  15. Splash
    Screen
    - ؊੉࢚ ۽٬઺ ֢-ച੉౟-झ௼ܽ਷ Ӓ݅
    - ֎੉౭࠳ জҗ э਷ ҃೷ ઁҕ
    - Chrome, Firefox and Opera supports
    - Safari have broken in iOS9

    View Slide

  16. http://realfavicongenerator.net/

    View Slide

  17. http://app-manifest.firebaseapp.com/

    View Slide

  18. $ npm install -g pwa-manifest

    View Slide

  19. View Slide

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

    View Slide

  21. - meta “viewport” ܳ ࢎਊೞৈ ࠳ۄ਋ઉ
    viewport ܳ ઑ੺ೞࣁਃ

    View Slide

  22. View Slide

  23. Part 2 -
    Page Load Performance

    View Slide

  24. View Slide

  25. Performance
    Goal
    - RAIL ಁఢ઺ L(Loading under 1sec)
    ী ૘઺ೞࣁਃ
    - ֎౟ਖ ઑѤਸ ղܻҊ ੷ࢎೱ ೞ٘ਝযী
    ࢲب ୽࠙൤ ੜ ز੘೧ঠ೤פ׮.
    - ୐ ߑޙदীח 5 ୡ ੉ղ(Speed Index
    of 3,000 or less)
    - ੤ߑޙद(with S/W, Speed Index of
    1,000 or less)ীח 2 ୡ੉ղ জ਷ ࢎਊ
    ੗ ઑ੘ী ߈਽೧ঠ೤פ׮.

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

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

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. Code-splitting
    by routes
    - ೞա੄ ௾ ౵ੌਸ ۄ਋౟ ӝ߈ਵ۽ ܻ࠙
    - ׮ܲ ۄ਋౟ী ೙ਃೠ ౵ੌٜ਷ ੉റী ߹
    ب۽ ۽٬оמ (Lazy-loading)
    - ୡӝ ۄ਋౟ ࢿמ ೱ࢚ਵ۽ ࢎਊ੗ ࢎਊо
    מ दр੉ খ׼ѹ૗

    View Slide

  38. View Slide

  39. monolithic bundles
    code-splitting by routes

    View Slide

  40. - ׮নೠ Webpack ೒۞Ӓੋਵ۽ ਊ۝ਸ
    ઴ੌ ࣻ ੓׮
    - CommonsChunkPlugin, п
    Entrypoint ীࢲ ҕਊਵ۽ ࢎਊغח ୒௼
    ܳ ܻ࠙, ࢎਊоמ
    - Tree Shaking, ؘ٘௏٘ ઁѢ۽ ୒௼ ਊ
    ۝ ׮੉য౟ оמ (but Webpack 2)
    More plugins
    for Webpack

    View Slide

  41. Preload
    - ࢶ঱݅ਵ۽ ܻࣗझ ಁ஖ оמ (प೯হ੉)
    - ૑Әө૑ח only in Chrome

    View Slide

  42. View Slide

  43. Implementing
    PRPL
    - Push
    - HTTP/2 + Server Push
    - Preload / Defer load
    - AggressiveSplittingPlugin
    - Rendering
    - ࢎਊೞח JS ೐ۨ੐ਕ௼ܳ ୭؀ೠ
    ഝਊೞࣁਃ
    - Pre-caching:
    - sw-precache
    - SWPrecacheWebpackPlugin
    - Lazy-load
    - require.ensure() or
    System.import()

    View Slide

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

    View Slide

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

    View Slide

  46. Part 3 -
    Offline support and network resilience

    View Slide

  47. View Slide

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

    View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

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

    View Slide

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

    View Slide

  60. View Slide

  61. App Shell Caching
    via Service Worker in low-friction
    - vanilla.js ਸ ࢎਊೞӝ
    - sw-precache / sw-toolbox ࢎਊೞӝ
    - Webpack ೒۞Ӓੋ ࢎਊೞӝ
    - offline-plugin
    - sw-precache-webpack-plugin
    - create-react-pwa ۽ ೐۽ં౟ ࢤࢿ

    View Slide

  62. View Slide

  63. View Slide

  64. config.json

    View Slide

  65. webpack.config.js

    View Slide

  66. Using runtime/dynamic caching with sw-toolbox

    View Slide

  67. View Slide

  68. View Slide

  69. Part 4 -
    Progressive
    Enhancement
    Building Progressively
    Becoming Apps
    Alex Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul

    View Slide

  70. View Slide

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

    View Slide

  72. View Slide

  73. Pro React - https://goo.gl/EXRM3k

    View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. Guarding
    against globals
    - ࢲߡ੄ Node.js ജ҃ীࢲ ز੘ೡ ҃਋
    `document` ژח `window` ё୓ܳ ഛ
    ੋೡ ೙ਃо ੓णפ׮.
    - ReactDOM but 3rd party ஹನք౟ ࢎ
    ਊ૑ ૑ਗৈࠗ ഛੋ
    - Webpack ߣٜ݂द੉ `browser` ః
    (package.json) ܳ ੉ਊೞৈ JS ౵ੌਸ
    ܻ࠙೧ࢲ ࢎਊоמ

    View Slide

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

    View Slide

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

    View Slide

  82. - 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

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

    View Slide

  84. Testing
    Progressive Enhancement
    - ୭Ӕ ٣ߡӦ ో਷ ੗߄झ௼݀౟о হח ҃
    ਋, ֎౟ਖ ജ҃੉ જ૑ ঋ਷ ҃਋ܳ दޯ
    ۨ੉౟ оמ೤פ׮.

    View Slide

  85. http://slack.gdg.kr/
    /join #pwa

    View Slide

  86. Fin

    View Slide