TechBuzz 第17回 HTML5+JS 講演資料

https://github.com/KENJU/techbuzz_htmljs_20150924

Transcript

1. Web Workers +α Kenju Wagatsuma
2. Agenda ❖ 3m : Self Introduction ❖ 8m : Web Worker / Shared Worker ❖ 8m : Story Behind “Instagram JS” ❖ 6m : Service Worker ❖ 5m : Q&A
3. Goal ❖ 1 : ʰWeb Worker APIͷجຊͷ࢖͍ํΛ ஌Δ͜ͱʱ ❖ 2: ʰࣄྫΛ௨ͯ͠Web Worker APIͷɹ ࣮ફྫͱԠ༻ํ๏ʹ͍ͭͯ஌Δʱ
4. Self Introduction
5. Self Introduction ❖ Career ❖ Hobby ❖ ʰࠓिಡΜͩຊʱ
6. Career ❖ 2011 : Graphic Designer ( PS, AI, ID ) ❖ 2013 : Web Designer ( HTML, CSS, jQuery) ❖ 2014 : Web Engineer ( + JS - Coffee, Node ) ❖ 2015 : Programmer ( + Java/Android, Linux )
7. Recent Keywords ❖ Atom ❖ Electron ❖ Node v4
8. Hobby ❖ PENTATONIX ❖ Beatbox ❖ + Guitar
9. ʰࠓिಡΜͩຊʱ “Soft Skills” ❖ AmazonόΧചΕ ❖ ࠓि΄ͬͯΜͱΓ ❖ ୯ͳΔϓϩάϥϚ͔Βͷ୤٫
10. Web Worker / Shared Worker
11. Web Worker / Shared Worker ❖ What? ❖ When? ❖ How? ❖ Sample
12. What? ❖ JSͰϚϧνεϨουॲཧΛ࣮ݱ͢Δɹ ͨΊͷHTML5ͷ࢓༷ ❖ ಠࣗͷάϩʔόϧείʔϓΛ࣋ͭ
13. UI Thread DOM Event Listeners window object
14. UI Thread Worker Thread Create
15. UI Thread Worker Thread Create Message
16. UI Thread Worker Thread Create Message Result
17. UI Blocking... ❖ jQueryೖΕ͗ͯ͢ը໘͕ͪΒ͖ͭ͗͢ɻɻɻ ❖ εΫϩʔϧ͕΋ͬ͞Γɻɻɻ ❖ Animation͕શવεϜʔζ͡Όͳ͍ɻɻɻ
18. UI Thread jQueryඳը
19. UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ
20. UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ JSONϨεϙϯεղੳ
21. UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ JSONϨεϙϯεղੳ σʔλՃ޻
22. Non-Blocking! ❖ JavaScript͸γϯάϧεϨου ❖ UIεϨουͱผͷεϨου͕͋Ε͹͍͍ ❖ DOMૢ࡞ͱܭࢉॲཧͷ෼཭
23. UI Thread Worker Thread Create jQueryඳը
24. UI Thread Worker Thread Create jQueryඳը JSON ղੳ σʔλ Ճ޻ εΫϩʔϧ Ґஔܭࢉ
25. UI Thread Worker Thread Create jQueryඳը JSON ղੳ σʔλ Ճ޻ εΫϩʔϧ Ґஔܭࢉ Result
26. When? ❖ CanvasΛ༻͍ͨը૾ॲཧ ❖ σʔλͷϓϦϩʔυ ❖ ಈը΍Ի੠ͷղੳॲཧ ❖ ΩϟογϡΛ༻͍ͨॲཧ ❖ JSON΍จࣈྻͷॲཧ ❖ IndexedDBΛ༻͍ͨॲཧ ❖ ෳࡶͳ҉߸Խ ❖ εϖϧνΣοΫͳͲͷߏจղੳ ❖ Location API΍Local Storage APIͱͷԠ༻
27. How? ❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ੒ ❖ 2: postMessage()ͰϝοηʔδΛૹΔ ❖ 3: WorkerଆͰड͚औͬͨϝοηʔδΛ ΋ͱʹॲཧΛߦ͏ ❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ
28. ❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ੒
29. ❖ 2: postMessage()ͰϝοηʔδΛૹΔ
30. ❖ 3: WorkerଆͰड͚औͬͨϝοηʔδΛ ΋ͱʹॲཧΛߦ͏
31. ❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ
32. http://www.codeproject.com/Articles/429123/Web-Workers
33. Sample ❖ sample01: 2ͷ50৐ͷܭࢉ ❖ sample02: 10ສ·Ͱͷ͏ͪ࠷େͷૉ਺ͷ୳ࡧ ❖ sample03: 2ͷn৐ͷܭࢉʢn͸೚ҙʣ ✓ Web Workerͷجຊతͳϓϩηε ✓ Πϯελϯεੜ੒ ✓ WorkerεϨουͷॲཧ ✓ ϝοηʔδૹ৴ɾड৴
34. Sample ❖ sample04: จࣈྻΧ΢ϯτ ✓ ୯ମͷม਺Ҏ֎ͷσʔλͷड͚౉͠ ✓ WorkerͰΦϒδΣΫτʢJSONʣΛड͚౉͢
35. Sample ❖ sample05: ը૾ॲཧ ✓ ޙड़
36. Shared Worker? ❖ ҰͭͷWorkerεϨουΛෳ਺WindowؒͰڞ༗ ❖ WorkerεϨου = άϩʔόϧείʔϓ ❖ ੜ੒ํ๏͸Web Workerͱಉ͡ ❖ Ұ౓ࡦఆ͔Β֎͞Εɺࡢ೥࠶౓࠾༻͞Εͨɹ ͱ͍͏ܦҢ͕͋Δ
37. Sample ❖ sample06: Shared Web Workerͷجຊ ✓ Shared Web Workerͷجຊతͳ࢖͍ํ ✓ ಛ௃తಈ࡞ͷ֬ೝ ✓ جຊతͳϝοηʔδͷૹड৴
38. Sample ❖ sample07: BlobΛ༻͍ͨWorkerͷ࡞੒ ❖ sample08: BlobΛ༻͍ͨWorkerͷ࡞੒ʢ̎ʣ ✓ ෳ਺ͷWorkerΠϯελϯεੜ੒ʹ͍ͭͯ ✓ BlobΛ༻͍ͨWorkerͷ࡞੒ํ๏ʹ͍ͭͯ ✓ WorkerεΫϦϓτੜ੒ͱͷҧ͍ʹ͍ͭͯ
39. Sample ❖ sample09: Web WorkerͰJSONΛParse ❖ sample10: Web Worker & FileReaderSync ✓ ΑΓ࣮ફతͳWorkerͷαϯϓϧ ✓ Web APIͷJSONϨεϙϯεΛॲཧ ✓ FileReaderSync APIͱͷ߹Θٕͤ
40. Story Behind “Instagram JS”
41. Sample ❖ ҎԼͷهࣄʹԊͬͯ঺հ͠·͢ ✓ http://qiita.com/KENJU/items/78c0034d7e93fbe8f95a
42. UI Thread canvasͰϐΫηϧσʔλऔಘ
43. UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ
44. UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ ϥάϥϯδϡ ิؒͷܭࢉ ৽͍͠ ϐΫηϧσʔλ
45. UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ ϥάϥϯδϡ ิؒͷܭࢉ ৽͍͠ ϐΫηϧσʔλ Result
46. Service Worker
47. Service Worker ❖ What? ❖ When? ❖ How? ❖ Sample
48. What? ❖ ϖʔδͷόοάάϥ΢ϯυͰಈ͘ɹɹ ΠϕϯτۦಈͷJavaScript؀ڥʣby @nhiroki_͞Μ
49. What? ❖ “Better AppCache” ❖ “ϒϥ΢β಺HTTP Proxy” ❖ “Native AppͱWebͷGapΛຒΊΔ”
50. When? ❖ Offline ❖ Push௨஌ ❖ Backgroundॲཧ
51. Life-Cycle ❖ Install > Activate ❖ Activate͞ΕͨΒ దٓfetch http://www.html5rocks.com/en/tutorials/service-worker/introduction/
52. How? ❖ https·ͨ͸localhostͰͷΈಈ࡞ ❖ ʮchrome://inspect/#service-workersʯ
53. Sample ❖ sample11: Service Workerͷجຊ ✓ Service Workerͷجຊతͳ࢖͍ํ ✓ ىಈํ๏ɾσόοάํ๏ ✓ جຊతͳϥΠϑαΠΫϧͷ֬ೝ
54. 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/
55. Q&A
56. Appendix
57. ؔ࿈ࢿྉ ❖ Github : https://github.com/KENJU/techbuzz_htmljs_20150924 ❖ Wiki : https://github.com/KENJU/techbuzz_htmljs_20150924/wiki ❖ Slide : https://speakerdeck.com/kenju
58. ͓͢͢Ίॻ੶ ❖ ։؟! JavaScript ―ݴޠ࢓༷͔ΒֶͿJavaScriptͷຊ࣭ ❖ JavaScript: The Good Parts ❖ ΦϒδΣΫτࢦ޲JavaScriptͷݪଇ ❖ JavaScriptύλʔϯ ―༏ΕͨΞϓϦέʔγϣϯͷͨΊͷ࡞๏ ❖ JavaScriptٯҾ͖Ϩγϐ jQueryରԠ (PROGRAMMER’S RECiPE) ❖ HTML5 Hacks ―ΠϯλϥΫςΟϒWebΞϓϦέʔγϣϯͷͨΊͷς ΫχοΫ