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
890
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
0
220
Kafka on Kubernetes with Strimzi
kenju
0
170
AWS DynamoDB Accelerator (DAX) 101
kenju
2
7.2k
Moden browser introduction
kenju
1
420
Cookpad summer internship 2019 - API
kenju
0
10k
Introduction to Design Patterns
kenju
0
87
GraphQL Asia 2019 "Re-architecture of a decade-old app with BFF/GraphQL"
kenju
0
9k
Introduction to TypeScript
kenju
0
740
Introduction to Programmatic Ad
kenju
0
260
Other Decks in Programming
See All in Programming
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
CSC305 Lecture 01
javiergs
PRO
1
390
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
510
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.5k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
440
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
930
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
890
dynamic!
moro
9
6k
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
1k
Le côté obscur des IA génératives
pascallemerrer
0
120
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
140
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Context Engineering - Making Every Token Count
addyosmani
4
170
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
How to Ace a Technical Interview
jacobian
280
23k
The World Runs on Bad Software
bkeepers
PRO
71
11k
How to train your dragon (web standard)
notwaldorf
96
6.3k
What's in a price? How to price your products and services
michaelherold
246
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Visualization
eitanlees
148
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
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ΞϓϦέʔγϣϯͷͨΊͷς ΫχοΫ