1. Things that become
possible with HTML5
Atsuya Takagi

2. Introduction
• (@atsuya)
• M.S. in computer science from California
State University, Northridge
• book on node
• http://about.me/atsuya

13. Motion with CSS
• http://www.htmlfivewow.com/slide42

14. 3D transforms with
CSS
• http://www.htmlfivewow.com/slide44

15. Canvas
• http://www.htmlfivewow.com/slide47

16. 2D Canvas
• http://www.htmlfivewow.com/slide49

17. WebGL
• http://www.htmlfivewow.com/slide51
• http://www.htmlfivewow.com/slide52

20. Audio
• http://www.htmlfivewow.com/slide57

21. Play Sound
• http://www.htmlfivewow.com/slide59

22. Generate Sound
• http://www.htmlfivewow.com/slide60

23. Realtime Audio Analysis
• http://www.htmlfivewow.com/slide64

26. File
• http://www.htmlfivewow.com/slide17

27. Directory
• http://www.htmlfivewow.com/slide18

28. Drag and Drop
• http://www.htmlfivewow.com/slide19

29. FileReader
• http://www.htmlfivewow.com/slide23

30. Blob URL
• http://www.htmlfivewow.com/slide25

31. File System
• http://www.htmlfivewow.com/slide29

32. File System Access
• http://www.htmlfivewow.com/slide30

35. file transferring

38. file transferring
using browsers

41. actual P2P

42. but Flash sucks

44. tensoid

45. Demo

47. not actual P2P

48. but it rocks

49. Inside tensoid
• file API to read file
• websocket for send/receive
• node as connection hub

50. Inside tensoid
• file API to read file
• websocket for send/receive
• node as connection hub

51. Websocket
• bi-directional, full-duplex
• browser initiates connection to server
• server can push anytime
• no polling. it’s realtime.

52. Websocket in tensoid
• all communications regarding file transfer
• send/receive base64 encoded data
• some traffic control

53. Inside tensoid
• file API to read file
• websocket for send/receive
• node as connection hub

54. Inside tensoid
• file API to read file
• websocket for send/receive
• node as connection hub

55. TM
• single threaded, event loop, non-blocking
server framework
• every api call is asynchronous
• write server code in javascript

56. TM

57. Node in tensoid
• all server side stuff
• websocket talks to node
• receive data from sender, transfer that data
to receiver

58. Detail of tensoid
• listen to file drag and drop
• notify node about file is ready
• node records sender’s session id
• node sends back the url

59. Detail of tensoid
• receiver accesses the url
• notify node to start transferring
• node notifies sender to start
• sender sends data, node receives it, node
sends it to receiver
• sender notifies when it’s done

60. Conclusion
• html5 rocks
• a lot of existing web applications has
already adapted
• so many things you can do with it
• tensoid is just one of them

61. Resources
• http://www.html5rocks.com
• http://www.htmlfivewow.com/
• http://nodejs.org/
• http://socket.io/
• https://github.com/atsuya/tensoid

62. Thank you!