Tweet
Tweet

Slide 1

Slide 1 text

Progressive Web Apps with React.js in a Nutshell

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Github / NPM +JimmyMoon @ragingwind Google Developer Expert

Slide 5

Slide 5 text

Part 1 - Introduction for Progressive Web Apps

Slide 6

Slide 6 text

https://react-hn.appspot.com

Slide 7

Slide 7 text

ȍȇȇ 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 ࢎਊ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Ready for Mobile Platform - ੉ઁח ݽ߄ੌ ೒ۖಬ੉ ୭਋ࢶ ఋ௄ ೒ۖ ಬ - ݽ߄ੌ ജ҃ী ੸೤ೠ JS Libraries/ Frameworks ࢎਊೞ੗ - preact - AngularJS 2 Mobile - पઁ ݽ߄ੌജ҃੉ա ਬࢎജ҃ীࢲ పझ ౟ೞ੗ - Remote Debugging Android Devices - WebPagetest

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

http://realfavicongenerator.net/

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

$ npm install -g pwa-manifest

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Part 2 - Page Load Performance

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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 ୡ੉ղ জ਷ ࢎਊ ੗ ઑ੘ী ߈਽೧ঠ೤פ׮.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

monolithic bundles code-splitting by routes

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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()

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Part 3 - Offline support and network resilience

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

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 ۽ ೐۽ં౟ ࢤࢿ

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

config.json

Slide 65

Slide 65 text

webpack.config.js

Slide 66

Slide 66 text

Using runtime/dynamic caching with sw-toolbox

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

- 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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Fin