Intel® Developer Zone offers tools and how-to information for cross-platform app development, platform and technology information, code samples, and peer expertise to help developers innovate and succeed. Join our communities for Android, Internet of Things, Intel® RealSense™ Technology, and Windows to download tools, access dev kits, share ideas with like-minded developers, and participate in hackathon’s, contests, roadshows, and local events.
Introduction
Emscripten Compiles C and C++ to Javascript. This allows for running C and C++ programs with HTML5. Intel(R) XDK is an HTML5 Cross-platform Development Tool and provides an easy and fast way to get your apps to market. Emscripten Compiler and Intel XDK now gives you another option to publish apps using C and C++ as part of the application.
Motivation
C and C++ are among the most widely used, most well understood and most active programming languages. Programs and libraries based on C and C++ continue to be actively created and maintained. Tools, techniques, documentation, programming practices and developer expertise has made C and C++ the language of choice for creating programming logic for a large number of application developers.
There has been a relentless desire to run C and C++ programs with web user agents, notable projects include Netscape Plugin API (NPAPI) from 1995 and Native Clients (NaCL/PnaCL) have been available since 2010.
Emscripten is different. It leverages LLVM Compiler front end infrastructure and outputs to a subset of Javascript called ASM.js. As a direct result, C and C++ programs can be compiled to run on Javascript without requiring any plugins.
Intel® XDK is an HTML5 Cross-platform Development Tool provides a simplified workflow to enable developers to easily design, debug, build, and deploy to app stores.
Who could benefit from using Emscripten to compile C++ Apps into JS?
1. C++ library and application developers interested in reaching a larger user base.
Developers interested in distributing compiled software to HTML5 developers are able to reach the audience by leveraging the Emscripten build infrastructure.
Since JavaScript(JS) is able to run natively in browsers and webview in native mobile applications, JS apps enjoy wide distribution on multiple OS running in the browser. Using the Intel XDK, you are able to target apps to Google* Android OS, Google* Chrome OS, Apple iOS and distributable through the Android* Play store and Apple* Store.
JS as part of the HTML5 ecosystem including Cascading Style Sheets (CSS) is capable of rich and responsive user interface, allowing you to 'skin' the application to customize the look and feel to your target audience.
Developers are able to choose a distribution model that best fits their preference to open source (or not) with emscripten generated JS assembly files.
Intel XDK provides an easy and fast way to get your apps to market.
2. JS developers interested in accessing features currently available only in C or C++ libraries.
Emscripten provides a rich two way communication between JS and C++ functions with the 'embind' tools. JS developers are able to access C and C++ functions and C++ classes from JS intuitively.
Strengths of the Emscripten tool chain
* C and C++ compatibility
Emscripten relies on the Clang front end and libc++ and therefore provides compatibility with C++11 and C++14 standard and the C99 standard. [Note: Some restrictions exist with using Raw pointers]
* Interacting with Javascript and the DOM
Embind toolchain makes it relatively easy to interoperate between JS and C++. It is possible to provide classes in JS that are callable from C++ and C++ classes that are callable from JS.
* Debugging
JS developer tools including Chrome DevTools and Firefox support source maps.
Emcc generates .map files that makes debugging effective and intuitive.
What to keep in mind
JS is still single threaded. Multithread constructs will still function but the app will run as a single threaded app.
Support of SIMD.js means that close to native performance is possible. Intel Crosswalk provides SIMD support on device. SIMD is not yet supported in the emulator.
Getting started using Emscripten
Using prebuilt Javascript Libraries
Perhaps the easiest way to get benefit from Emscripten is to include prebuilt libraries in your project. Popular examples include ocrad (OCR in Javascript), SQLite in Javascript, physics engines ammo.js and box2d.js.
Import HTML5 projects into Intel XDK as you normally do. Please refer to this introduction to import existing HTML5 projects into Intel XDK.
Installing the latest version of Emscripten
Note that the following instructions are independent of the Intel XDK installation.
Download and install the latest version of Emscripten tool chain on your system following directions on the Emscripten website https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html.
Verify correct installation
Assuming your installation is correct, you should now have emcc available. Verify emcc installation by typing the following at the command prompt.
>emcc -v
Build a hello world program
In your favorite editor, create and save a file called hello.cpp with the following content.
#include <stdio.h>
int main() {
printf("Hello World!");
return 0;
}
While you are able to use any editor to edit your C/C++ files, Intel XDK's built in editor has the ability to edit C/C++ files
Compile and link to JS
> emcc hello.cpp -o index.js
Include this js script in your html project.
Here is an example content index.html file
<!DOCTYPE HTML>
<head>
<title>emcc Hello World</title>
</head>
<body>
<script src="index.js"></script>
</body>
Import the project in the Intel XDK and open it in the emulator or in the Live Layout browser in the editor.
Notice that in the console, in addition to the "Hello world" message, you will see the mean prep time added for you by emcc.
Performance optimization
Default optimization level (-O0) is best to validate correct functionality. Debug experience is more pleasant at this optimization level. Once the functionality is verified, higher optimization levels -O2 or -O3 could give additional performance. O3 enables vectorization.
Refer: https://kripken.github.io/emscripten-site/docs/optimizing/Optimizing-Code.html
Importing, Debugging and Building the HTML5 app in the Intel XDK
You are able to import, build and debug emscripten generated HTML5 apps in the Intel XDK as you normally would with HTML5 apps. You are able to include Cordova API calls as needed. Please see the Intel XDK Getting started tutorial for more information.
