This document discusses using asm.js to accelerate client-side processing in JavaScript applications. It begins by explaining what asm.js is and how it provides predictable high performance by operating on numeric values in an ArrayBuffer heap. It describes two main ways to use asm.js: by compiling existing C/C++ applications using Emscripten, or by leveraging existing libraries to accelerate JavaScript applications. It then covers writing asm.js by hand, integrating asm.js code with JavaScript, and using workers and async script loading. Potential applications discussed include image/video processing, data analysis, text-to-speech, and more.

1. TURBOCHARGING CLIENT-SIDE PROCESSING
LEVERAGING ASM.JS
Vladimir Vukićević / @vvuk

2. OVERVIEW
What is asm.js?
Writing asm.js by hand
Using Emscripten
Integrating libraries
What can you do with this

3. WHAT IS ASM.JS?

4. vrg=Fot2ra(26)
a
la3Ary378;
fnto mi( {
ucin an)
vra=0 b=0
a
,
;
d {
o
a=8+( < 2 |0
b < )
;
ga> 2 =+[ > 2 +10
[ > ]
ga > ]
.;
b=b+1|0
;
}wie(b|0 <50)
hl (
)
00;
}
This is asm.js. It's JavaScript, with some rigid rules.

5. asm.js operates on an ArrayBuffer heap
asm.js operates only on numeric values
asm.js can call regular JavaScript
asm.js can be called by regular JavaScript
asm.js provides predictable performance

6. TWO WAYS TO USE ASM.JS
To bring existing C/C++ apps to the web
Many of the current flashy demos do this
Great for games
Not the focus here
To accelerate processing of JS apps
Leverage existing libraries
Offload and speed up data processing and analysis

