Running C In the Browser

On the face of it being able to run C (or C++) programs in the browser would appear to be a bit odd. Browsers only run JavaScript or Dart (on Chrome browser anyway or compiled to JavaScript). There was Flash for several years until it was killed in browsers after mobile phones explicitly prevented it running native Flash applications.
However you can still develop Flash apps for mobile, using Adobe Air.

The fallout from Flash not running natively on mobile was that it also killed it on browsers. It’s a shame because you could code really elegant user interfaces running in browsers. The flower retailer Interflora had an elegant Flash UI back in 2002/2003 and it was closer to a Windows form than a web page.
Also a casualty from that era were Java applets that ran in browsers. Java despite coming into existence at the same time as the web suffered from being insecure. Now, all that is left that runs in Browsers is JavaScript.

JavaScript

JavaScript has matured from being a very ugly duckling around the turn of the century to a very powerful and elegant language. I doubt anything will replace it ever but until recently it suffered from being slow. From 2005 on when Google Maps first appeared JavaScript got increasingly faster, with JavaScript engines in browser engines competing to see which could be best.

Four years ago, a stripped down version of JavaScript called asm.js appeared. A transpiler is a program that converts one source language to another. In this case the transpiler is a program called emscripten. It uses LLVM technology to convert C/C++ to JavaScript in asm.js format.

Running Emscripten

This is cross platform on Windows, Macosx and Linux. I ran the Windows installer and it downloaded and installed 400 MB of files. After installing you open a command line then type in

emsdk list

It produces a big list of available and installed tools. On my Windows 10 I had clang-e135.0-64bit, python 23.7.5.3-64bit, emscripten-1.35.0 and sdk-1.35.0-64bit installed. You need to have python installed to run some of the tests but others just need compiling then running.

I followed the instructions to configure it for Visual Studio 2010 but it’s not quite working in VS 2015. That said, I think it’s more of a configuration issue. However after setting the three registry values mentioned below I was able to compile from the command line.

Configuration

On Windows there are three values that need to be set in the registry. Don’t fear, you’ll use the setx command line command to do them rather than editing the registry manually. These are listed on the Manually Integrating Emscripten from Visual Studio.

The three are CLANG_BIN, EMSCRIPTEN and EMCC_WEBBROWSER_EXE.
CLANG_BIN is where clang.exe is found. I installed Emscripten into my d:\program files so the full path was D:\Program Files\Emscripten\clang\e1.35.0_64bit and the command for me was

SETX CLANG_BIN "D:\Program Files\Emscripten\clang\e1.35.0_64bit"

Note the double quotes. If you don’t include these when you have spaces in your path you will get a confusing error message. ERROR: Invalid syntax. Default option is not allowed more than ‘2’ time(s). More details on that on StackOverflow so just add double quotes around paths that include spaces.

EMSCRIPTEM was where I installed the vs_tool folder (cloned from git- instructions on the manually integrating page- link above).

SETX EMSCRIPTEN D:\development\emscripten

and the EMCC_WEBBROWSER_EXE was the path to the browser executable. In this case Firefox though you could use Chrome.

SETX EMCC_WEBBROWSER_EXE "C:\Program Files (x86)\Mozilla Firefox\firefox.exe"

With those three set, open another command line window and change to the directory where you want to create project files and source code. I went straight to the tests folder, installed with EmScripten and ran the set environment variables bat file emsdk_env.bat. You need this to run Python and node.

Compiling

The first time you run emcc to transpile your C program into JavaScript it takes a coffee break length of time as it’s compiling various C libraries. After that it’s usually a second or two.
In the tests folder there are many C, C++ and Python test scripts and source code.
I tried test_egl.c with the command

emcc test_egl.c -o te.html

This outputs html and JavaScript file te.js, if you don’t include -o te.html then you just get the JavaScript file. It displays a red square in a browser. Not the most exciting demo.

The JavaScript files generated ranged in size from 488 KB to 760 KB. Mind you this includes support for a console windows below the canvas used for graphic output. The generated JavaScript files includes comments and are surprisingly readable, apart from the library routines.

Conclusions

Emscripten is excellent and not only supports C and C++ code, they’ve added other libraries so out of the box you get SQLite, SDL (the games library) and others.

Once configured, it’s easy to use and fast. It badly needs some work doing to bring the Visual Studio integration up-to-date as it only supports the ancient VS 2010.
However asm.js is not the end step. The biggest complaint about it was the size of files that needed to be downloaded.
There is a work in progress called WebAsssembly which provides its own binary that can be run by JavaScript interpreters. So it enables smaller downloads and faster start because much less compiling and interpreting is needed.
You can try it out if you’ve installed Emscripten by just adding this to the emcc command line. This

-s WASM=1 –o1

After compiling several more C libraries the WebAssembly compile failed, but again I think it’s just a configuration option. Read more about WebAssembly.

Post a Comment

Your email address will not be published.