Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Is WebAssembly the killer of JavaScript?

1 949 vues

Publié le

The talk I gave at Codemotion Milan about the future of JavaScript and how the new WebAssembly project will coexist with it.

Publié dans : Internet
  • I would like to write in my indentation-based syntax and compile it to WebAssemby like CoffeeScript guys https://gist.github.com/jiyinyiyong/0fc58e2ed7c641973d9b
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Is WebAssembly the killer of JavaScript?

  1. 1. Is WebAssembly the killer of JavaScript? Boyan Mihaylov @bmihaylov Codemotion Milan 2015
  2. 2. Birth of JavaScript @bmihaylov | Codemotion Milan 2015 2 1995 Created by Brendan Eich in 10 days and released in Netscape Navigator 2.0
  3. 3. Microsoft hits back @bmihaylov | Codemotion Milan 2015 4 19961995 Microsoft releases JScript in IE3
  4. 4. Becoming a standard @bmihaylov | Codemotion Milan 2015 5 The first edition of ECMA-262 is released 199719961995
  5. 5. photo: engineering.wix.com 2007-2008199719961995
  6. 6. @bmihaylov | Codemotion Milan 2015 7 The jQuery era
  7. 7. JavaScript goes server-side @bmihaylov | Codemotion Milan 2015 8
  8. 8. JavaScript conquers the world @bmihaylov | Codemotion Milan 2015 9 JavaScript source: github.com
  9. 9. Module counts @bmihaylov | Codemotion Milan 2015 10 source: www.modulecounts.com
  10. 10. Mobile apps @bmihaylov | Codemotion Milan 2015 11
  11. 11. JavaScript is everywhere, but… @bmihaylov | Codemotion Milan 2015 12
  12. 12. We are compiling to JavaScript @bmihaylov | Codemotion Milan 2015 13 JavaScript C# (Script#) Java (GWT) TypeScript CoffeeScript C/C++
  13. 13. @bmihaylov | Codemotion Milan 2015 14 C/C++ emscripten .js .js + .html Node.js Web Browser
  14. 14. Hello, world @bmihaylov | Codemotion Milan 2015 15 #include<stdio.h> int main() { printf("Welcome to Codemotion"); return 0; } function _main() { var $0 = 0, $vararg_buffer= 0, label = 0, sp = 0; sp = STACKTOP; STACKTOP = STACKTOP + 16|0; if ((STACKTOP|0) >= (STACK_MAX|0)) abort(); $vararg_buffer = sp; $0 = 0; (_printf((8|0),($vararg_buffer|0))|0); STACKTOP = sp; return 0; } 1 KB 372 KB
  15. 15. Mozilla and Epic ported Unreal Engine 3 to the Web in 4 days https://www.youtube.com/watch?v=XsyogXtyU9o
  16. 16. Meet asm.js Started by Mozilla in 2013 A subset of JavaScript to compile very fast We know the types, rather than infer them on runtime Enables ahead-of-time (AOT) compilation @bmihaylov | Codemotion Milan 2015 17
  17. 17. asm.js examples @bmihaylov | Codemotion Milan 2015 18 function Circle(stdlib,foreign, heap) { "use asm"; var pi = +stdlib.Math.PI; function area(r) { r = r | 0; return +(pi * r * r); } return { area: area }; } // create and initialize the heap (64k) var heap = new ArrayBuffer(0x10000); init(heap, START, END); // produce exports object, // linked to AOT-compiledcode var circle = Circle(window, null, heap); // calculatethe area of a circle circle.area(31);
  18. 18. Performance @bmihaylov | Codemotion Milan 2015 19 0 2 4 6 8 10 12 14 16 18 20 bullet zlib skinning Firefox Chrome Firefox+asm.js Native source: http://kripken.github.io/mloc_emscripten_talk/#/28
  19. 19. Issues with asm.js @bmihaylov | Codemotion Milan 2015` 20 Once VMs optimize for it, the parser becomes the bottleneck We may want to do some things different than JavaScript allows us It is backed-up only by Mozilla (so far)
  20. 20. WebAssembly photo: www.onyxtruth.com
  21. 21. What is WebAssembly? @bmihaylov | Codemotion Milan 2015 22 Improvement to JavaScript and the browser A new language Short name is wasm Compilation target from other languages
  22. 22. Collaborative effort @bmihaylov | Codemotion Milan 2015 23 + many others… WebAssembly
  23. 23. WebAssembly is not bytecode @bmihaylov | Codemotion Milan 2015 24 Bytecode is linear and stack-, register-, or SSA-based WebAssembly is binary representation of an AST WebAssembly is not versioned WebAssembly will probably lead to universal VM
  24. 24. Abstract syntax tree @bmihaylov | Codemotion Milan 2015 25
  25. 25. Text format vs. Binary encoding View source of a WebAssembly module Browser developer tools (when no source maps exist) Browsers will NOT parse it Serialized version of the text format The main format used by browsers Custom-tailored compression
  26. 26. A possible syntax @bmihaylov | Codemotion Milan 2015 27 (module (memory1024 (segment 0 "abcdefghijklmnopqrstuvwxyz")) (import $print "stdio" "print" (param i32)) (func $good (param $i i32) (call_import $print (i32.load8_u offset=0(get_local $i))) :: 97 'a' (call_import $print (i32.load8_u offset=1(get_local $i))) :: 98 'b' (call_import $print (i32.load8_u offset=2 (get_local $i))) :: 99 'c' (call_import $print (i32.load8_u offset=25(get_local $i))) :: 122 'z‘ ) (export "good" $good) (assert_return(invoke "good" (i32.const 0))) )
  27. 27. How to produce WebAssembly @bmihaylov | Codemotion Milan 2015 28 Produce binary output programmatically Write code manually using the textual representation Compile it from another language
  28. 28. WebAssembly is sandboxed photo: thenextweb.com
  29. 29. asm.js vs WebAssembly 19 6.3 4.1 3 asm.js WebAssembly Angry Bots demo MBs MBs (compressed) http://beta.unity3d.com/jonas/AngryBots/
  30. 30. WebAssembly today @bmihaylov | Codemotion Milan 2015 31 Use emscripten to produce it Stay as close as possible to asm.js Uses a polyfill to run in the browser Is in a prototype phase
  31. 31. JavaScript will survive photo: deviantart.net
  32. 32. WebAssembly is a new feature @bmihaylov | Codemotion Milan 2015 33 WebAssembly JavaScript Bytecode Machine code
  33. 33. WebAssembly and JavaScript @bmihaylov | Codemotion Milan 2015 34 WebAssembly JavaScript Games, video & image decoders, etc. External libraries (f.x., C/C++)
  34. 34. The future of WebAssembly @bmihaylov | Codemotion Milan 2015 35 Focus on compilation from C/C++ Debug WebAssembly via the source code used to produce it Mainly low-level computations Single Instruction, Multiple Data (SIMD)
  35. 35. @bmihaylov | Codemotion Milan 2015 36 WebAssembly fills in the gaps that would be awkward to fill with JavaScript. Eric Elliott “ ” photo: www.adafruit.com
  36. 36. @bmihaylov | Codemotion Milan 2015 37 We think Swift should be everywhere and used by everyone. Craig Federighi Apple’sWWDC 2015 “ ”
  37. 37. @bmihaylov | Codemotion Milan 2015 38
  38. 38. 39 Grazie, Milano! hey@boyan.in @bmihaylov After party @bmihaylov | Codemotion Milan 2015

×