Turbocharging Client-Side Processing: Leveraging asm.js

3,292 views

Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca

OVERVIEW
Mozilla’s asm.js technology has shown that JavaScript can approach the speed of native code for computationally-intensive tasks. However, many assume that the entire web application needs to be written in C/C++ and compiled to asm.js to achieve these speedups. The same speed boosts can be applied to the processing portions of regular JavaScript applications. This talk will explore how to take advantage of existing open-source libraries for performing tasks like image processing, physics simulation, and speech recognition efficiently as part of a regular JavaScript application — blending standard JS frameworks like jQuery with open source C++ libraries like Box2D physics to turbocharge the performance of web apps.

Vladimir has been with Mozilla for over 5 years, and is passionate about making the web a high-quality platform for app development. His particular focus has been on graphics and media, and he did the foundation work and led the creation of WebGL, the standard API for 3D graphics on the web. He's currently working on enabling developers to squeeze the most performance out of their web apps across all browsers and devices.

More info at www.FITC.ca


Published in: Internet, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,292
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
21
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Turbocharging Client-Side Processing: Leveraging asm.js

  1. 1. TURBOCHARGING CLIENT-SIDE PROCESSING LEVERAGING ASM.JS Vladimir Vukićević / @vvuk
  2. 2. OVERVIEW What is asm.js? Writing asm.js by hand Using Emscripten Integrating libraries What can you do with this
  3. 3. WHAT IS ASM.JS?
  4. 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. 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. 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. 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. 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. 9. USING EXISTING LIBRARIES THROUGH EMSCRIPTEN
  10. 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. 11. LOTS OF EXISTING CODE OUT THERE Many already have Emscripten ports Some have nice JS layers on top
  12. 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. 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. 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. 15. JUST ANOTHER MODULE JavaScript App App Code EmberJS jQuery ... asm.js code
  16. 16. SOME ODDS AND ENDS Use Worker Threads Use async Script Loading
  17. 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. 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. 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. 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. 21. WHAT DO I DO WITH THIS? Face login/confirmation (WebRTC + UserMedia + canvas) Add text-to-speech (read notices in the background)
  22. 22. WHAT DO I DO WITH THIS? Implement new image (and video?) codecs (specialized or experimental) Recognize barcodes (handy on mobile!)
  23. 23. PERFORMANCE? "Within 2x of native." ... pretty consistently. Even on mobile! Take advantage to make mobile apps feel more like native.
  24. 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. 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. 26. WRAP-UP asmjs.org emscripten.org
  27. 27. QUESTIONS? Vladimir Vukićević / @vvuk

×