WebAssembly

This section introduces WebAssembly and its application in Samsung TVs..

Related Info

Introduction

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.

Typical WebAssembly Web Application Structure

The following sections cover the structure of a typical WebAssembly Web application.

Application Contents

A WebAssembly Web application is composed of at least the following files:

  • An "index.html" file - Defines the web page that the WebAssembly modules run on. You can include other HTML5 and JavaScript elements, such as additional HTML files, CSS styles, and JavaScript code.
  • A "config.xml" file - Contains the configuration for the Samsung Web application. This file is automatically generated by the Tizen Studio, but can be omitted when testing the application in a web browser.
  • At least 1 ".wasm" file: A binary compiled using a WebAssembly toolchain.

Figure 1. Creating a WebAssembly Application

HTML Web Page

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.

Configuration File

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.

The Native Code

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.

Application Code in C/C++

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;
}

Required Tools

  1. Samsung Emscripten SDK
  2. Tizen Studio with the TV-Extension

Let's Create a WebAssembly TV App!

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.