Today Javascript is the most accepted client side programming standard for the web platform. Originally designed as a simple scripting language to write small logic into HTML pages (as “script” in it’s name implies), today it is immensely used in modern web projects, together with massive sized open source Javascript libraries like Angular, React, Backbone, Ember. The demand for browser based applications is getting higher everyday since creating a browser based application is undoubtedly the best option if you want to create a multi platform and multi device application. Therefore many enterprise applications today, like ERP and productivity applications target world wide web as their development platform.

Although it is pretty “the standard” technology for today’s web client programming, is Javascript alone able to handle those future requirements of heavy, functionality rich enterprise applications?

In this article we will have a quick look at one of newest technologies in browser based application programming, the new “WebAssembly” technology, and explain its potential impact for the future.

Javascript

Javascript is a 23 year old technology (since 1994-95) which is originally designed by Netscape Communications Corp. to compete on web technologies with Microsoft (which was using VB script on IE at that time). Although it is named as “Javascript” (was named Livescript in past) it is not quite a Java based language. The original goal of NS was using the “Scheme” language as their web scripting language but then, for political and marketing reasons, NS decided to implement Sun Microsystem’s Java language syntax  and Javascript is born as a hybrid of those languages.

Netscape_Navigator_2_Screenshot
Netscape Navigator browser with Livescript support

Javascript is a simple, loosely-typed programming language which is mostly designed to run asynchronously behind the loading of a HTML document. Whether JS is an object oriented language or not is still a debate, but originally it is designed as an object oriented language in order to support adding new components and plugins into a web page using Javascript itself. The evolution of Javascript took place in Netscape Navigator vs Internet Explorer ‘wars’ and for a very long time programmers had to implement different versions of their Javascript for IE and NS Navigator browsers. Thanks to ECMA, today we have a quite standardized Javascript language that runs similar on all major browsers, and also nice language modernizations like ES6.

f21-4
VB Script tutorial in one of early IE browsers

bestie.jpg200_d.gif

Above : Logo’s used by webmasters who could not afford writing two different versions of their Javascript and ask you to choose one browser to go with.

 

A Javascript code is first parsed and compiled into bytecode, then this bytecode is compiled inside the JIT compiler of the browser. Only then it can be executed in native code. As you can guess, this does not perform very well for big Javascript libraries, and this is one of the major drawbacks of  Javascript, especially on mobile platforms. Simply open your popular social media portal and check how much Javascript code it loads into the browser, and how long it takes to execute. Today the size of Javascript applications are getting bigger everyday and there is a demand for more since enterprise applications are choosing web platform as their development target.

8551.akatjpiwtp-image1
IE’s Chakra Javascript engine execution chart

WebAssembly

In 2015, Mozilla MDN decided to start WebAssembly project to create a common, low level bytecode format for browser execution, which will allow pre-compiled assemblies to be executed inside browsers on (near) native speeds. Initial version of WebAssembly is build on Mozilla’s “asm.js” technology, which is used today for mostly browser based gaming. The initiative gained support by all major browser developers (Google, Microsoft and Apple) and as of late 2017, they all support execution of WebAssembly binaries in their browsers.

logo_party01-500x169.png

WebAssembly is created by first compiling a code written in any language (C, C++ or any other) to a binary .wasm file which can then be included in a web page using a <script type=’module’ > tag, just like an ES6 or loaded and executed in Javascript code using its own WASM API. At the time of writing, people are a bit confused with this because the direct loading of WASM modules as I mention above is not ready yet and it can only be executed inside Javascript code. But as stated in their roadmap, the goal is loading and executing WebAssembly in “native speed” by importing it directly in a web page without the need of an extra Javascript code.

Here is a quick overview of WASM compilation steps into byte code (taken from Wikipedia https://en.wikipedia.org/wiki/WebAssembly)

C expressionTextual (WAT) expression for debuggingLinear assembly bytecodeWASM binary encoding
int factorial(int n) {
if (n == 0)
return 1;
else
return n * factorial(n-1);
}
(module
(import "math" "exp" (func $exp (param f64) (result f64)))
(func (export "doubleExp") (param $0 f64) (result f64)
(f64.mul
(call $exp
(get_local $0))
(f64.const 2))))
get_local 0
i64.eqz
if (result i64)
i64.const 1
else
get_local 0
get_local 0
i64.const 1
i64.sub
call 0
i64.mul
end
20 00
50
04 7E
42 01
05
20 00
20 00
42 01
7D
10 00
7E
0B

Some of the advantages WebAssembly brings are :

  • It will fill in the gap where using Javascript is not ideal because of performance and complexity reasons, like web based ERP and Productivity apps. Execution speed will be near-native speed thanks to the pre-compiled binary format.
  • You will be able to use your favorite programming language, like Java, C# or C++ to write browser apps, then compile and embed it into the browser to run it.
  • It has great compatibility. Wasm uses the same standard browser functionality, runtime engine and security permissions as Javascript, so it is readily integrated into today’s browser standards. It is also possible to use web assembly modules inside a Javascript code, or run Javascript code and modules inside web assembly vice versa.
  • It has a human readable, understandable, intermediate textual script language for debugging purposes called WAT (Web assembly text format), you do not have to debug assembly code or asm.js directly.

How can we use WebAssembly?

At the time of writing, compilers are readily available for C and C++ to generate a “.wasm” module, which can be imported inside its Javascript API for execution.

More info on compiling C/C++ into WebAssembly can be found in following MDN webpage :

https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm

There are also several different future projects planning to use WebAssembly as their base technology. To mention some of those :

  • Unity game engine : From of version 5.6, Unity has an experimental compile target for WebAssembly platform. A demo game can be seen in the WebAssembly portal :
    https://webassembly.org/demo/
  • Mono project : Mono is the open source implementation of “.NET Framework” which allows .NET code to be executed on different platforms like Linux. Mono team is working on an implementation on WebAssembly platform to allow .NET code and .NET WinForms projects to be compiled into and run directly in a web browser using WASM. For more info :
    http://www.mono-project.com/news/2017/08/09/hello-webassembly/
  • Blazor project : Blazor is an ongoing project of Microsoft to bring .NET programming into browser client. It is based on open source .NET and ASP.NET’s popular “Razor” syntax (For more info on Razor, you can check my previous blog post). It will allow direct Razor scripting in a web page, just like using Javascript, and will provide various new useful tools for browser client programming (sounds exciting..). Blazor team has announced that they will make use of WebAssembly as their compilation and execution environment. For more info :
    https://learn-blazor.com/
  • Rust : Rust is a C++ based modern programming language which has many practical features. Since it is also sponsored by Mozilla, today it is possible to compile Rust directly into WebAssembly using it’s compiler tools. For more information :
    https://www.rust-lang.org/
  • Kotlin : Kotlin is a new programming language which is mainly developed for programming in Android platform, as a more modern and functional alternative to Java language. Kotlin’s native compiler can compile Kotlin code directly into WebAssembly.

Is WebAssembly going to replace Javascript?

No. WebAssembly is more of a complementary technology than a replacement to Javascript. It will allow adding high performance, feature rich modules into Javascript projects and use those inside Javascript code. With its popularity and support today, having years of evolution on web platform and thousands of available open source libraries written with it, we can easily say that Javascript has much more years to stay alive. As you see above, there are also some future projects that will allow other programming languages, like C#, to be used in browser client side. But all of those projects still work side by side with Javascript, and it does not seem that any of them will replace Javascript in a short them.

 

For more information on web assembly, visit :

https://webassembly.org/

https://developer.mozilla.org/en-US/docs/WebAssembly

 

 

 

Leave a Reply