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
TechBuzz 第17回 HTML5+JS 講演資料
Search
Ken Wagatsuma
September 23, 2015
Programming
2
880
TechBuzz 第17回 HTML5+JS 講演資料
https://github.com/KENJU/techbuzz_htmljs_20150924
Ken Wagatsuma
September 23, 2015
Tweet
Share
More Decks by Ken Wagatsuma
See All by Ken Wagatsuma
Pregel Graph Compute Engines - Supersteps Exampls
kenju
1
180
Kafka on Kubernetes with Strimzi
kenju
1
120
AWS DynamoDB Accelerator (DAX) 101
kenju
3
6.6k
Moden browser introduction
kenju
1
340
Cookpad summer internship 2019 - API
kenju
0
9.9k
Introduction to Design Patterns
kenju
0
46
GraphQL Asia 2019 "Re-architecture of a decade-old app with BFF/GraphQL"
kenju
0
8.7k
Introduction to TypeScript
kenju
0
660
Introduction to Programmatic Ad
kenju
0
160
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
430
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
470
新宿ダンジョンを可視化してみた
satoshi7190
2
280
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Deep Dive into React Stream/Serialize
mugi_uno
3
440
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
2
160
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
330
VS Code をプロダクトにどう取り込むか
onomax
1
630
雑に思考を整理する技術と効能
konifar
61
30k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
160
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
Featured
See All Featured
Making Projects Easy
brettharned
109
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
It's Worth the Effort
3n
180
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Teambox: Starting and Learning
jrom
128
8.4k
Clear Off the Table
cherdarchuk
85
310k
Faster Mobile Websites
deanohume
300
30k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
The Pragmatic Product Professional
lauravandoore
26
5.8k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Git: the NoSQL Database
bkeepers
PRO
423
63k
How to train your dragon (web standard)
notwaldorf
74
5.2k
Transcript
Web Workers +α Kenju Wagatsuma
Agenda ❖ 3m : Self Introduction ❖ 8m : Web
Worker / Shared Worker ❖ 8m : Story Behind “Instagram JS” ❖ 6m : Service Worker ❖ 5m : Q&A
Goal ❖ 1 : ʰWeb Worker APIͷجຊͷ͍ํΛ Δ͜ͱʱ ❖ 2:
ʰࣄྫΛ௨ͯ͠Web Worker APIͷɹ ࣮ફྫͱԠ༻ํ๏ʹ͍ͭͯΔʱ
Self Introduction
Self Introduction ❖ Career ❖ Hobby ❖ ʰࠓिಡΜͩຊʱ
Career ❖ 2011 : Graphic Designer ( PS, AI, ID
) ❖ 2013 : Web Designer ( HTML, CSS, jQuery) ❖ 2014 : Web Engineer ( + JS - Coffee, Node ) ❖ 2015 : Programmer ( + Java/Android, Linux )
Recent Keywords ❖ Atom ❖ Electron ❖ Node v4
Hobby ❖ PENTATONIX ❖ Beatbox ❖ + Guitar
ʰࠓिಡΜͩຊʱ “Soft Skills” ❖ AmazonόΧചΕ ❖ ࠓि΄ͬͯΜͱΓ ❖ ୯ͳΔϓϩάϥϚ͔Βͷ٫
Web Worker / Shared Worker
Web Worker / Shared Worker ❖ What? ❖ When? ❖
How? ❖ Sample
What? ❖ JSͰϚϧνεϨουॲཧΛ࣮ݱ͢Δɹ ͨΊͷHTML5ͷ༷ ❖ ಠࣗͷάϩʔόϧείʔϓΛ࣋ͭ
UI Thread DOM Event Listeners window object
UI Thread Worker Thread Create
UI Thread Worker Thread Create Message
UI Thread Worker Thread Create Message Result
UI Blocking... ❖ jQueryೖΕ͗ͯ͢ը໘͕ͪΒ͖ͭ͗͢ɻɻɻ ❖ εΫϩʔϧ͕ͬ͞Γɻɻɻ ❖ Animation͕શવεϜʔζ͡Όͳ͍ɻɻɻ
UI Thread jQueryඳը
UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ
UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ JSONϨεϙϯεղੳ
UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ JSONϨεϙϯεղੳ σʔλՃ
Non-Blocking! ❖ JavaScriptγϯάϧεϨου ❖ UIεϨουͱผͷεϨου͕͋Ε͍͍ ❖ DOMૢ࡞ͱܭࢉॲཧͷ
UI Thread Worker Thread Create jQueryඳը
UI Thread Worker Thread Create jQueryඳը JSON ղੳ σʔλ Ճ
εΫϩʔϧ Ґஔܭࢉ
UI Thread Worker Thread Create jQueryඳը JSON ղੳ σʔλ Ճ
εΫϩʔϧ Ґஔܭࢉ Result
When? ❖ CanvasΛ༻͍ͨը૾ॲཧ ❖ σʔλͷϓϦϩʔυ ❖ ಈըԻͷղੳॲཧ ❖ ΩϟογϡΛ༻͍ͨॲཧ ❖
JSONจࣈྻͷॲཧ ❖ IndexedDBΛ༻͍ͨॲཧ ❖ ෳࡶͳ҉߸Խ ❖ εϖϧνΣοΫͳͲͷߏจղੳ ❖ Location APILocal Storage APIͱͷԠ༻
How? ❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ ❖ 2: postMessage()ͰϝοηʔδΛૹΔ ❖ 3:
WorkerଆͰड͚औͬͨϝοηʔδΛ ͱʹॲཧΛߦ͏ ❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ
❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ
❖ 2: postMessage()ͰϝοηʔδΛૹΔ
❖ 3: WorkerଆͰड͚औͬͨϝοηʔδΛ ͱʹॲཧΛߦ͏
❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ
http://www.codeproject.com/Articles/429123/Web-Workers
Sample ❖ sample01: 2ͷ50ͷܭࢉ ❖ sample02: 10ສ·Ͱͷ͏ͪ࠷େͷૉͷ୳ࡧ ❖ sample03: 2ͷnͷܭࢉʢnҙʣ
✓ Web Workerͷجຊతͳϓϩηε ✓ Πϯελϯεੜ ✓ WorkerεϨουͷॲཧ ✓ ϝοηʔδૹ৴ɾड৴
Sample ❖ sample04: จࣈྻΧϯτ ✓ ୯ମͷมҎ֎ͷσʔλͷड͚͠ ✓ WorkerͰΦϒδΣΫτʢJSONʣΛड͚͢
Sample ❖ sample05: ը૾ॲཧ ✓ ޙड़
Shared Worker? ❖ ҰͭͷWorkerεϨουΛෳWindowؒͰڞ༗ ❖ WorkerεϨου = άϩʔόϧείʔϓ ❖ ੜํ๏Web
Workerͱಉ͡ ❖ Ұࡦఆ͔Β֎͞Εɺࡢ࠶࠾༻͞Εͨɹ ͱ͍͏ܦҢ͕͋Δ
Sample ❖ sample06: Shared Web Workerͷجຊ ✓ Shared Web Workerͷجຊతͳ͍ํ
✓ ಛతಈ࡞ͷ֬ೝ ✓ جຊతͳϝοηʔδͷૹड৴
Sample ❖ sample07: BlobΛ༻͍ͨWorkerͷ࡞ ❖ sample08: BlobΛ༻͍ͨWorkerͷ࡞ʢ̎ʣ ✓ ෳͷWorkerΠϯελϯεੜʹ͍ͭͯ ✓
BlobΛ༻͍ͨWorkerͷ࡞ํ๏ʹ͍ͭͯ ✓ WorkerεΫϦϓτੜͱͷҧ͍ʹ͍ͭͯ
Sample ❖ sample09: Web WorkerͰJSONΛParse ❖ sample10: Web Worker &
FileReaderSync ✓ ΑΓ࣮ફతͳWorkerͷαϯϓϧ ✓ Web APIͷJSONϨεϙϯεΛॲཧ ✓ FileReaderSync APIͱͷ߹Θٕͤ
Story Behind “Instagram JS”
Sample ❖ ҎԼͷهࣄʹԊͬͯհ͠·͢ ✓ http://qiita.com/KENJU/items/78c0034d7e93fbe8f95a
UI Thread canvasͰϐΫηϧσʔλऔಘ
UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ
UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ ϥάϥϯδϡ ิؒͷܭࢉ ৽͍͠ ϐΫηϧσʔλ
UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ ϥάϥϯδϡ ิؒͷܭࢉ ৽͍͠ ϐΫηϧσʔλ
Result
Service Worker
Service Worker ❖ What? ❖ When? ❖ How? ❖ Sample
What? ❖ ϖʔδͷόοάάϥϯυͰಈ͘ɹɹ ΠϕϯτۦಈͷJavaScriptڥʣby @nhiroki_͞Μ
What? ❖ “Better AppCache” ❖ “ϒϥβHTTP Proxy” ❖ “Native AppͱWebͷGapΛຒΊΔ”
When? ❖ Offline ❖ Push௨ ❖ Backgroundॲཧ
Life-Cycle ❖ Install > Activate ❖ Activate͞ΕͨΒ దٓfetch http://www.html5rocks.com/en/tutorials/service-worker/introduction/
How? ❖ https·ͨlocalhostͰͷΈಈ࡞ ❖ ʮchrome://inspect/#service-workersʯ
Sample ❖ sample11: Service Workerͷجຊ ✓ Service Workerͷجຊతͳ͍ํ ✓ ىಈํ๏ɾσόοάํ๏
✓ جຊతͳϥΠϑαΠΫϧͷ֬ೝ
Further Reading ❖ http://dackdive.hateblo.jp/entry/2015/04/04/163234 ❖ http://www.html5rocks.com/en/tutorials/service-worker/introduction/ ❖ https://jakearchibald.com/2014/offline-cookbook/
Q&A
Appendix
ؔ࿈ࢿྉ ❖ Github : https://github.com/KENJU/techbuzz_htmljs_20150924 ❖ Wiki : https://github.com/KENJU/techbuzz_htmljs_20150924/wiki ❖
Slide : https://speakerdeck.com/kenju
͓͢͢Ίॻ੶ ❖ ։؟! JavaScript ―ݴޠ༷͔ΒֶͿJavaScriptͷຊ࣭ ❖ JavaScript: The Good Parts
❖ ΦϒδΣΫτࢦJavaScriptͷݪଇ ❖ JavaScriptύλʔϯ ―༏ΕͨΞϓϦέʔγϣϯͷͨΊͷ࡞๏ ❖ JavaScriptٯҾ͖Ϩγϐ jQueryରԠ (PROGRAMMER’S RECiPE) ❖ HTML5 Hacks ―ΠϯλϥΫςΟϒWebΞϓϦέʔγϣϯͷͨΊͷς ΫχοΫ