WordPressユーザーのためのAngular & Progressive Web Appsの話

Transcript

1. WordPressϢʔβʔͷͨΊͷ
 Angular & Progressive Web Appsͷ࿩ ͓ͷ͏͑ (@_likr)
2. ࣗݾ঺հ • ͓ͷ͏͑ (@_likr) • ژ౎େֶ ֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ
 ੓ࡦͷͨΊͷՊֶϢχοτ ಛఆॿڭ • ng-kyotoΦʔΨφΠβʔɺGDGਆށελοϑ • ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ • WordPressॳ৺ऀ
3. ng-kyoto • ژ౎Λத৺ʹ׆ಈ͢ΔAngularͷϢʔβʔίϛϡχςΟ • https://ng-kyoto.github.io/ • 2.0.0-alpha.31ͩͬͨͷͰͦΖͦΖߋ৽͍ͨ͠…
4. ࠓ೔ͷ࿩ • WP REST APIͷ࿩͸Ԭຊ͞Μ͕͍ͯ͠Δ͸ͣ… • ϑϨʔϜϫʔΫͷ࢖͍ํ΋طʹઆ໌͞Ε͍ͯΔ͸ͣ… • Progressive Web AppsͱAngularͷ࿩Λ௨ͯ͡ɺ
 ࡢࠓͷϑϩϯτΤϯυٕज़͕ɺࠓͲ͜΁޲͔͓͏ͱ
 ͍ͯ͠Δͷ͔Λͬ͘͟Γ঺հ͢Δ • ͜Ε͔ΒϑϩϯτΤϯυΛ࢝ΊΔਓ͕͙͢ʹ࠷৽ͷ
 τϨϯυΛऔΓೖΕΔͨΊͷπʔϧ΋঺հ
5. ໨࣍ • Progressive Web Appsͷ࿩ • Angularͷ࿩ • Blog࡞ͬͯΈͨ࿩ • ·ͱΊ
6. ໨࣍ • Progressive Web Appsͷ࿩ • Angularͷ࿩ • Blog࡞ͬͯΈͨ࿩ • ·ͱΊ
7. Progressive Web Apps • https://developers.google.com/web/progressive- web-apps/ • WebαΠτͱωΠςΟϒΞϓϦͷ
 ͍͍ͱ͜औΓΛͨ͠WebΞϓϦ • Progressive Enhancement • ߴ͍ϢʔβϏϦςΟͷ࣮ݱ • ϏδωεϑϨϯυϦʔ
8. PWAͰͰ͖Δ͜ͱ • ΦϑϥΠϯԽ • Πϯλʔωοτ઀ଓͳ͠Ͱͷར༻ • දࣔͷߴ଎Խ • Push௨஌ • ΞϓϦ΁ͷ࠶๚Λଅਐ • App Install Banner • ϗʔϜը໘΁ͷγϣʔτΧοτ௥Ճ • ঃʑʹΞϓϦͷΑ͏ʹͳΔʂ
9. PWAͷProgressive Enhancement • WebαΠτʹΞΫηε
 ˠ ΩϟογϡʹΑΔදࣔͷߴ଎Խ
 ˠ γϣʔτΧοτͷ௥Ճ
 ˠ Push௨஌
10. ͳͥPWAʁ • Ϣʔβʔ͕ϞόΠϧΞϓϦΛ࢖༻͢Δ࣌ؒ͸ݶΒΕ͍ͯ Δ͕ɺۃҰ෦ͷਓؾΞϓϦʹׂ͔ΕΔ͕࣌ؒଟ͍
 ˠ ΄ͱΜͲͷϞόΠϧΞϓϦͷ࢖༻཰͸ඇৗʹ௿͍
 ˠ Ϣʔβʔ͕ΑΓଟ͘ར༻͢ΔWebαΠτʹ
 ɹωΠςΟϒΞϓϦͷར఺ΛऔΓࠐΉ
11. PWAΛࢧ͑ΔWebٕज़ • Service Worker
 https://www.w3.org/TR/service-workers/ • Web App Manifest
 https://www.w3.org/TR/appmanifest/
12. ؔ࿈Ωʔϫʔυ • Responsive Design • RAIL Performance Model • Web Storage / IndexedDB • ϞδϡʔϧγεςϜ • webpackɺSystemJSɺrollup.jsɺ… • ϑϩϯτΤϯυϑϨʔϜϫʔΫɺϥΠϒϥϦ • AngularɺPolymerɺReactɺ…
13. Service Workerͱ͸ • Webϖʔδ(ϝΠϯεϨουɺUIεϨου)ͱ͸
 ಠཱͯ͠εΫϦϓτΛಈ࡞ͤ͞Δ࢓૊Έ • ωοτϫʔΫϦΫΤετΛϑοΫ • ΩϟογϡΛ࢖ͬͯϨεϙϯε • ϦΫΤετΛमਖ਼ • αʔόʔPushΛड͚ͯ௨஌Λදࣔ • postMessageͰϝΠϯεϨουͱ௨৴ • HTTPSͰͷΈಈ࡞ (localhostΛআ͘)
