unleash the future

of 133 /133
Unleash the Future Web Technologies and Web OS @ [email protected] by Tomoya Asai (dynamis)

Author: dynamis-

Post on 15-Jan-2015

1.175 views

Category:

Technology


1 download

Embed Size (px)

DESCRIPTION

「Web プラットフォームで創る未来」 HTML5とか勉強会 in Sendai 2014 で使用したスライド http://kokucheese.com/event/index/143144/

TRANSCRIPT

  • 1. ! Unleash the Future Web Technologies and Web OS @ [email protected] by Tomoya Asai (dynamis)

2. about:me 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI @ 4. topics: Internet of Things Smart Devices Web Platforms asm.js Firefox OS 5. Internet of Things 6. Internet of Things 2020 260 by Gartner 2020 500 by cisco 2020 2000 by Intel ! 7. Smart Devices 8. 2012 7 2013 10 2012 2848 2013 3031 9. CES/MWC 10. Web Web API HTML5 Web Web of Things... 11. Web Platforms 12. Web Web Platform Web HTML5 Firefox Device API Opera 13. Web Firefox PC/Android Web Chrome PC Web Chrome Apps API Firefox API Web 14. Standalone Web App Firefox Chrome Web Chrome Apps Firefox Apps 15. Web OS OS Web Firefox OS, Chrome OS, Tizen IVI, webOS Web Windows 8, Tizen Mobile 16. Web OS Firefox OS OS UI Web Chrome OS PNaCl Web webOS TV SDK Web Tizen IVI (!= Tizen Mobile) Intel IVI Web : Mobile Tizen API 17. Web OS Firefox OS, Tizen Mobile, Chrome? ... Firefox OS, webOS, Tizen TV? ... Chrome OS, Firefox OS ... Tizen IVI, QNX (BlackBerry) ... 18. Web OS W3C http://www.w3.org/Consortium/activities.html 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. Web of Sensors 29. Web OS Chrome OS 2011/05 2013 PC 20% Firefox OS 2013/07 15 Uruguay Movistar - 30% 30. Web OS webOS LG OSS Tizen IVI, QNX (Blackberry)... OS Tizen Mobile 31. webOS TV LG 70% 32. webOS TV LG 70% 33. webOS TV LG 70% 34. webOS TV LG 70% 35. webOS SDK () CES 2 http://connectsdk.com/comingsoon 36. Tizen @ MWC 2014 37. Tizen @ MWC 2014 38. Tizen @ MWC 2014 Samsung docomo () 39. Web OS 2013 Chrome OS Firefox OS 2014 Firefox OS webOS 40. Web Capability 41. Web Platform API Java 42. Bluetooth USB 43. Semantic Elements Multi Media HTML5 Forms Oine SupportHTML5HTML5 Parser Mouse, Key ev. XHTML5 WAI- ARIA W3C 44. Semantic Elements Multi Media Canva s HTML5 Forms Oine Support Micro- Data Server- Sent ev. Web Sockets Web Storage HTML5HTML5 Parser Mouse, Key ev. XHTML5 Web Workers Web Messag- ing WAI- ARIA W3C WHATWG HTML 45. Semantic Elements Multi Media Canva s HTML5 Forms Oine Support Micro- Data Server- Sent ev. Web Sockets Web Storage Layou t Media Queries HTML5 CSS3~Trans form Anim ation Region s Filters HTML5 Parser Mouse, Key ev. XHTML5 Web Workers Web Messag- ing WAI- ARIA W3C WHATWG HTML 46. Semantic Elements Multi Media Canva s HTML5 Forms Oine Support Micro- Data WebG L Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAP I Web Storage XHR2 Math ML Layou t Media Queries HTML5 CSS3~Trans form Anim ation Region s Filters HTML5 Parser Mouse, Key ev. ECMA Script CSP SPDY XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion XPath RSS OGP WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF HTML DNT 47. Semantic Elements Multi Media Canva s HTML5 Forms Oine Support Webm H.264 Micro- Data WebG L Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAP I Web Storage XHR2 Math ML Web Audio Layou t Media Queries HTML5 CSS3~Trans form Anim ation Region s Filters HTML5 Parser Mouse, Key ev. Opus ECMA Script ECMA 6th USB CSP SPDY WebC L Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Noti- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT Flex Box 48. http://www.w3.org/2009/dap/ 49. http://www.w3.org/2009/dap/ 50. http://www.w3.org/2012/sysapps/ 51. http://www.w3.org/2012/sysapps/ 52. Web ( ...) SMS ... 53. TV API W3C TV Web API 54. Desktop as a Service OctaneCloud AMIs on AWS 2013/01 Mozilla, Amazon AWS GPU ORBX.js VMware Horizon View 2014/02 Google Chromebook DaaS OS 55. asm.js 56. : Unreal Engine 3 100 C & OpenGL 4 5 LLVM + Emscripten JavaScript (asm.js) epic CITADEL http://www.unrealengine.com/html5/ 57. asm.js JavaScript JavaScript JIT "use asm" "Fast Parts" () http://asmjs.org/ 58. asm.js http://asmjs.org/spec/latest/ 59. asm.js (Annotation) JavaScript TypedArray C C http://asmjs.org/ 60. asm.js Web Native CrankShaft IonMonkey SSA JIT () ams.js JIT/GC "Fast Parts" ams.js http://asmjs.org/ 61. C () 2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19 62. C (asm.js) asm.js C 2 (Java C# ) 2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19 63. : Box2D Box2D C 2 ! Chrome IE JS asm.js Box2DWeb ! Java CrossBridge (Flash C++ Compiler) 2013/07 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/8 64. C (asm.js) asm.js JavaScript C 2013/09 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/7 65. C C (clang) 1.5 C (clan) < JavaScript (asm.js) < C (gcc) 2013/12 - https://hacks.mozilla.org/2013/12/gap-between-asm-js-and-native- performance-gets-even-narrower-with-float32-optimizations/ 66. asm.js CoffeeScript TypeScript 2006 GWT Emscripten http://mozakai.blogspot.jp/2013/06/what-asmjs-is-and-what-asmjs-isnt.html 67. asm.js x = x0 (SunSpider crypto ) JIT Firefox 3 Chrome http://mozakai.blogspot.jp/2013/06/what-asmjs-is-and-what-asmjs-isnt.html 68. asm.js asm.js JIT (CrankShaft IonMonkey) asm.js JavaScript TypedArray Emscripten Mozilla http://mozakai.blogspot.jp/2013/06/what-asmjs-is-and-what-asmjs-isnt.html 69. asm.js "use asm" AOT AOT () AOT ES6 Math.imul 32bit () Polyll asm.js http://mozakai.blogspot.jp/2013/06/what-asmjs-is-and-what-asmjs-isnt.html 70. asm.js PNaCl C++ Web HTML5 JS asm.js PNaCl JS asm.js http://mozakai.blogspot.jp/2013/06/what-asmjs-is-and-what-asmjs-isnt.html 71. Faster JavaScript 72. asm.js C AOT JavaScript SIMD 4 300% 73. Math.fround SM, JSC, v8 https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/fround 74. Math.fround ! ! https://blog.mozilla.org/javascript/2013/11/07/efficient-float32-arithmetic-in- 75. CPU oat32/oat64 oat32 x = 1024, y = 0.0001, z = 1024, (x+y)+z 76. Math.fround Math.fround 60% https://blog.mozilla.org/javascript/2013/11/07/efficient-float32-arithmetic-in-javascript/ 0% 15% 30% 45% 60% Matrix Inversions Matrix Graphics Exponential Fast Fourier Transfrom Desktop (x86) Nexus 10 Nexus 4 Galaxy S3 77. Math.imul C 32bit https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/imul 78. SIMD Module 128bit SIMD TypedArray oat32x4, uint32x4 Float32x4Array, Int32x4Array TypedArray Intel, Google, Mozilla 79. SIMD CPU 1 IA32/X64 MMX/SSE ARMv7 NEON CPU http://wiki.ecmascript.org/doku.php?id=strawman:simd_number 80. SIMD ! https://github.com/johnmccutchan/ecmascript_simd 81. Conclusion JavaScript Fast Parts C JavaScript 82. Always bet on JavaScript! 83. Firefox OS 84. Line Android Flappy Bird 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. Firefox OS : Tizen : Android Web Native Framework & HAL Web Platform Web Framework App Framework Android Runtime Dalvik WebKit Java Native Library Web WebKit Web Native OS etc.. DeviceAPI WebRT Web Packaged Web Gecko DeviceAPI SystemAPI Web SGL etc. Native Interface & HAL & HAL X.org etc. 95. ! 21 KDDI, Telefnica, Deutsche TelekomTelenor... Qualcomm, ARM, Spreadtrum ZTE, Alcatel, LG, Huawei, Sony Foxconn, Panasonic... 96. MWC 2014 21 SoC 97. MWC 2014 21 SoC 98. $25 Spreadtrum 3 SoC Firefox OS $25 99. $25 Spreadtrum 3 SoC Firefox OS $25 100. 15 TelefnicaDeutsche Telekom TelenorTelecom Italia 2014 02 101. Firefox OS Telefnica ([email protected]/10) 12% ([email protected]/10) 9% ([email protected]/12) 30% 102. Mozilla 2013 50 75 2014 6 10 ZTE 2014 100 103. MWC 12 30 2014 02 104. Foxconn Panasonic VIA 105. Firefox OS 3 ZTE Open Alcatel One Touch Fire LG Fireweb PC Geeksphone Keon/Peak APC (VIA) Paper/Rock 2013 12 106. ! ZTE Open : Size: 114 x 62 x 12.5 mm Display: 3.5 inch HVGA CPU: MSM7225A 1 GHz (Cortex-A5, Adreno 200) RAM: 256 MB ROM: 512 MB http://www.ztedevices.com/product/smart_phone/2bcf2d56-0c9a-4129-a25c-acce58c8e502.html 107. ! Alcatel One Touch Fire : Size: 115 x 62.3 x 12.2 mm Display: 3.5 inch HVGA CPU: MSM7227A 1 GHz (Cortex-A5, Adreno 200) RAM: 256 MB ROM: 512 MB http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html 108. LG Fireweb (D300) : Size: 113.8 x 66.5 x 9 mm Display: 4 inch HVGA CPU: 1 GHz () Memory: 2 GB (4GB) http://www.vivo.com.br/firefoxos/ 109. VIA - APC Paper / Rock Firefox OS PC CPU: Cortex-A9 900MHz $59 $99 HDMI Raspberry Pi Android PC Firefox OS 110. Firefox OS 7 Huawei Y300 ZTE Open II, C Alcatel One Touch Fire C, E, S, 7 Flame VIA / Foxconn 2013 12 111. ! Firefox OS Flame () : Display: 4.5 inch FWVGA CPU: MSM8210 Dual 1.2 GHz (Cortex-A7, Adreno 302) RAM: 256 MB 1GB () ROM: 8 GB NFC, BT4, Dual SIM 112. ZTE Open C : Display: 4 inch WVGA CPU: MSM8210 Dual 1.2 GHz (Cortex-A7, Adreno 302) RAM: 512 MB ROM: 4 GB ! 113. ! Alcatel One Touch Fire C : Display: 3.5 inch HVGA CPU: Dual 1.2 GHz RAM: 512 MB ROM: 2 GB ! 114. ! Alcatel One Touch Fire S : Display: 4.5 inch qHD CPU: Quad 1.2 GHz LTE ! 115. Future of Mobile Privacy Deutsche Telekom Mozilla Privacy Panel Location Blur Guest Mode Find My Fox etc... 116. 117. Web 118. For More Info 119. Firefox OS http://FxOS.org http://FxOS.org/ml (Google Group : https:// groups.google.com/group/refoxos) 120. Firefox OS Firefox OS Gecko FxOS Firefox OS ABC, DevSumi 2~3 121. ! FxOS Meetup 3/14 () 19:3022:00 Mozilla http://atnd.org/events/47848 ! 122. Firefox OS 3/15 () 13:0017:00 Mozilla http://atnd.org/events/47737 @chikoski 123.