This section introduces WebAssembly and its application in Samsung smart devices.
WebAssembly
WebAssembly on Mozilla Developer Network
WebAssembly provides a way to run C and C++ code (among others) on the web at near native speed.
WebAssembly is designed to complement and run alongside JavaScript. By using the WebAssembly JavaScript APIs, you can load WebAssembly modules into a JavaScript Smart device application and share functionality between the two.
WebAssembly is being developed as a web standard via the W3C WebAssembly Working Group and Community Group with active participation from all major browser vendors.
Samsung smart devices support WebAssembly from Tizen 5.5 (2020 models) onwards.
The following sections cover the structure of a typical WebAssembly Web application.
A WebAssembly Web application is composed of at least the following files:
Figure 1. Creating a WebAssembly Application
The "index.html" file is a standard HTML file. To implement WebAssembly modules in the application, you need to use one of the methods presented on the Loading and running WebAssembly code page. Tizen Studio generates required HTML and JavaScript code snippets that wrap one of those methods automatically when sample WebAssembly modules are added.
Generated HTML snippet:
<script src="wasm_modules/scripts/wasm_tools.js"></script> ... <!-- WASM MODULE START: wasm_module1 --> <div class="wasm_module1_class"> <h1>WebAssembly Module: wasm_module1</h1> <canvas class="wasm_module1_class" id="wasm_module1_canvas"oncontextmenu="event.preventDefault()" tabindex="-1" width="400" height="200"></canvas> <textarea class="wasm_module1_class" id="wasm_module1_output" rows="24" cols="80"></textarea> <script src="wasm_modules/wasm_module1/CurrentBin/wasm_module1.js"></script> <script> var wasm_module1 = new Proxy( new ModuleLoader( 'wasm_modules/wasm_module1/CurrentBin/wasm_module1.wasm', wasm_module1, document.getElementById('wasm_module1_canvas'), document.getElementById('wasm_module1_output')), ModuleLoaderProxyHandler); </script> </div> <!-- WASM MODULE END: wasm_module1 -->
The ModuleLoader JavaScript class of the generated helper code supports passing canvas and textarea objects to it, so that the loaded WebAssembly module can work with both graphics and text output elements of the web page.
ModuleLoader
canvas
textarea
The "config.xml" file is a Tizen-specific file that is created for every Tizen application. The file is automatically generated by the Tizen Studio. The following is an example of a "config.xml" file:
<?xml version="1.0" encoding="UTF-8"?> <widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/BasicProject" version="1.0.0" viewmodes="maximized"> <tizen:application id="2NTxWwsECr.BasicProject" package="2NTxWwsECr" required_version="2.3"/> <content src="index.html"/> <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/> <icon src="icon.png"/> <name>BasicProject</name> <tizen:profile name="tv-samsung"/> <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/> </widget>
For more information on the "config.xml" file structure, see the "Configuration Document" section in the W3C Widget Packaging and XML Configuration specification and Configuring Web Applications.
You need native code to exchange information with the web page of your application, which can, for example, provide the user interface. There are several ways described on how to achieve that in Interacting with code. The document shows how native objects may be used from JavaScript code and vice versa.
It is also possible that the native code does not communicate with the web page at all and it provides all the application functionality itself.
There are no specific requirements for the native application code. The only exception is the possible requirements for accessing native objects from JavaScript code, as described in Interacting with code.
To get started with a simple example, try a typical hello world example:
#include <iostream> int main() { std::cout << "Hello from native app" << std::endl; return 0; }
The following tools are required for creating WebAssembly applications:
For a step-by-step guide showing how to install the required tools and create a working WebAssembly Web application, see Setting Up Emscripten SDK and Tizen Studio and the other topics under the Getting Started folder.
For more in-depth description, see Adding Existing WebAssembly Modules to Web Applications and the other topics under the Advanced Development folder.