14. ͳͥΦϑϥΠϯWebΞϓϦʁ • ϞόΠϧ؀ڥ΁ͷରԠ • ௨৴ͷෆ҆ఆ͞ • ௨৴ͷޮ཰Խ • ޫ଎౓͸ෆมʂ • ΦϑϥΠϯɾϑΝʔετͷࢥ૝ͱ࣮ફ by നੴढ़ฏ
 http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
15. Fetchઓུ • The offline cookbook
 https://jakearchibald.com/2014/offline-cookbook/ • Cache only • Network only • Cache, falling back to network (cache first) • Cache & network race (fastest) • Network falling back to cache (network first) • …
16. sw-precache • https://github.com/GoogleChrome/sw-precache • JavaScript·ͨ͸ઃఆϑΝΠϧ͔Β
 Service WorkerίʔυΛੜ੒ • Α͘࢖͏Fetchઓུ͕࣮૷ࡁΈ • networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
17. ࢀߟࢿྉ • PWAϋϯζΦϯษڧձ @ GDGਆށ 2016/7/30
 https://speakerdeck.com/likr/gdgshen-hu- progressive-web-apphanzuonmian-qiang-hui • Codelabs
 https://codelabs.developers.google.com/pwa-dev- summit
18. ໨࣍ • Progressive Web Appsͷ࿩ • Angularͷ࿩ • Blog࡞ͬͯΈͨ࿩ • ·ͱΊ
19. Angular • Google͕த৺ʹ։ൃ͢ΔΦʔϓϯιʔεͷ
 ϑϩϯτΤϯυϑϨʔϜϫʔΫ • https://angular.io/ • Angular 2.0 ϦϦʔε
20. Angular 2.0ͷಛ௃ • ύϑΥʔϚϯε • ޮ཰ྑ͍มߋݕ஌ • AoTίϯύΠϧ • ҆શੑ • TypeScript࠾༻ʹΑΔܕαϙʔτ • ςετϑϨϯυϦʔͳAPI (DI) • ੜ࢈ੑ • ϑϧελοΫϑϨʔϜϫʔΫ
21. Կނ Angular ? • εέʔϥϒϧ • ϋΠύϑΥʔϚϯεɺνʔϜ։ൃ • ް͍ίϛϡχςΟ૚ • ׆ൃͳ։ൃɺଟ਺ͷϢʔβʔ • Webඪ४Λҙࣝͨ͠API • ShadowDOMɺObservableɺZonesɺ… • ਺೥ઌ΋ઓ͑Δٕज़Λ਎ʹ͚ͭΔʂ
22. Angular CLI • CLI tool for Angular2 • https://github.com/angular/angular-cli • Ͱ͖Δ͜ͱ • Component΍Service౳ͷੜ੒ • Ϗϧυ • ϩʔΧϧαʔόʔͷىಈ • σϓϩΠ(GitHub Pages) • …
23. Hello World $ npm install -g angular-cli $ ng new hello-angular $ cd hello-angular $ ng serve
24. ࢀߟ৘ใ • ng-japan Slack
 https://ng-japan-invite.herokuapp.com/ • Angular 2 ϋϯζΦϯ
 https://github.com/ng-japan/ng2-hands-on-seed
25. ໨࣍ • Progressive Web Appsͷ࿩ • Angularͷ࿩ • Blog࡞ͬͯΈͨ࿩ • ·ͱΊ
26. ΍ͬͯΈͨ • Angular & WordPress.com APIͰ࣮૷ͨ͠ϒϩά • https://likr.github.io/blog • https://github.com/likr/blog • ΍ͬͨ͜ͱ • Service WorkerʹΑΔΦϑϥΠϯରԠ • sw-precache࢖༻ • هࣄ͸network firstͰऔಘ • ϗʔϜεΫϦʔϯ΁ͷ௥Ճ
27. ߏ੒ • Angular 2.0 & Angular CLI • WordPress.com REST API • https://developer.wordpress.com/docs/api/ • Pure.css • http://purecss.io/ • sw-precache • https://github.com/GoogleChrome/sw-precache • GitHub Pages
28. σϞ https://likr.github.io/blog/#/posts/62 https://likr.github.io/blog/#/posts
29. ࢀߟ৘ใ • for Angular 1
 https://github.com/likr/wpapi-angular-example • for Angular 2
 https://github.com/likr/wpapi-angular2-example
 https://github.com/likr/blog
30. ໨࣍ • Progressive Web Appsͷ࿩ • Angularͷ࿩ • Blog࡞ͬͯΈͨ࿩ • ·ͱΊ
31. ·ͱΊ • WP(or WordPress.com) REST APIʹڵຯΛ࣋ͬͨਓ͸ɺ AngularΛࢼͯ͠ཉ͍͠ʂ • কདྷΛݟਾ͑ͯɺ਺೥ઌ΋ઓ͑Δٕज़Λ਎ʹ෇͚Α͏ • Angular CLIͱsw-precacheศར