7. WRITING ASM.JS BY HAND
vrha =nwAryufr49)
a ep e raBfe(06;
vram=fnto(tlb frin ha){
a s
ucinsdi, oeg, ep
"s am;
ue s"
vrHAF2=nwsdi.la3Aryha)
a EP3
e tlbFot2ra(ep;
fnto aeaeausfrt ls){
ucin vrgVle(is, at
frt=frt0 ls =ls|;
is
is|; at at0
vrcut=0 vrag=00
a on
; a v
.;
cut=(at-frt > 2
on
ls
is) > ;
wie(frt0 <(at0){
hl (is|) ls|)
ag=ag++EP3[is > 2;
v
v
HAF2frt > ]
frt=frt+40
is
is
|;
}
rtr +ag/+cut0)
eun (v
(on|);
}
rtr {
eun
aeaeaus aeaeaus
vrgVle: vrgVle,
}
;
}wno,{,ha)
(idw } ep;
/ ptsm vle it teha *
* u oe aus no h ep /
vrHAF2=nwFot2ra(ep;
a EP3
e la3Aryha)
fr(a i=0 i<2;+i {
o vr
;
0 +)
HAF2i =i
EP3[] ;
}
/ mk tecl *
* ae h al /
vrag=amaeaeaus0<,2<2;
a v
s.vrgVle(<2 0<)
cnoelgag;
osl.o(v)

8. WRITING ASM.JS BY HAND
... DOABLE, BUT PAINFUL.
Doable by hand for simple things
e.g., a matrix math library
It's intended to be a compile target
Not just from C/C++!
LLJS can target asm.js
TypeScript is interested
Emscripten for C/C++ source

9. USING EXISTING LIBRARIES
THROUGH EMSCRIPTEN

10. LOTS OF EXISTING CODE OUT THERE
For example, open source libraries for...
Computer Vision — OpenCV
Physics — Box2D, Bullet
Compression — zlib, lz4, etc.
Text-to-Speech — eSpeak
Convex Hull Computation — qhull
...

11. LOTS OF EXISTING CODE OUT THERE
Many already have Emscripten ports
Some have nice JS layers on top

12. INTEGRATING WITH ASM.JS CODE
1. Get data into asm.js heap
vrcnaDt =cxgtmgDt(,0 w h;
a avsaa
t.eIaeaa0 , , )
/ alct saei amj ha *
* loae pc n s.s ep /
vrhaPr=Mdl.mlo( *h*4;
a ept
oue_alcw
)
vrhaDt =nwUn8ra(EP haPr w*h*4;
a epaa
e itAryHA, ept,
)
/ cp cnaDt.aait ha *
* oy avsaadt no ep /
haDt.e(avsaadt)
epaastcnaDt.aa;
2. Call function(s)
amouedPoesn(ept,w h;
sMdl.orcsighaPr , )
3. Get data out of heap
/ cp dt bc t Iaeaa*
* oy aa ak o mgDt /
cnaDt.aasthaDt)
avsaadt.e(epaa;
/ fe saei amj ha *
* re pc n s.s ep /
Mdl.fe(ept)
oue_rehaPr;
/ da iaedt bc *
* rw mg aa ak /
cxptmgDt(avsaa 0 0;
t.uIaeaacnaDt, , )

13. INTEGRATING WITH ASM.JS CODE
You have to deal with manual
memory management and allocation
Likely already thinking about it
if you're heavily optimizing your JS
Make some nice wrappers and avoid
having to think about this again

14. NICE WRAPPERS?
fnto poesmgDt(mgDt){
ucin rcsIaeaaiaeaa
vrw=iaeaawdh h=iaeaahih;
a
mgDt.it,
mgDt.egt
vrhaPr=Mdl.mlo( *h*4;
a ept
oue_alcw
)
vrhaDt =nwUn8ra(EP haPr w*h*4;
a epaa
e itAryHA, ept,
)
haDt.e(avsaadt)
epaastcnaDt.aa;
amouedPoesn(ept,w h;
sMdl.orcsighaPr , )
iaeaadt.e(epaa;
mgDt.aasthaDt)
Mdl.fe(ept)
oue_rehaPr;
}

15. JUST ANOTHER MODULE
JavaScript App
App Code
EmberJS
jQuery
...
asm.js
code

16. SOME ODDS AND ENDS
Use Worker Threads
Use async Script Loading

17. USING WORKER THREADS
Place your asm.js module on a worker
Asynchronous execution, no jank!
Main App code
postMessage ⇒
request
⇐ postMessage
reply
Worker
asm.js
module

18. (ASIDE) WORKERS ARE AWESOME
And will get even more awesome
We've got lots of APIs coming to workers, including...
WebRTC
WebGL & Canvas 2D
Web Sockets
Web Audio
Synchronous message passing

19. USING ASYNCHRONOUS SCRIPT LOADING
asm.js code can be large, and parsing and compiling takes time.
<citaycsc"i/ysLbj"<srp>
srp sn r=lbmAmi.s>/cit
Add async. Magic.
In the (very near) future, such compilation will also be cached.

20. WHAT DO I DO WITH THIS?
Processing/resizing of photos client-side
(color correction, face identification)
Data analysis
(download raw data to client)

21. WHAT DO I DO WITH THIS?
Face login/confirmation
(WebRTC + UserMedia + canvas)
Add text-to-speech
(read notices in the background)

22. WHAT DO I DO WITH THIS?
Implement new image (and video?) codecs
(specialized or experimental)
Recognize barcodes
(handy on mobile!)

23. PERFORMANCE?
"Within 2x of native."
... pretty consistently.
Even on mobile! Take advantage to make mobile apps feel more
like native.

24. IT'S DANGEROUS TO GO ALONE
You'll need...
Some familiarity with C/C++
(or someone nearby familiar with C/C++)
Emscripten and Emscripten SDK

25. NOT JUST FOR C/C++
Focus has been on C/C++ due to large body of existing code
Lua, Python, etc. all exist
For example, give users ability to write scripts in Lua

26. WRAP-UP
asmjs.org
emscripten.org

27. QUESTIONS?
Vladimir Vukićević / @vvuk