Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPressユーザーのためのAngular & Progressive Web Appsの話
Search
Yosuke Onoue
October 09, 2016
Technology
1
930
WordPressユーザーのためのAngular & Progressive Web Appsの話
Yosuke Onoue
October 09, 2016
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6.1k
Think About Front-end Web Development with Rust
likr
2
510
Yewにおけるoff-the-main-thread
likr
1
730
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
210
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.6k
Introduction to Graph Drawing
likr
0
470
20190707Ionic_Meetup.pdf
likr
0
400
About the end of the web
likr
2
510
Other Decks in Technology
See All in Technology
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
800
データモデルYANGの処理系を再発明した話
tjmtrhs
0
240
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
What's new in Go 1.24?
ciarana
1
120
クラウド食堂とは?
hiyanger
0
130
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
370
OPENLOGI Company Profile
hr01
0
60k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
910
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
180
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
250
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Automating Front-end Workflow
addyosmani
1369
200k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
How STYLIGHT went responsive
nonsquared
99
5.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Faster Mobile Websites
deanohume
306
31k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Practical Orchestrator
shlominoach
186
10k
The Invisible Side of Design
smashingmag
299
50k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Optimizing for Happiness
mojombo
377
70k
Transcript
WordPressϢʔβʔͷͨΊͷ Angular & Progressive Web Appsͷ ͓ͷ͏͑ (@_likr)
ࣗݾհ • ͓ͷ͏͑ (@_likr) • ژେֶ ֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ ࡦͷͨΊͷՊֶϢχοτ ಛఆॿڭ •
ng-kyotoΦʔΨφΠβʔɺGDGਆށελοϑ • ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ • WordPressॳ৺ऀ
ng-kyoto • ژΛத৺ʹ׆ಈ͢ΔAngularͷϢʔβʔίϛϡχςΟ • https://ng-kyoto.github.io/ • 2.0.0-alpha.31ͩͬͨͷͰͦΖͦΖߋ৽͍ͨ͠…
ࠓͷ • WP REST APIͷԬຊ͞Μ͕͍ͯ͠Δͣ… • ϑϨʔϜϫʔΫͷ͍ํطʹઆ໌͞Ε͍ͯΔͣ… • Progressive Web
AppsͱAngularͷΛ௨ͯ͡ɺ ࡢࠓͷϑϩϯτΤϯυٕज़͕ɺࠓͲ͔͓͜͏ͱ ͍ͯ͠Δͷ͔Λͬ͘͟Γհ͢Δ • ͜Ε͔ΒϑϩϯτΤϯυΛ࢝ΊΔਓ͕͙͢ʹ࠷৽ͷ τϨϯυΛऔΓೖΕΔͨΊͷπʔϧհ
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
Progressive Web Apps • https://developers.google.com/web/progressive- web-apps/ • WebαΠτͱωΠςΟϒΞϓϦͷ ͍͍ͱ͜औΓΛͨ͠WebΞϓϦ •
Progressive Enhancement • ߴ͍ϢʔβϏϦςΟͷ࣮ݱ • ϏδωεϑϨϯυϦʔ
PWAͰͰ͖Δ͜ͱ • ΦϑϥΠϯԽ • Πϯλʔωοτଓͳ͠Ͱͷར༻ • දࣔͷߴԽ • Push௨ •
ΞϓϦͷ࠶๚Λଅਐ • App Install Banner • ϗʔϜը໘ͷγϣʔτΧοτՃ • ঃʑʹΞϓϦͷΑ͏ʹͳΔʂ
PWAͷProgressive Enhancement • WebαΠτʹΞΫηε ˠ ΩϟογϡʹΑΔදࣔͷߴԽ ˠ γϣʔτΧοτͷՃ ˠ Push௨
ͳͥPWAʁ • Ϣʔβʔ͕ϞόΠϧΞϓϦΛ༻͢Δ࣌ؒݶΒΕ͍ͯ Δ͕ɺۃҰ෦ͷਓؾΞϓϦʹׂ͔ΕΔ͕࣌ؒଟ͍ ˠ ΄ͱΜͲͷϞόΠϧΞϓϦͷ༻ඇৗʹ͍ ˠ Ϣʔβʔ͕ΑΓଟ͘ར༻͢ΔWebαΠτʹ ɹωΠςΟϒΞϓϦͷརΛऔΓࠐΉ
PWAΛࢧ͑ΔWebٕज़ • Service Worker https://www.w3.org/TR/service-workers/ • Web App Manifest https://www.w3.org/TR/appmanifest/
ؔ࿈Ωʔϫʔυ • Responsive Design • RAIL Performance Model • Web
Storage / IndexedDB • ϞδϡʔϧγεςϜ • webpackɺSystemJSɺrollup.jsɺ… • ϑϩϯτΤϯυϑϨʔϜϫʔΫɺϥΠϒϥϦ • AngularɺPolymerɺReactɺ…
Service Workerͱ • Webϖʔδ(ϝΠϯεϨουɺUIεϨου)ͱ ಠཱͯ͠εΫϦϓτΛಈ࡞ͤ͞ΔΈ • ωοτϫʔΫϦΫΤετΛϑοΫ • ΩϟογϡΛͬͯϨεϙϯε •
ϦΫΤετΛमਖ਼ • αʔόʔPushΛड͚ͯ௨Λදࣔ • postMessageͰϝΠϯεϨουͱ௨৴ • HTTPSͰͷΈಈ࡞ (localhostΛআ͘)
ͳͥΦϑϥΠϯWebΞϓϦʁ • ϞόΠϧڥͷରԠ • ௨৴ͷෆ҆ఆ͞ • ௨৴ͷޮԽ • ޫෆมʂ •
ΦϑϥΠϯɾϑΝʔετͷࢥͱ࣮ફ by നੴढ़ฏ http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
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) • …
sw-precache • https://github.com/GoogleChrome/sw-precache • JavaScript·ͨઃఆϑΝΠϧ͔Β Service WorkerίʔυΛੜ • Α͘͏Fetchઓུ͕࣮ࡁΈ •
networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
ࢀߟࢿྉ • 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
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
Angular • Google͕த৺ʹ։ൃ͢ΔΦʔϓϯιʔεͷ ϑϩϯτΤϯυϑϨʔϜϫʔΫ • https://angular.io/ • Angular 2.0 ϦϦʔε
Angular 2.0ͷಛ • ύϑΥʔϚϯε • ޮྑ͍มߋݕ • AoTίϯύΠϧ • ҆શੑ
• TypeScript࠾༻ʹΑΔܕαϙʔτ • ςετϑϨϯυϦʔͳAPI (DI) • ੜ࢈ੑ • ϑϧελοΫϑϨʔϜϫʔΫ
Կނ Angular ? • εέʔϥϒϧ • ϋΠύϑΥʔϚϯεɺνʔϜ։ൃ • ް͍ίϛϡχςΟ •
׆ൃͳ։ൃɺଟͷϢʔβʔ • Webඪ४Λҙࣝͨ͠API • ShadowDOMɺObservableɺZonesɺ… • ઌઓ͑Δٕज़Λʹ͚ͭΔʂ
Angular CLI • CLI tool for Angular2 • https://github.com/angular/angular-cli •
Ͱ͖Δ͜ͱ • ComponentServiceͷੜ • Ϗϧυ • ϩʔΧϧαʔόʔͷىಈ • σϓϩΠ(GitHub Pages) • …
Hello World $ npm install -g angular-cli $ ng new
hello-angular $ cd hello-angular $ ng serve
ࢀߟใ • ng-japan Slack https://ng-japan-invite.herokuapp.com/ • Angular 2 ϋϯζΦϯ https://github.com/ng-japan/ng2-hands-on-seed
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
ͬͯΈͨ • Angular & WordPress.com APIͰ࣮ͨ͠ϒϩά • https://likr.github.io/blog • https://github.com/likr/blog
• ͬͨ͜ͱ • Service WorkerʹΑΔΦϑϥΠϯରԠ • sw-precache༻ • هࣄnetwork firstͰऔಘ • ϗʔϜεΫϦʔϯͷՃ
ߏ • 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
σϞ https://likr.github.io/blog/#/posts/62 https://likr.github.io/blog/#/posts
ࢀߟใ • 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
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
·ͱΊ • WP(or WordPress.com) REST APIʹڵຯΛ࣋ͬͨਓɺ AngularΛࢼͯ͠ཉ͍͠ʂ • কདྷΛݟਾ͑ͯɺઌઓ͑Δٕज़Λʹ͚Α͏ •
Angular CLIͱsw-precacheศར