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
920
WordPressユーザーのためのAngular & Progressive Web Appsの話
Yosuke Onoue
October 09, 2016
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
Think About Front-end Web Development with Rust
likr
2
430
Yewにおけるoff-the-main-thread
likr
1
630
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
160
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
23
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.1k
Introduction to Graph Drawing
likr
0
390
20190707Ionic_Meetup.pdf
likr
0
350
About the end of the web
likr
2
450
Rust + WebAssemblyで広がるWebの未来
likr
16
6.5k
Other Decks in Technology
See All in Technology
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
1
120
令和最新版 Ruby プロファイラ "Pf2" のご紹介
osyoyu
0
170
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.3k
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.4k
本当のガバクラ基礎
toru_kubota
0
210
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.5k
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
470
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
430
uvを使ってストレスフリーな Python開発をしよう!
r74tech
0
250
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
720
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
6
3.9k
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
420
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Done Done
chrislema
178
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Music & Morning Musume
bryan
41
5.6k
Infographics Made Easy
chrislema
238
18k
Why Our Code Smells
bkeepers
PRO
331
56k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Practical Orchestrator
shlominoach
183
9.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
How to train your dragon (web standard)
notwaldorf
75
5.2k
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ศར