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?
Boyan Mihaylov
@bmihaylov
Codemotion Milan 2015
Birth of JavaScript
@bmihaylov | Codemotion Milan 2015 2
1995
Created by Brendan Eich
in 10 days and released
in Netscape ...
Microsoft hits back
@bmihaylov | Codemotion Milan 2015 4
19961995
Microsoft releases
JScript in IE3
Becoming a standard
@bmihaylov | Codemotion Milan 2015 5
The first edition of
ECMA-262 is released
199719961995
photo: engineering.wix.com
2007-2008199719961995
@bmihaylov | Codemotion Milan 2015 7
The jQuery era
JavaScript goes server-side
@bmihaylov | Codemotion Milan 2015 8
JavaScript conquers the world
@bmihaylov | Codemotion Milan 2015 9
JavaScript
source: github.com
Module counts
@bmihaylov | Codemotion Milan 2015 10
source: www.modulecounts.com
Mobile apps
@bmihaylov | Codemotion Milan 2015 11
JavaScript is everywhere, but…
@bmihaylov | Codemotion Milan 2015 12
We are compiling to JavaScript
@bmihaylov | Codemotion Milan 2015 13
JavaScript
C# (Script#)
Java (GWT)
TypeScript
CoffeeS...
@bmihaylov | Codemotion Milan 2015 14
C/C++ emscripten
.js
.js + .html
Node.js
Web Browser
Hello, world
@bmihaylov | Codemotion Milan 2015 15
#include<stdio.h>
int main() {
printf("Welcome to Codemotion");
return ...
Mozilla and Epic ported Unreal Engine 3 to the Web in 4 days
https://www.youtube.com/watch?v=XsyogXtyU9o
Meet asm.js
Started by Mozilla in 2013
A subset of JavaScript to compile very fast
We know the types, rather than infer th...
asm.js examples
@bmihaylov | Codemotion Milan 2015 18
function Circle(stdlib,foreign, heap) {
"use asm";
var pi = +stdlib....
Performance
@bmihaylov | Codemotion Milan 2015 19
0 2 4 6 8 10 12 14 16 18 20
bullet
zlib
skinning
Firefox Chrome Firefox+...
Issues with asm.js
@bmihaylov | Codemotion Milan 2015` 20
Once VMs optimize for it, the parser becomes the bottleneck
We m...
WebAssembly
photo: www.onyxtruth.com
What is WebAssembly?
@bmihaylov | Codemotion Milan 2015 22
Improvement to JavaScript and the browser
A new language
Short ...
Collaborative effort
@bmihaylov | Codemotion Milan 2015 23
+
many others…
WebAssembly
WebAssembly is not bytecode
@bmihaylov | Codemotion Milan 2015 24
Bytecode is linear and stack-, register-, or SSA-based
W...
Abstract syntax tree
@bmihaylov | Codemotion Milan 2015 25
Text format vs. Binary encoding
View source of a
WebAssembly module
Browser developer tools
(when no source maps exist)
Br...
A possible syntax
@bmihaylov | Codemotion Milan 2015 27
(module
(memory1024 (segment 0 "abcdefghijklmnopqrstuvwxyz"))
(imp...
How to produce WebAssembly
@bmihaylov | Codemotion Milan 2015 28
Produce binary output programmatically
Write code manuall...
WebAssembly is sandboxed
photo: thenextweb.com
asm.js vs WebAssembly
19
6.3
4.1
3
asm.js WebAssembly
Angry Bots demo
MBs
MBs (compressed)
http://beta.unity3d.com/jonas/A...
WebAssembly today
@bmihaylov | Codemotion Milan 2015 31
Use emscripten to produce it
Stay as close as possible to asm.js
U...
JavaScript will survive
photo: deviantart.net
WebAssembly is a new feature
@bmihaylov | Codemotion Milan 2015 33
WebAssembly JavaScript
Bytecode
Machine code
WebAssembly and JavaScript
@bmihaylov | Codemotion Milan 2015 34
WebAssembly JavaScript
Games,
video & image
decoders, etc...
The future of WebAssembly
@bmihaylov | Codemotion Milan 2015 35
Focus on compilation from C/C++
Debug WebAssembly via the ...
@bmihaylov | Codemotion Milan 2015 36
WebAssembly fills in the gaps that would
be awkward to fill with JavaScript.
Eric El...
@bmihaylov | Codemotion Milan 2015 37
We think Swift should be everywhere and
used by everyone.
Craig Federighi
Apple’sWWD...
@bmihaylov | Codemotion Milan 2015 38
39
Grazie, Milano!
hey@boyan.in
@bmihaylov
After party
@bmihaylov | Codemotion Milan 2015
Boyan Mihaylov - Is web assembly the killer of javascript
Upcoming SlideShare
Loading in …5
×

Boyan Mihaylov - Is web assembly the killer of javascript

846 views

Published on

JavaScript has established itself as one of the most popular programming languages. Spreading from the client side to the server side, it serves well in different situations. Furthermore, a new version, ES6, has been accepted and mostly implemented by all major browser vendors. JavaScript is however limited to what we, developers, could do in the browser. And we want to do a lot - video rendering, playing games, embracing mobile apps experience. All these things are already working today with the help of additional libraries and modules. However, Microsoft, Google, and Mozilla are already work

Published in: Technology
  • GR8 post! Thanks https://www.linkedin.com/in/artscott
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Boyan Mihaylov - Is web assembly 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

×