WebAssembly (WASM): A Secret Guide to Building Highly Optimized and Secured Web Applications
In the world of software development, the technology is evolving rapidly. Teams are developing different amazing tools to help the developers in developing high performance applications to provide their users a good experience. When we talk about building an application whether its a mobile app or web-based application, the first and foremost requirement which came into our mind is its “Performance”. It is one of the most crucial aspect of software development as it affects the user experience and in terms of user feedback, it can be the main reason to make the app notorious just because of its latency in performing certain tasks. The second major factor in building an application is its “Security”. The user feedback in terms of security has equivalent significance as of performance.
Since we all know that the browser only understands JavaScript. No matter what framework or library we are using, it is ultimately going to first convert it into JavaScript. So that the browser can understand it and then execute accordingly. So we can say in web-based applications all the performance of an application majorly depends on JavaScript. Is this a problem?
The absolute answer is NO. But in some cases, the answer might be yes. The reason behind this fact is the dynamic behavior of JavaScript. To have a better understanding of dynamic behavior let first understand how JavaScript runs behind the scenes in browser’s engine.
What makes JavaScript slow?
Every browser has its own JavaScript engine, e.g. Chrome uses V8 engine, Mozilla Firefox uses Gecko rendering engine etc. which is simply a program that executes JavaScript code. Every JS engine have 2 components.
- Call Stack (Where our code get executed)
- HEAP (An unstructured memory pool where our objects are stored)
If there is a CPU dedicated task or hardware oriented tasks such as JSON encoding or decoding some cryptographic sort of things, then JavaScript can take a long time to execute such tasks. The reason is its dynamic nature, as explained above. As, first the code is parse to the engine, and then it is converted to AST (Abstract syntax tree) Code then it is sent to the Call Stack where this code is get executed (machine code). To save time the unoptimized version (Byte Code) is sent first, and then it is resent back to the Compiler TurboFan multiple times to get the optimized version, but the code will not stop. This makes JavaScript slow for CPU or Hardware oriented tasks.
In order to perform such CPU dedicated tasks we take low level languages into the operations such as C/C++, Rust etc. As these languages offer manual memory management and provide greater control over system hardware. These languages get converted to machine code which is highly optimized and directly run on the hardware. But the problem here with these low languages is, as mentioned earlier browsers does not allow any arbitrary code without any sandbox and only understand JavaScript which is in sandbox mode. So how can we run a program in a browser which is written in cross platform?
How WebAssembly helps us to make our application faster and safe?
Here things get interesting as there is a boy in the town called WASM. Which have power of native compilation to the web. This is nothing but simply a programming language, or you can say compile target, which converts your cross-platform languages into a WASM language which a browser can understand. You convert your “.c” or “.py” file into “.s” file, which is an assembly file. You do not write your code directly into WASM. Instead, you write your code in your suitable cross-platform language and WASM converts your code directly into machine code so that the browser can understand and execute it. The thing which makes WASM immensely fast is its small number of stages it passes through before execution. As in JavaScript your code first get parse, then converted to AST, then sent for optimization and then get executed. Whereas, In WASM it gets directly decoded and then compiled along with optimization and then executed.
Since, WebAssembly (WASM) module is also executed within the sandbox which provides high level of security therefore, it is not able to do operating system level of exploits as the code is still running within the same sandbox which browser provides to the JavaScript and this is the reason it gets allowed to run in browser. Moreover, unlike JavaScript, you do not have to wait to completely to download the JSON payload before parsing it. If there is a WASM file let say of 5 MB then as its chunks get downloaded they are getting convert into the machine code and executing making WASM superfast.
Example: FFmpeg is a free and open-source software which consists of libraries for handling or processing audio, videos or other multimedia files. The interesting thing is that this software is highly optimized and made in C++ with the help of WASM FFmpeg is running on the browser. As this software written in C++ was first converted to WASM binary so that the browser can understand it.
Will WASM replace JavaScript?
After unveiling the power of WebAssembly (WASM). This big question will of course rose in your mind. So the answer is NO!
WASM is not made to work against JavaScript but it is made to work with JavaScript.
So what is eventually going to happen is you will write your JavaScript code and will call WASM function where there would be its need. Your CPU dedicated tasks will be happening in WASM and DOM or Web Front-End oriented tasks like networking and sending HTTP requests etc. will still be happening in JavaScript world. So this means you cannot perform UI updating tasks with WASM. You will still need JavaScript to do that.
Conclusion
In summary, WASM is a programming language which executes in a sandbox, which makes it able to run in the browser. In order to perform CPU dedicated tasks, JavaScript is not suitable due to its dynamic behavior. For such tasks we use languages which provides more control over the hardware such as C/C++ or Rust etc. But these languages are not executes in the sandbox, and therefore they are not allowed to run in the browser. So in order to run code written in cross-platform, we convert our files to WASM file and then run in the browser. The great thing is that we are getting near native speed on the browser. Since WASM also executes within the same sandbox which browser provides for the JavaScript, therefore, there is no security issues. WASM is getting popular and have adapted by various real world tech companies due to its guaranteed performance and security.
Thank you so much for reading this far. I hope you find this article informative and helpful. If yes, then share it with your friends. If you want to keep yourself up to date with hot technologies and the industries latest trends, then follow me on X/Twitter and connect with me on LinkedIn. I post a lot of informative and learning content related to programming and latest technologies.
