そろそろ真面目に Webフロントエンド開発をやる

Transcript

1. ͦΖͦΖਅ໘໨ʹ
 WebϑϩϯτΤϯυ։ൃΛ΍Δ ͓ͷ͏͑ (@_likr) 2017/01/14 ؔ੢ϑϩϯτΤϯυUG ৽೥๊ෛձ
2. ࣗݾ঺հ • ͓ͷ͏͑ (@_likr) • ژ౎େֶ ֶࡍ༥߹༥߹ڭҭݚڀਪਐηϯλʔ
 ੓ࡦͷͨΊͷՊֶϢχοτ ಛఆॿڭ • ng-kyotoΦʔΨφΠβʔ • ՄࢹԽͷݚڀͱ͔΍ͬͯΔ • ͭͬͨ͘ https://egrid.jp/ • ࠓ೥ͷ໨ඪɿϚαΧϦΛ౤͛ͳ͍
3. SPAͬͯຊ౰ʹҙຯ͋Μͷʁ
4. 2017೥ͷWebαΠτʹඞཁͳ΋ͷʁ • ϑϩϯτΤϯυϑϨʔϜϫʔΫ • AngularɺReactɺ… • τϥϯεύΠϥ • BabelɺTypeScriptɺ… • Ϗϧυπʔϧ • webpackɺ…
5. 2017೥ͷWebαΠτʹඞཁͳ΋ͷʁ • ϑϩϯτΤϯυϑϨʔϜϫʔΫ • AngularɺReactɺ… • τϥϯεύΠϥ • BabelɺTypeScriptɺ… • Ϗϧυπʔϧ • webpackɺ… ΋͏े෼ීٴٕͨ͠ज़ɺඞཁʹԠͯ͡࢖͓͏
6. ྑ͍WebαΠτͷࢦ਑ • Progressive Web App Checklist • https://developers.google.com/web/progressive- web-apps/checklist • ϕʔεϥΠϯ • HTTPSɺϨεϙϯγϒɺΦϑϥΠϯɺϗʔϜը໘௥ Ճɺ௿଎ճઢରԠɺΫϩεϒϥ΢βରԠɺεϜʔζͳ ϖʔδભҠɺϖʔδຖͷURL • ໛ൣత • ΠϯσοΫεՄೳɺUXɺύϑΥʔϚϯεɺ௨஌
7. SPAͷಘҙɾෆಘҙ 41"ඇ41"
 ͲͬͪͰ΋΍Δ 41"͕ಘҙ 41"͕ۤख )5514
 Ϩεϙϯγϒ
   ϗʔϜը໘௥Ճ
   ௿଎ճઢରԠ
   Ϋϩεϒϥ΢βରԠ
   ϖʔδຖͷ63-
   69
   ύϑΥʔϚϯε
   ௨஌ ΦϑϥΠϯ
 εϜʔζͳϖʔδભҠ ΠϯσοΫεՄೳ
 4&0ɺ0(1ରԠ
8. SPAͰ͸ͳͯ͘PWAΛ໨ࢦͦ͏ • PWA͸2017೥ݱࡏͷྑ͍WebαΠτͷઃܭࢦ਑ • SPA͸໨తͰ͸ͳͯ͘खஈ • PWAΛ࣮ݱ͢ΔͨΊʹ͸SPA͕ۙಓ • ΦϑϥΠϯ • εϜʔζͳϖʔδભҠ • SPA͕ۤखͳͱ͜ΖΛͲ͏ิ͏͔ʁ • ΠϯσοΫεՄೳ
9. Progressive Web Apps
10. Progressive Web Apps • https://developers.google.com/web/progressive- web-apps/ • WebαΠτͱωΠςΟϒΞϓϦͷ
 ͍͍ͱ͜औΓΛͨ͠WebΞϓϦ • Progressive Enhancement • ߴ͍ϢʔβϏϦςΟͷ࣮ݱ • ϏδωεϑϨϯυϦʔ
11. PWAͰͰ͖Δ͜ͱ • ΦϑϥΠϯԽ • Πϯλʔωοτ઀ଓͳ͠Ͱͷར༻ • දࣔͷߴ଎Խ • Push௨஌ • ΞϓϦ΁ͷ࠶๚Λଅਐ • App Install Banner • ϗʔϜը໘΁ͷγϣʔτΧοτ௥Ճ • ঃʑʹΞϓϦͷΑ͏ʹͳΔʂ
12. Service Worker • Webϖʔδ(ϝΠϯεϨουɺUIεϨου)ͱ͸
 ಠཱͯ͠εΫϦϓτΛಈ࡞ͤ͞Δ࢓૊Έ • ωοτϫʔΫϦΫΤετΛϑοΫ • ΩϟογϡΛ࢖ͬͯϨεϙϯε • ϦΫΤετΛमਖ਼ • αʔόʔPushΛड͚ͯ௨஌Λදࣔ • postMessageͰϝΠϯεϨουͱ௨৴ • HTTPSͰͷΈಈ࡞ (localhostΛআ͘)
13. ͳͥΦϑϥΠϯWebΞϓϦʁ • ϞόΠϧ؀ڥ΁ͷରԠ • ௨৴ͷෆ҆ఆ͞ • ௨৴ͷޮ཰Խ • ޫ଎౓͸ෆมʂ(໿30ສkm/s) • Ր੕ͱ஍ٿͰ௨৴ͨ͠Βʁ (࠷઀ۙ࣌໿7500ສkm) • ΦϑϥΠϯɾϑΝʔετͷࢥ૝ͱ࣮ફ by നੴढ़ฏ
 http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
14. sw-precache • https://github.com/GoogleChrome/sw-precache • JavaScript·ͨ͸ઃఆϑΝΠϧ͔Β
 Service WorkerίʔυΛੜ੒ • Α͘࢖͏Fetchઓུ͕࣮૷ࡁΈ • networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
15. sw—precache-webpack-plugin const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin') module.exports = { plugins: [ new SWPrecacheWebpackPlugin({ maximumFileSizeToCacheInBytes: 10000000, staticFileGlobs: [ 'public/index.html', 'public/bundle.js', 'public/manifest.json' ], stripPrefix: 'public/', navigateFallback: '/index.html', runtimeCaching: [ { urlPattern: /https:\/\/public-api\.wordpress\.com\/rest\/v1\.1\/sites\/ylikr\. handler: 'networkFirst', options: { cache: { name: 'posts' } } } ] }) ] }
16. HTTPS • HTTP௨৴ΛSSL/TLSͰ҉߸Խ • ηΩϡΞͳWeb΁ • HTTP/2ɺServiceWorkerʹඞཁ • Let’s Encrypt • ແྉͷSSL/TLSূ໌ॻ • MozillaΒ͕εϙϯαʔ • FirebaseͰϗεςΟϯά
17. ύϑΥʔϚϯε
18. Rail Performance Model • https://developers.google.com/web/fundamentals/ performance/rail • Response • Ϣʔβૢ࡞ʹରͯ͠100msҎ಺ʹԠ౴ • Animation • 10ms / ϑϨʔϜ • Idle • ΞΠυϧ࣌ؒΛ௕͘͢Δ • Loading • 1000msҎ಺ʹॳظը໘දࣔ
19. Rail Performance Model • https://developers.google.com/web/fundamentals/ performance/rail • Response • Ϣʔβૢ࡞ʹରͯ͠100msҎ಺ʹԠ౴ • Animation • 10ms / ϑϨʔϜ • Idle • ΞΠυϧ࣌ؒΛ௕͘͢Δ • Loading • 1000msҎ಺ʹॳظը໘දࣔ
20. ॳظϩʔσΟϯάͷߴ଎Խ • ϨεϙϯεΛ଎͘͢Δ • ྑ͍ੑೳͷαʔόΛ࢖͏ • HTTP/2 • ௨৴ྔΛݮΒ͢ • minify • ௨৴ΛݮΒ͢ • Ωϟογϡ • ΦϑϥΠϯԽ • CDNͷར༻
21. bundleαΠζΛখ͘͢͞Δ • bundle෼ׂ • ڞ௨෦෼ + ϖʔδຖ • ϥΠϒϥϦ֎෦Խ • scriptλάͰಡΈࠐΜͩεΫϦϓτΛ
 CommonJSελΠϧͰ࢖༻͢Δ • CDNར༻ module.exports = { externals: { 'react': 'React', 'react-dom': 'ReactDOM', 'react-router': 'ReactRouter' } } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.min.js"></script>
22. ΠϯσοΫεՄೳ
23. ΠϯσοΫεͱιʔγϟϧڞ༗ • GoogleͷΫϩʔϥ • JavaScriptΛॲཧ͢Δ • XHR͸ॲཧ͠ͳ͍(?) • ιʔγϟϧڞ༗ • TwitterɺFacebookɺ… • OGP • JavaScriptΛॲཧ͠ͳ͍
24. WebαΠτͷछྨͱߋ৽ස౓ • ੩తWebαΠτɺݸਓπʔϧɺήʔϜ • ΞϓϦ = ίϯςϯπ • ։ൃऀ͕ίϯςϯπΛߋ৽ • CMSɺϒϩά • ΞϓϦͱίϯςϯπͷ෼཭ • ؅ཧऀ͕ίϯςϯπΛߋ৽ • SNSɺϢʔβࢀՃίϯςϯπ • Ϣʔβ͕ίϯςϯπΛߋ৽ SPAͰΠϯσοΫεՄೳ
 (ϖʔδຖͷมߋ͸ෆՄ) Ϋϩʔϥରࡦ͕ඞཁ ΦϑϥΠϯԽͷ޻෉͕ඞཁ
25. Ϋϩʔϥରࡦ • Server Side Rendering • ॳظඳըΛαʔόଆͰॲཧ • ॳظϩʔσΟϯάͷߴ଎Խ • UniversalΛҙࣝͨ͠ίʔσΟϯά • ϓϦϨϯμϦϯά • Ϋϩʔϥʹରͯ͠ϨϯμϦϯάࡁΈͷHTMLΛԠ౴ • Ϣʔβʹ͸௨ৗͷSPAͱͯ͠ಈ࡞ • ϓϦϨϯμϦϯάͷͨΊͷϛυϧ΢ΣΞ͕ඞཁ
26. Prerender.io • https://prerender.io/ • PhantomJSͰϓϦϨϯμϦϯά • Headless WebKit • ϛυϧ΢ΣΞ • Ϋϩʔϥ͔Ͳ͏͔Λ൑அ͠ϓϦϨϯμϦϯάͱ
 ௨ৗͷϨεϙϯεʹৼΓ෼͚Δ • nginxɺapacheɺexpressɺrails • 250ϖʔδ·Ͱ͸ແྉ
27. σϞ
28. ϒϩά • https://blog.likr-lab.com/ • PWA ChecklistͷϕʔεϥΠϯ͸େମकͬͨ
29. γεςϜߏ੒ • ϑϩϯτΤϯυ • ReactɺReact Helmet • ServiceWorkerɺAppManifest • όοΫΤϯυ • wordpress.com API • ͘͞ΒVPS • nginx • hosting • prerender.io • Let’s Encrypt
30. ·ͱΊ
31. ·ͱΊ • 2017೥ʹ࡞ΔWebαΠτ͸PWAΛ໨ࢦͦ͏ • TodoMVCͷ࣍ʹϒϩά͸͍͔͕ʁ • WebϑϩϯτΤϯυ։ൃʹඞཁͳ΋ͷ͕Θ͔Δ • ر๬ • Firebase͕ϓϦϨϯμϦϯάαʔϏεΛ࣋ͬͯ΄͍͠