{"id":42,"date":"2013-06-25T17:07:52","date_gmt":"2013-06-25T17:07:52","guid":{"rendered":"http:\/\/blog.mozilla.org\/mbest\/?p=42"},"modified":"2013-06-25T20:18:36","modified_gmt":"2013-06-25T20:18:36","slug":"asm-js-its-really-fast-backwards-compatible-and-now-in-the-release-version-of-firefox","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/mbest\/2013\/06\/25\/asm-js-its-really-fast-backwards-compatible-and-now-in-the-release-version-of-firefox\/","title":{"rendered":"asm.js: it\u2019s really fast, backwards compatible, and now in the release version of Firefox."},"content":{"rendered":"<p dir=\"ltr\">Firefox 22 is now released, and I am very excited! \u00a0One of its key features is a new set of optimizations for asm.js, a highly optimizable subset of JavaScript. \u00a0asm.js was developed by Mozilla while working jointly with game industry leaders to find a path to port high performance C++ games to the Web. \u00a0That, however, is only the start of what it can do.<\/p>\n<p dir=\"ltr\">There are two main use cases that asm.js addresses.<\/p>\n<p dir=\"ltr\">The first is bringing full native applications to the Web. \u00a0Using a tool called <a href=\"http:\/\/emscripten.org\">Emscripten<\/a>, C++ code can be cross-compiled to JavaScript, specifically the asm.js subset. \u00a0It integrates well with existing tool chains, as we have demonstrated by porting <a href=\"https:\/\/blog.mozilla.org\/blog\/2013\/03\/27\/mozilla-is-unlocking-the-power-of-the-web-as-a-platform-for-gaming\/\">Unreal Engine 3 to the web in 4 days<\/a>. \u00a0That\u2019s an incredible achievement considering we ported over a million lines of code. \u00a0This accomplishment provides a smooth path towards publishing existing applications on the Web, or for treating the Web as a platform alongside traditional desktop and console targets.<\/p>\n<p><iframe loading=\"lazy\" width=\"500\" height=\"281\" src=\"http:\/\/www.youtube.com\/embed\/BV32Cs_CMqo?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Another route is using asm.js and Emscripten to port libraries that require significant computing power. \u00a0HTML5 game developers sometimes find it hard to achieve an acceptable user experience should they seek to include performance intensive elements such as physics or pathfinding in their game. \u00a0This often leads to developers needing to optimize every bit of their game just to get something workable. \u00a0asm.js makes including these intensive elements more practical. \u00a0You can now use an asm.js compiled library, such as <a href=\"http:\/\/kripken.github.io\/ammo.js\/examples\/new\/ammo.html\">Bullet<\/a> or <a href=\"http:\/\/kripken.github.io\/box2d.js\/webgl_demo\/box2d.html\">Box2d<\/a> for physics, to supercharge the 5%-10% of the code that does most of the work and write the rest by hand using traditional JavaScript. \u00a0This approach gives you the speed of near-native execution where you need it and the ease and flexibility of modern JavaScript everywhere else. \u00a0Emscripten provides the needed capabilities for creating coder friendly interfaces for asm.js libraries to make them easy to interact with.<\/p>\n<p dir=\"ltr\"><a href=\"http:\/\/kripken.github.io\/ammo.js\/examples\/new\/ammo.html\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-49\" alt=\"Screen-Shot-2013-06-25-at-2.11.19-AM\" src=\"http:\/\/blog.mozilla.org\/mbest\/files\/2013\/06\/Screen-Shot-2013-06-25-at-2.11.19-AM-300x136.png\" width=\"300\" height=\"136\" srcset=\"https:\/\/blog.mozilla.org\/mbest\/files\/2013\/06\/Screen-Shot-2013-06-25-at-2.11.19-AM-300x136.png 300w, https:\/\/blog.mozilla.org\/mbest\/files\/2013\/06\/Screen-Shot-2013-06-25-at-2.11.19-AM.png 864w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p dir=\"ltr\">asm.js is not limited to games. \u00a0The performance it can bring to web applications opens up many interesting possibilities for speeding up existing web tasks, or bringing new experiences to the Web. \u00a0Efforts to port video decoders and <a href=\"http:\/\/blog.bitops.com\/\">photo processing tools<\/a> using asm.js are also seeing performance increases from taking advantage of existing C++ code without plugins or browser-specific technology.<\/p>\n<p dir=\"ltr\">There have been several attempts to provide a solution for C++ developers wishing to target the Web. \u00a0We believe asm.js is the best solution, and here are a few of our reasons why:<\/p>\n<p dir=\"ltr\">1. \u00a0It\u2019s just JavaScript.<\/p>\n<p dir=\"ltr\">asm.js is compatible with existing browsers. \u00a0Emscripten cross-compiled code requires Typed Arrays, a feature that is well-supported by modern browsers today, including Internet Explorer. There is no need to wait years for the technology to spread, or take the risk that it never will. \u00a0Furthermore, asm.js is a formalization of a pattern of JavaScript that web browsers have already been optimizing for, namely compiled C\/C++ as generated by Emscripten and Mandreel, and a sample of that type of code appears in a popular benchmark, Google Octane.<\/p>\n<p dir=\"ltr\">2. It\u2019s fast.<\/p>\n<p dir=\"ltr\">Thanks to all of the work browsers have already done to optimize JavaScript in general and compiled C++ in particular (in part due to such code appearing in Octane), it is very easy for browser vendors to optimize for it and unlock its full potential &#8212; it took a single Mozilla developer about 3 months to implement <a href=\"https:\/\/wiki.mozilla.org\/Javascript:SpiderMonkey:OdinMonkey\">OdinMonkey<\/a>, our asm.js optimization module for Firefox. \u00a0Google developers also quickly achieved large speedups on asm.js, as reported in their <a href=\"http:\/\/news.softpedia.com\/news\/Chrome-May-Support-Mozilla-s-Asm-js-for-Native-Speed-Web-Apps-354281.shtml\">IO keynote<\/a>. In just a short time it is possible to get to about half the native speed of C++. \u00a0That\u2019s faster than Java, in the case of Box2D. \u00a0That is just the first draft &#8211; we expect to get much closer to native performance with additional development on the browser side.<\/p>\n<p dir=\"ltr\">3. It dramatically reduces the cost of supporting the Web.<\/p>\n<p dir=\"ltr\">For developers already working with C++, Emscripten makes the Web just another port target. \u00a0Once it\u2019s integrated into your tool chain, the web version can be recompiled alongside your other platforms whenever any updates are needed. \u00a0We have ported full properties in very short time periods.<\/p>\n<p dir=\"ltr\">4. It reduces or eliminates the need for plugins.<\/p>\n<p dir=\"ltr\">Companies that turn to plugins to enable their games or applications often see a significant friction in user adoption due to security warnings. \u00a0asm.js provides an alternative path that eliminates the security messaging issue while still providing much of the performance, all within a safe execution environment.<\/p>\n<p dir=\"ltr\">5. It enables reuse of existing C++ libraries.<\/p>\n<p dir=\"ltr\">There is a wealth of open source C++ libraries out there waiting to come over to the Web. \u00a0This is a vast amount of coding effort whose value has now been unlocked for web developers.<\/p>\n<p dir=\"ltr\">asm.js is still a new technology, and we have plenty of work to do to provide its full potential to the developer community. \u00a0Mozilla is grateful to Epic and other game industry leaders that have already started to work on products using asm.js. \u00a0These early <a href=\"http:\/\/www.unrealengine.com\/html5\/\">examples<\/a> are helping to prove the value, shape the technology, and encourage other browsers to priorities optimizations for it. \u00a0The best way to help support the development of asm.js is to start using it and let us know what you think by adding comments to this post. \u00a0If you are a game developer or have a performance intensive application and choose to port it over, share your work with the world and let us know about it!<\/p>\n<p dir=\"ltr\">For an in-depth look into what asm.js is and isn&#8217;t, have a look at this <a href=\"http:\/\/mozakai.blogspot.ca\/2013\/06\/what-asmjs-is-and-what-asmjs-isnt.html\">post<\/a> by Alon Zakai. Well worth the read!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Firefox 22 is now released, and I am very excited! \u00a0One of its key features is a new set of optimizations for asm.js, a highly optimizable subset of JavaScript. \u00a0asm.js was developed by Mozilla while working jointly with game industry leaders to find a path to port high performance C++ games to the Web. \u00a0That, [&hellip;]<\/p>\n","protected":false},"author":394,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20250],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/posts\/42"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/users\/394"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/mbest\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}