Turbocharging Client-Side Processing: Leveraging asm.js

50 %
50 %
Information about Turbocharging Client-Side Processing: Leveraging asm.js

Published on December 12, 2013

Author: fitc_slideshare

Source: slideshare.net

Description

Presented at
FITC presents AdvancedJS
in Toronto on Dec 7, 2013 with Vladimir Vukicevic

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

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

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

WHAT IS ASM.JS?

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.

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

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

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)

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

USING EXISTING LIBRARIES THROUGH EMSCRIPTEN

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 ...

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

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, , )

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

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; }

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

SOME ODDS AND ENDS Use Worker Threads Use async Script Loading

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

(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

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.

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

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

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

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

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

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

WRAP-UP asmjs.org emscripten.org

QUESTIONS? Vladimir Vukićević / @vvuk

Add a comment

Related presentations

Related pages

Turbocharging Client-Side Processing: Leveraging asm.js ...

Mozilla's asm.js technology has shown that JavaScript can approach the speed of native code for computationally-intensive tasks. However, many ...
Read more

Turbocharging Client-Side Processing: Leveraging asm.js - FITC

Similar Presentations. Realtime “Eye Candy” with AngularJS . With Matias Niemelä . Awesome Ember Tricks . With Robin Ward
Read more

Continuous Deployment Workflows for Non-Trivial Full-Stack ...

Similar Presentations. Turbocharging Client-Side Processing: Leveraging asm.js . With Vladimir Vukicevic . Realtime “Eye Candy” with ...
Read more

تخته سفید | PHP Sessions - takhtesefid.org

Turbocharging Client-Side Processing: Leveraging asm.js. tutorialfilmsh 11 ... Turbocharging Client-Side Processing: Leveraging asm.js. tutorialfilmsh 11 ...
Read more

Turbocharging | LinkedIn

... http://www.bqlive.co.uk/2015/09/28/pwc-turbocharging-life-sciences-for-the-northern ... Turbocharging Client-Side Processing: Leveraging asm.js. 2,849 ...
Read more

Understanding asm.js - SitePoint

asm.js is currently a trendy subject in web development. Reading a complete guide about asm.js, its goals, and its roadmap is impossible because you’d ...
Read more

Unreal Engine 3 in Firefox with asm.js - YouTube

Engineering teams at Mozilla and Epic ported Unreal Engine 3 to the Web in four days, using Emscripten and asm.js For more information, visit ...
Read more

تخته سفید | RFIC - جلسه 38

توضیحات: تکنیک مقدماتی لی آت در مدارات آنالوگ 2ویدئو های کامل درس در: http://maktabkhooneh.org/course ...
Read more