Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Is WebAssembly the killer of JavaScript?

1,952 views

Published on

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

Published in: 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×