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
88
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
CSC305 Lecture 06
javiergs
PRO
0
240
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
880
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
160
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
XP, Testing and ninja testing ZOZ5
m_seki
3
670
株式会社 Sun terras カンパニーデック
sunterras
0
320
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6k
Introduce Hono CLI
yusukebe
2
790
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Thoughts on Productivity
jonyablonski
70
4.9k
Writing Fast Ruby
sferik
629
62k
Designing for Performance
lara
610
69k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Automating Front-end Workflow
addyosmani
1371
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Designing Experiences People Love
moore
142
24k
Mobile First: as difficult as doing things right
swwweet
224
10k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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ΞϓϦέʔγϣϯͷͨΊͷς ΫχοΫ