Develop Web Components with WebAssembly
Web ComponentsWeb Components are a set of features in the HTML and DOM specifications introduced by the World Wide Web Consortium (W3C) for creation of reusable widgets or components in web documents and web applications. The intention is to bring component-based software engineering to the World Wide Web. The simplest way of understanding Web Components is through an example. Imagine your colleague has developed a Web Component for displaying barcodes on web pages. To use the component, you simply need to do the following:
You only need to declare a HTML tag to use the component in your web pages or applications. There is no need to write any codes to call the component or meddle around to understand how the component works internally. This enables you to simplify your web development with the use of components.
Web Components by W3C includes the following 4 features
- Custom elements – to add new HTML elements into the DOM
- Shadow DOM – to create a unique DOM encapsulated by HTML markup
- HTML imports – to import HTML code and reuse your components in other pages
- HTML template – to write reusable code and declare how it should look
The easiest way to understand WebAssembly is also through an example. The source code below shows the content of a "hello_world.c" file. It is a program written in the C programming language.
In the past, you use a C/C++ compiler to compile the above to binary executables to run in the command line. Moving forward, you can compile the above program to WebAssembly and run the program inside a browser. One of the tools that allows you to do so is Emscripten. This tool basically compiles C/C++ code to WASM, a WebAssembly module. The WASM module can then be loaded into web pages (HTML) to display the "hello, world" of the "printf" function.
Can you mix WebAssembly and Web Components?This two-emerging standard stands a big chance of significantly influencing the future of web as a platform. And the interesting question is can we combine the two technologies? Can we create a Web Component using WebAssembly? Has anyone tried this? A simple search on the web does not return any results.
After some research, I have come to conclude that the answer is Yes! The section below illustrates how to do this. However, do take note that some of the codes, scripts or HTML are subjected to change due to changes in the specifications and the evolution of the standards.
Creating a Web Component using WebAssemblyTo make this example useful and non-trivial, we are going to create a Barcode Web Component using WebAssembly. Specifically, we are going to create a component that generates a Code 39 barcode. We will be using a free Code 39 barcode web font from https://www.barcoderesource.com to display our barcode.
For those who cannot wait, you can just scroll to the bottom of this page to download the zip file containing a working copy of the sample codes. For those who want to understand a little more, do read on.
1. Download and install Emscripten from http://kripken.github.io/emscripten-site/. Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.
2. Create a "code39.cpp" file using Notepad with the following contents.
The above codes define a C++ class and the necessary functions for generating a Code 39 barcode, as explained below.
The line above defines a constructor of an input data (first parameter) for the barcode and an indicator (second parameter) of whether a check digit is required.
The above line is the function that we execute to generate the Code 39 barcode. Or more specifically, it generates some output characters that when applied with a barcode font, displays a Code 39 barcode.
The above property is used to indicate whether to generate a check digit before executing the "encode" function.
The above property is used to get or set the input data. You can change the input data using this property and execute the "encode" function to generate a different Code 39 barcode.
The above property is used to get the human readable text that commonly appears below a barcode. The human readable text is not the same as the input data as the Code 39 barcode, and may require addition of start/stop and check characters.
3. Compile the "code39.cpp" with the following command in Emscripten. This provides us with a WASM module that we can later use in our Web Component. Launch a command prompt and execute the following command.
If the "emcc" command cannot be found in your command prompt, you can go to your Emscripten folder and execute the "emcmdprompt.bat" script file to set it up.
With the above we have a WebAssembly module that we can use in a web page. However, remember that our aim is to make use of this WebAssembly to create a W3C standard compliant Web Component. So, our WebAssembly module will be executed from our Web Component instead.
4. Next we are going to create a Web Component from scratch without the help of any frameworks. Using Notepad create a "code39-barcode.html" file.
The HTML "template" is used by the following code to create a Shadow DOM. You can think of shadow DOM as a scoped subtree inside your element that ca create components.
The following line registers our Custom Element "MYElementProto" in the browser so that we can use "code39-barcode" as a tag.
The "onRuntimeInitialized" function is a function will be executed when the WASM module has been loaded completely. In this function, we get the "barcode" and "barcode_text" div element from our Web Component. We are doing this to get the input data from our Web Component tag and subsequently returning our barcode to the "barcode" div element.
The following line declares an instance for our WebAssembly Module Code39 Class.
And next, we use the "instance" to generate the barcode (barcode characters) based on the input data. Once a barcode is generated with the "encode" function, we can also get the "humanReadableText" from the "instance".
6. We have completed the development of our Web Component and the use of WebAssembly in the component to generate a barcode. We can create a simple HTML file to test our Web Component. Using Notepad, create an "index.html" file with the following contents.
The first line as shown below includes the Web Component and the second line uses the Web Component tag we have declared earlier.
7. Save the HTML file and run the following command in your command prompt to launch the Chrome browser to view our Web Component.
You should see the following:
This tutorial illustrates the many possibilities that the future will bring.
- A software vendor can ship and sell very optimized (WebAssembly) and standardized (Web Components) components without shipping the source code to other users.
- A web developer can easily integrate a third-party component in a standardized manner.
- We can imagine platforms such as Java or .NET can be ported to run as WebAssembly in the browsers. Developers can develop their Web Components using their favorite tools and programming languages.
Download the runnable zip file:
Browser Tested On
- Google Chrome 65.0.3325.181 (or above)