I tried using the WebAssembly Studio online development environment for WebAssembly that can execute machine language from browser

"WebAssembly" is a technology that makes it possible for a browser to execute a machine language that is generated by compiling source code written in C language etc. and can process at high speed. Mozilla, which develops Firefox, launched on April 11, 2018, an online development environment that makes it easy to develop its WebAssemblyWebAssembly Studio"Has been released.

WebAssembly Studio
https://webassembly.studio/

JavaScript is often used when you want to do something with a browser, but JavaScript is an interpreted language that processes code one line at a time, and it is also a language in which the interpreter interprets variable types dynamically However, it has the problem of slow processing speed. "WebAssembly" is a technology created under such circumstances, and it has a feature that it operates at high speed on the browser.

And "WebAssembly Studio" is a tool that makes it easy to execute C and Rust coding, compiling to WebAssembly, and execution of generated machine language on the browser. Since it is unnecessary to build a troublesome development environment at all, I tried to make sure what kind of function actually is used because it can be used immediately.

You can watch official tutorials from YouTube and learn how to use them.

Introducing the WebAssembly Studio Beta - YouTube


When you access the website of WebAssembly Studio, it becomes the project creation screen. Select "Empty C Project" and click "Create".


When you create a project you will see the following screen. When you select a file from the left column, it is displayed on the right side.


If you click "main.c" immediately and look inside, you can see that it is a simple code written only as "return 42;".


Also, under "main.html" is an html file to display when running. It is written only by calling "main.js".


Then, when you look at "main.js", it executes "main.wasm" and displays the result on the screen.


Since it is necessary to compile to machine language before execution, click "Build" in the upper right to generate "main.wasm". When clicking "main.wasm" and displaying it, it is displayed in "wat" format which is a text expression rather than a machine language, and it can be edited. When editing and saving this file it will automatically be converted to "wasm" format and saved.


Now that the executable file is ready, click "Run" and run it this time, "42" is displayed in the lower right.


After rewriting "main.c" and setting the return value to "2000", build and run it, "2000" will be displayed this time.


Also, if I edited "main.wasm" directly, changed "2000" to "10" and executed it, it was displayed properly as "10".


Right-click on this "main.wasm" file to display various menus. I will try three menus "To Firefox x86" "To Firefox x86 Baseline" "Binary Explorer".


First, when you click "To Firefox x86", a file called "main.wasm.x86" is generated, and when you look inside, "main.wasm" converted to assembly language for x86 processors is displayed I will.


The same thing is generated for "To Firefox x86 Baseline", but it is not optimized here and a slightly longer code will be displayed. That is, the conversion time is shorter than that of the previous option.


"Binary Explorer" is a function that the machine can browse the actual binary file. "WebAssembly Code Explorer" is opened in a new window of the browser, it is displayed as binary on the left, code on "wat" format on the right, and when clicking on a part of each, the corresponding place of the other glows and displays It makes it easier to understand relationships.


Also, right click on "main.wasm" and click "Optimize" from the displayed menu, the code will be optimized and shortened.


When I tried "To Firefox x86" again, the generated "main.wasm.x86" was also short.


Well, when you press the page refresh button, the data disappears and you return to the "Create New Project" screen. Next, select "Hello World in C" and click "Create".


Looking at "main.c", you can see that various mysterious codes are stuck under the usual "printf (" Hello World \ n ")".


Looking at "main.wasm" generated by compiling it has expanded to near 2000 lines.


To check the reason, right click on "main.wasm" and click "Generate Call Graph" to generate the call graph.


When clicking on the generated "main.wasm.dot" and displaying it, the call graph was displayed on the right side. Thus, the call graph shows the calling relationship of the subroutine.


Looking to the right, you can see that system calls are being imported.


Unlike running on an actual machine, it is not possible to fully use the kernel in the execution from the browser, so it is necessary to manually reimplement parts in this way.


When executed, "Hello World" was output to standard output. Although code that outputs "Hello World" is easy to select as a program to be written for the first time in various languages, it seems better to stop making the first program written in WebAssembly "output of Hello World".


If you click on the "Fork" button above, the data will be saved online. You can access the saved file with the URL displayed when you click the "Share" button. In addition, code that embeds in the web page is also generated.


It is like this when actually embedded. "Build" "Run" works on the embedded page, but it seems necessary to move to "WebAssembly Studio" when editing the contents.



You can also download data in zip file at once by pressing "Download" button. You can also upload the file by right clicking on the part of the left menu that has nothing.


"WebAssembly" from 2016 to 2017Supported by major web browserAlthough it is a function that has not progressed since it was done, it seems that full-scale development will progress as the environment that can be easily developed is provided.