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
51

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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  5. Part 1 - Introduction
    for Progressive Web Apps

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. http://realfavicongenerator.net/

    View full-size slide

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

    View full-size slide

  17. $ npm install -g pwa-manifest

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Part 2 -
    Page Load Performance

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  24. monolithic bundles
    code-splitting by routes

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Part 3 -
    Offline support and network resilience

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. 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 full-size slide

  35. config.json

    View full-size slide

  36. webpack.config.js

    View full-size slide

  37. Using runtime/dynamic caching with sw-toolbox

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. - 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide