As a concrete example, we are going to revisit in TypeScript and with today's technologies the web interface to drive a roller shutter example that we implemented in 2019.
Structure of the project
- one or several HTML pages
- one or several TypeScript files (.ts)
- a tsconfig.json file, with the TypeScript compilation options
<title>Roller Shutter Control</title>
<!-- loading the compiled TypeScript code -->
<script type="module" src="app.js"></script>
<div id="mainUI" style="position: absolute; left:50%; top: 50%; text-align: center; font-family: sans-serif; width:30ex;">
Roller shutter control<br>
Note, for this module loading mechanism to work, you must imperatively compile the TypeScript code so that it produces an ECMAScript 2015 module, with the "module": "es2015" option in the tsconfig.json file.
To deploy this application on a YoctoHub-Ethernet, you must:
- install TypeScript if it wasn't already done, as described in this post;
- compile the TypeScript files by running the tsc command;
Here's how our roller shutter control application is loaded, as is:
The browser loading ECMAScript 2015 modules
- minification, which consists in suppressing spaces and shortening the name of local symbols
- compression per se, which consists in transferring the code as a binary compressed stream rather than using a text format, much heavier.
Luckily, we are not the first ones to look for such a tool: we finally found a small, simple and efficient tool called esbuild which does exactly what we want. And in the opposite to WebPack which drags with it a hundred or so dependencies, esbuild needs nothing but itself to work, and it's very fast.
To create our minified bundle, we only need to install esbuild and to run the following command in the same directory:
The --sourcemap argument enables us to create a app.min.js.map file which, if it is present on the server, enables us to debug directly in the source file rather than in the unreadable minified version.
Note that we have asked esbuild to create the bundle from the app.js file, and not from the app.ts TypeScript file. One might be tempted to do so since esbuild natively supports TypeScript, but unfortunately esbuild does not support the const enum types of TypeScript. Therefore, the compiled code is not compatible with the TypeScript libraries compiled with the official compiler, such as the Yoctopuce library. It's the only shortcoming that we encountered with this tool, but we can easily work around it by simply running tsc before creating the bundle.
If your application is designed to work from a traditional web sever, such as Apache, you only need to put the app.min.js file and the HTML file (referring to app.min.js instead of app.js) on the server. The transfer of the JS file is performed automatically in compressed mode if the server is properly configured, for example with mod_deflate.
Unfortunately, YoctoHubs don't have the computation power enabling compression on the fly. If you want your application to be transmitted compressed by a YoctoHub-Ethernet or a YoctoHub-Wireless-n, you must pre-compress the bundle in the GZIP format (.gz extension) before loading it on the YoctoHub.
Under Linux, this is done with the following command line:
and you get a app.min.js.gz of the minimum size.
Under Windows, instal the free 7-Zip tool and right-click on the app.min.js file. In the 7-Zip submenu, select the Add to archive... option to open 7-Zip. Select the gzip format, the Ultra compression level, and click on OK.
You then only need to put the HTML file and the app.min.js.gz file on the YoctoHub and your application is ready to run. When the browser tries to load the app.min.js file, the YoctoHub notices that it's not there as is but in GZIP format and sends it with a corresponding Content-Encoding so that it is transparent for the browser. Note, this feature was added recently, so take care to update the firmware of your YoctoHub before trying.
Here is the trace of the same application loading, this time bundled with esbuild and compressed:
The browser loading the compressed bundle
You can find all the files of this example in the Yoctopuce TypeScript library, in the example_html/Prog-Bundle subdirectory. We added to it a package.json file enabling you to locally install esbuild as a development dependency. You can thus use the following commands:
npm install to install the dependencies (esbuild and the Yoctopuce library)
npm run build to compile and build the bundle