Webは今まさに面白い（オフライン編）

自分がWebについてワクワクしていることを共有したく話したLT資料です。第5回 HTML5 minutes！
https://atnd.org/events/59057

Transcript

1. 8FC͸ࠓ·͞ʹ໘ന͍ ΦϑϥΠϯฤ फఆ
   ༸ฏ @yoheiMune ג αΠόʔΤʔδΣϯτ
2. What is the weakness of the Web?
3. Weakness of the Web ✓ Slow Speed
 දࣔ଎౓΍ը໘ͷ੾ସɺϓϩάϥϜͷ࣮ߦ଎౓ͳͲ ✓ JavaScript Poor Functions
 Map΍Setͱ͍ͬͨجຊతͳίϨΫγϣϯ΋αϙʔτ͍ͯ͠ͳ͍ ✓ Restricted functionality
 ి࿩΍Χϝϥ΍ϚΠΫͳͲ࢖͑ͳ͍ػೳ͕·ͩ·ͩଟ͍ ✓ etc
4. Weakness of the Web ✓ Slow Speed
 දࣔ଎౓΍ը໘ͷ੾ସɺϓϩάϥϜͷ࣮ߦ଎౓ͳͲ ✓ JavaScript Poor Functions
 Map΍Setͱ͍ͬͨجຊతͳίϨΫγϣϯ΋αϙʔτ͍ͯ͠ͳ͍ ✓ Restricted functionality
 ి࿩΍Χϝϥ΍ϚΠΫͳͲ࢖͑ͳ͍ػೳ͕·ͩ·ͩଟ͍ ✓ etc
5. Web Apps are Slow
6. Web Apps are Slower
7. Web Apps are Slower than Native Apps
8. Why is the web slow?
9. Why is the web slow? Let’s focus on networking
10. Reason of slow web http://yoheim.net/index.html ͔ΒσʔλΛऔಘ͢Δ৔߹Λߟ͑Δ
11. Step1: DNS Lookup DNS Server What is “yoheim.net” ? 182.48.49.53 Progress
12. Step2: 3-way Handshake 182.48.49.53 (yoheim.net) ઀ଓ͍͍ͯ͠ʁ OK ͡Ό͋ΑΖ͘͠! Progress
13. Step3: Content Download yoheim.net GET /index.html Download Progress
14. Step4: Code Execution yoheim.net Progress )5.-ͷղੳͱ࣮ߦ
15. Reason of slow web DNS Lookup 3-way handshake Content Download Execution ϑΝΠϧ࣮ߦ͢Δʹ΋ͳ͔ͳ͔େมʂʂ
16. Reason of slow web html css javascript image 4MPX
17. ΋͠ΦϑϥΠϯػೳΛ࢖͑͹
18. Online vs Offline Online Offline ͱͬͯ΋଎͘ͳΔͧʂ
19. Available Offline Functionality ✓ HTML5 App Cacheʢ2008೥ʙʣ ✓ LocalStorage / SessionStorageʢ2009೥ʙʣ ✓ Navigator.onLine ✓ etc
20. HTML5 App Cache ✓ ϚχϑΣετϑΝΠϧΛॻ͚͹࢖͑ͯ؆୯ CACHE MANIFEST # Time: Thu Oct 02 2014 20:10:16 GMT+0900 (JST) CACHE: js/all.js css/all.css NETWORK: * manifest.appcache
21. HTML5 App Cache But…
22. Problems of HTML5 App Cache ✓ Ωϟογϡ؅ཧ͕ϒϥ΢β೚ͤ ✓ ్தͰΤϥʔ͕ى͖ͨ࣌ʹͲ͏͢Ε͹͍͍ͷ͔… ✓ indexϑΝΠϧ͕ඞͣΩϟογϡ͞ΕΔ
23. Service Worker is coming!
24. About Service Worker ✓ JavaScriptΛ༻͍ͨΩϟογϡίϯτϩʔϧ ✓ ։ൃऀ͕͖Ίࡉ΍͔ͳΩϟογϡ؅ཧ͕Ͱ͖Δ ✓ ϝΠϯεϨουҎ֎Ͱಈ࡞͢Δ
25. Register - Service Worker navigator .serviceWorker.register('/sw.js', { scope: '/' }).then(function(sw) { console.log('ॲཧ੒ޭ'); }).catch(function(error) { console.log('ॲཧࣦഊ'); });
26. Install - Service Worker this.addEventListener('install', function(event) { event.waitUntil( caches.create('v1').then(function(cache) { return cache.add( '/index.html', '/style.css', '/app.js', '/img/logo.svg' ); }) ); });
27. Use Cache - Service Worker this .addEventListener('fetch', function(event){ event.respondWith( caches.match(event.request); ); });
28. Service Worker is difficult, but magic!
29. Available Offline Functionality ✓ HTML5 App Cacheʢ2008೥ʙʣ ✓ LocalStorage / SessionStorageʢ2009೥ʙʣ ✓ Navigation.onLine ✓ Service Workerʢ2014೥ʙʣ
30. And more…
31. Weakness of the Web ✓ Slow Speed
 දࣔ଎౓΍ը໘ͷ੾ସɺϓϩάϥϜͷ࣮ߦ଎౓ͳͲ ✓ JavaScript Poor Functions
 Map΍Setͱ͍ͬͨجຊతͳίϨΫγϣϯ΋αϙʔτ͍ͯ͠ͳ͍ ✓ Restricted functionality
 ి࿩΍Χϝϥ΍ϚΠΫͳͲ࢖͑ͳ͍ػೳ͕·ͩ·ͩଟ͍ ✓ etc ΦϑϥΠϯ +BWB4DSJQUΤϯ δϯͷੑೳ61 8FC(- &$."4DSJQU 8FC
    $PNQPOFOUT $P⒎FF
    4DSJQU "VEJP
    
    7JEFP .FEJB
    $BQUVSF 8FC
    4QFFDI
    "1*
32. Weakness of the Web ✓ Slow Speed
 දࣔ଎౓΍ը໘ͷ੾ସɺϓϩάϥϜͷ࣮ߦ଎౓ͳͲ ✓ JavaScript Poor Functions
 Map΍Setͱ͍ͬͨجຊతͳίϨΫγϣϯ΋αϙʔτ͍ͯ͠ͳ͍ ✓ Restricted functionality
 ి࿩΍Χϝϥ΍ϚΠΫͳͲ࢖͑ͳ͍ػೳ͕·ͩ·ͩଟ͍ ✓ etc ΦϑϥΠϯ +BWB4DSJQUΤϯ δϯͷੑೳ61 8FC(- &$."4DSJQU 8FC
    $PNQPOFOUT $P⒎FF
    4DSJQU "VEJP
    
    7JEFP .FEJB
    $BQUVSF 8FC
    4QFFDI
    "1* 8FC͸ࠓ·͞ʹਐԽ͍ͯͯ͠໘ന͍ʂ
33. ະདྷ͸࡞Δ͜ͱ͕Ͱ͖Δ ✓ Join to Github / Publish your code
 Polymer, jQuery, Angular, … ✓ Join to Mailing List
 Service Worker, … ✓ Join to User Group
 HTML5j, Angular, ….
34. ະདྷ͸࡞Δ͜ͱ͕Ͱ͖Δ ✓ Join to Github / Publish your code
 Polymer, jQuery, Angular, … ✓ Join to Mailing List
 Service Worker, … ✓ Join to User Group
 HTML5j, Angular, …. ೔ຊ͔Βٕज़Λਐา͍ͤͨ͞
35. http://github.com/yoheiMune http://www.yoheim.net http://twitter.com/yoheiMune Thank you