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
Google I/O 2017 注目のmobile Web技術
Search
Yui Sakamoto
May 26, 2017
Programming
7
5.9k
Google I/O 2017 注目のmobile Web技術
Goolgle I/O 2017で発表された内容の中からWebに関連する内容をまとめました。
Yui Sakamoto
May 26, 2017
Tweet
Share
More Decks by Yui Sakamoto
See All by Yui Sakamoto
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
12
4.8k
Google I/O '18 Overview @わいわい報告会
yuisakamoto
3
4.2k
PWA+AMPの話
yuisakamoto
25
22k
アプリファーストの影で頑張るWebの話
yuisakamoto
8
6.4k
Other Decks in Programming
See All in Programming
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
380
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1k
CloudflareStack でRAGに入門
asahiiwm
0
140
선언형 UI에서의 상태관리
l2hyunwoo
0
250
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
390
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
160
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
600
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
540
Androidアプリの One Experience リリース
nein37
0
500
命名をリントする
chiroruxx
1
550
Оптимизируем производительность блока Казначейство
lamodatech
0
860
rails newと同時に型を書く
aki19035vc
4
570
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
4 Signs Your Business is Dying
shpigford
182
21k
KATA
mclloyd
29
14k
The World Runs on Bad Software
bkeepers
PRO
66
11k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing for humans not robots
tammielis
250
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Transcript
Google I/O 2017 ͷMobile Webٕज़ Yui Sakamoto
• ࡔຊ ݁ҥ(@yui_tang) • Software Engineer • Mercari, inc. •
ೖࣾ3ʹಥೖ • αʔόʔαΠυɺϑϩϯτΤϯυɺϓϩδΣΫ τΦʔφʔʑ • ༷ʑͳϓϩδΣΫτʹؔΘΓͳ͕ΒɺೖࣾҎ དྷWebΛ୲͍ͯ͠Δ About Me
None
͓ॻ͖ • Google I/O 2017 ࡶײ • Webʹؔ࿈͢Δ
Google I/O 2017 ࡶײ • ࡢݴΘΕ͍ͯͨΑ͏ͳ(ޱ಄ʹͯ)͕େ͖͘վ ળ‼3ؒ௨ͯ͠ͱͯա͍͢͝͠ՆFesʹ❗ • ӄଟ͍͠ɺηογϣϯ༻ͷςϯτۭௐඋɻ ேன൩ͷ৯ࣄग़Δ͠ɺ☕ͷ‼
• Mobile First ➡ AI First
None
None
Google I/O ‘17Ͱ ͋ͬͨ101ͷൃද • Google Assistant and Google Home
• AI, ML and Cloud • Google Photos • Android and Google Play • VR and AR • YouTube All 101 announcements from Google I/O ‘17 https://blog.google/topics/developers/all-io17-announcements/
Google I/O 2017 Web-sideɹ • ѹతʹAMP + PWAਪ͠ • ͍Α͍Αಋೖɾਁಁظʹ☝
• PolymerͱWebAssembly͋ΔΑ • PRPL - Push, Render, Pre-cache, Lazy-load • ৽τϐοΫগͳΊ͔ͳ • ΧϯϑΝϨϯεͷࡉԽ
Google I/O 2017 Web-sideɹ • AMP & PWA • Polymer
• WebAssembly • Others 8FCʹؔΘΔηογϣϯ
Google I/O 2017 Web-sideɹ • AMP & PWA 12 ⤴
• Polymer 2 • WebAssembly 1 • Others 8FCʹؔΘΔηογϣϯ
AMP + PWA
The AMP Keynote (Google I/O '17) https://youtu.be/BGyF5Uh3w1M?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Accelerated Mobile Pages Project - AMP https://www.ampproject.org/ AMP Conf 2017ߦ͖ͬͯ·ͨ͠
#AMPConf http://tech.mercari.com/entry/2017/03/16/130113
From AMP to PWA: Progressive Web AMPs (Google I/O '17)
https://youtu.be/xF6mjl-wOqU?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
From AMP to PWA: Progressive Web AMPs (Google I/O '17)
https://youtu.be/xF6mjl-wOqU?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
AMP • Google Search͔Β2ഒͷ͞Ͱϩʔυ͞ΕΔվળ • AMPίϯϙʔωϯτͷαʔόʔαΠυϨϯμϦϯά • ਓ͕ೝࣝग़དྷͳ͍ϨϕϧͰը૾DLͷଳҬ༻෯Λ50%ݮ • ECαΠτͰAMP͕͑ΔΑ͏ʹͳͬͨ
• amp-bind, amp-formΛ༻͢Δ͜ͱʹΑΓ࣮ݱ • amp-adͷվળ Turbocharging AMP https://www.ampproject.org/latest/blog/turbocharging-amp/
AMP on e-commerce Turbocharging AMP https://www.ampproject.org/latest/blog/turbocharging-amp/
Progressive Web Apps https://developers.google.com/web/progressive-web-apps/
Progressive Web Apps • ϗʔϜը໘ʹΞΠίϯΛՃͰ͖Δ • Service WorkerʹΑΔߴԽΦϑϥΠϯΩϟο γϡ •
Web Push • Native AppͷΑ͏ͳfull screen UI • ࠓேliveͷrebuild.fmͰʹɻ 8FCϖʔδͰ"QQͷΑ͏ͳ69Λ࣮ݱ͢Δ
Building for Your Next Billion Users (Google I/O ’17) https://youtu.be/wD3rpdiLMyY?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Building for Your Next Billion Users (Google I/O ’17) https://youtu.be/wD3rpdiLMyY?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
AMP as PWA AMP to PWA AMP in PWA
".1Ͱߏங͞ΕͨϖʔδͰɺ 18"ͷػೳΛར༻͢Δɻ AMP as PWA
AMP to PWA ".1ϖʔδΛϥϯσΟϯάͯ͠18" • amp-install-serviceworker • JSͷ͑ͳ͍AMPϖʔδͰɺPWAͷ ServiceWorkerΛઌʹΠϯετʔϧ͢Δɻ amp-install-serviceworker
https://www.ampproject.org/docs/reference/components/amp-install-serviceworker
AMP to PWA
AMP to PWA
AMP to PWA
None
AMP in PWA
AMP in PWA
AMP in PWA
None
ڧྗͳService WorkerػೳΛ׆༻͠ɺఆܕίʔυΛഉআ͠ɺService WorkerͷੜΛࣗಈԽ͢Δ͜ͱͰɺ։ൃΛ؆ૉԽ͢Δ Workbox https://workboxjs.org
Workbox https://workboxjs.org
Lighthouse https://developers.google.com/web/tools/lighthouse/
Polymer
None
Polymer 2.0 • ͍͔ͭ͘ͷAPIͷมߋ • Polymer.dom -> shadow DOM v1
• ESͷclassߏจΛ͏ • and more ⤴ 8FC$PNQPOFOUTΛ ؆୯ɾखܰʹ࣮ݱ͢ΔϥΠϒϥϦ What's new in 2.0 - Polymer Project https://www.polymer-project.org/2.0/docs/about_20
Polymer + PWA sample Polymer sample https://shop.polymer-project.org/
WebAssembly
Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
͓ΘΓ