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
210
Kafka on Kubernetes with Strimzi
kenju
0
150
AWS DynamoDB Accelerator (DAX) 101
kenju
2
7.1k
Moden browser introduction
kenju
1
400
Cookpad summer internship 2019 - API
kenju
0
10k
Introduction to Design Patterns
kenju
0
81
GraphQL Asia 2019 "Re-architecture of a decade-old app with BFF/GraphQL"
kenju
0
8.9k
Introduction to TypeScript
kenju
0
720
Introduction to Programmatic Ad
kenju
0
260
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
190
Benchmark
sysong
0
270
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
480
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Side Projects
sachag
455
42k
Done Done
chrislema
184
16k
Six Lessons from altMBA
skipperchong
28
3.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Why Our Code Smells
bkeepers
PRO
337
57k
Writing Fast Ruby
sferik
628
61k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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ΞϓϦέʔγϣϯͷͨΊͷς ΫχοΫ