DOCSLIB.ORG

Hands on Webassembly

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text

Load more

Hands on WebAssembly Horacio Gonzalez @LostInBrittany Who are we? Introducing myself and introducing OVH OVHcloud Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter OVHcloud: A Global Leader 200k Private cloud VMs running Dedicated IaaS 1 Europe 30 Datacenters Own 20Tbps Netwok with Hosting capacity : 35 PoPs 1.3M Physical Servers 360k Servers already > 1.3M Customers in 138 Countries deployed OVHcloud: Our solutions Mobile Web Cloud Hosting Hosting Telecom VPS Containers▪ Dedicated Server Domain names VoIP Public Cloud Compute▪ Data Storage Email SMS/Fax Private Cloud Database▪ Network and CDN Virtual desktop Security Serveur dédié Object Storage Web hosting Cloud Storage ▪ Licences Cloud Desktop Securities MS Office Over the Box Hybrid Cloud Messaging MS solutions How is the codelab structured? What are we coding today? A GitHub repository https://github.com/LostInBrittany/wasm-codelab Nothing to install Using WebAssembly Explorer and WebAssembly Studio Only additional tool: a web server Because of the browser security model Procedure: follow the steps Step by step But before coding, let's speak What's this WebAssembly thing? Did we say WebAssembly? WASM for the friends... WebAssembly, what's that? Let's try to answer those (and other) questions... A low-level binary format for the web Not a programming language A compilation target That runs on a stack-based virtual machine A portable binary format that runs on all modern browsers… but also on NodeJS! With several key advantages But above all... WebAssembly is not meant to replace JavaScript Who is using WebAssembly today? And many more others... A bit of history Remembering the past to better understand the present Executing other languages in the browser A long story, with many failures... 2012 - From C to JS: enter emscripten Passing by LLVM pivot Wait, dude! What's LLVM? A set of compiler and toolchain technologies 2013 - Generated JS is slow… Let's use only a strict subset of JS: asm.js Only features adapted to AOT optimization WebAssembly project Joint effort Hello W(ASM)orld My first WebAssembly program Do you remember your 101 C course? A simple HelloWorld in C We compile it with emscripten We get a .wasm file... Binary file, in the binary WASM format We also get a .js file... Wrapping the WASM And a .html file To quickly execute in the browser our WASM And in a more Real WorldTM case? A simple process: ● Write or use existing code ○ In C, C++, Rust, Go, AssemblyScript... ● Compile ○ Get a binary .wasm file ● Include ○ The .wasm file into a project ● Instantiate ○ Async JavaScript compiling and instantiating the .wasm binary I don't want to install a compiler now... Let's use WASM Explorer https://mbebenita.github.io/WasmExplorer/ Let's begin with the a simple function WAT: WebAssembly Text Format Human readable version of the .wasm binary Download the binary .wasm file Now we need to call it from JS... Instantiating the WASM 1. Get the .wasm binary file into an array buffer 2. Compile the bytes into a WebAssembly module 3. Instantiate the WebAssembly module Instantiating the WASM Loading the squarer function We instantiate the WASM by loading the wrapping JS Using it! Directly from the browser console (it's a simple demo…) You sold us a codelab! Stop speaking and let us code You can do steps 01 and 02 now Let's code, mates! WASM outside the browser Not only for web developers Run any code on any client… almost Languages compiling to WASM Includes WAPM The WebAssembly Package Manager Some use cases What can I do with it? Tapping into other languages ecosystems Don't rewrite libs anymore Replacing problematic JS bits Predictable performance Same peak performance, but less variation Communicating between JS and WASM Shared memory, functions... Native WASM types are limited WASM currently has four available types: ● i32: 32-bit integer ● i64: 64-bit integer ● f32: 32-bit float ● f64: 64-bit float Types from languages compiled to WASM are mapped to these types How can we share data? Using the same data in WASM and JS? Shared linear memory between them! You can do steps 03 and 04 now Let's code, mates! AssemblyScript Writing WASM without learning a new language TypeScript subset compiled to WASM Why would I want to compile TypeScript to WASM? Ahead of Time compiled TypeScript More predictable performance Avoiding the dynamicness of JavaScript More specific integer and floating point types Objects cannot flow in and out of WASM yet Using a loader to write/read them to/from memory No direct access to DOM Glue code using exports/imports to/from JavaScript You can do step 05 now Let's code, mates! Future To the infinity and beyond! WebAssembly Threads Threads on Web Workers with shared linear memory SIMD Garbage collector And exception handling WASI WebAssembly System Interface WebAssembly ❤ Web Components How to hide the complexity and remove friction The 3 minutes context What the heck are web component? Web Components Web standard W3C Web Components Available in all modern browsers: Firefox, Safari, Chrome Web Components Create your own HTML tags Encapsulating look and behavior Web Components Fully interoperable With other web components, with any framework Web Components CUSTOM ELEMENTS SHADOW DOM TEMPLATES Custom Element To define your own HTML tag <body> ... <script> window.customElements.define('my-element', class extends HTMLElement {...}); </script> <my-element></my-element> </body> Shadow DOM To encapsulate subtree and style in an element <button>Hello, world!</button> <script> var host = document.querySelector('button'); const shadowRoot = host.attachShadow({mode:'open'}); shadowRoot.textContent = 'こんにちは、影の世界!'; </script> Template To have clonable document template <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> var t = document.querySelector('#mytemplate'); // Populate the src at runtime. t.content.querySelector('img').src = 'logo.png'; var clone = document.importNode(t.content, true); document.body.appendChild(clone); But in fact, it’s just an element… ● Attributes ● Properties ● Methods ● Events You can do step 06 and 07 now Let's code, mates!.
Recommended publications
  • Differential Fuzzing the Webassembly

    Differential Fuzzing the Webassembly

    Master’s Programme in Security and Cloud Computing Differential Fuzzing the WebAssembly Master’s Thesis Gilang Mentari Hamidy MASTER’S THESIS Aalto University - EURECOM MASTER’STHESIS 2020 Differential Fuzzing the WebAssembly Fuzzing Différentiel le WebAssembly Gilang Mentari Hamidy This thesis is a public document and does not contain any confidential information. Cette thèse est un document public et ne contient aucun information confidentielle. Thesis submitted in partial fulfillment of the requirements for the degree of Master of Science in Technology. Antibes, 27 July 2020 Supervisor: Prof. Davide Balzarotti, EURECOM Co-Supervisor: Prof. Jan-Erik Ekberg, Aalto University Copyright © 2020 Gilang Mentari Hamidy Aalto University - School of Science EURECOM Master’s Programme in Security and Cloud Computing Abstract Author Gilang Mentari Hamidy Title Differential Fuzzing the WebAssembly School School of Science Degree programme Master of Science Major Security and Cloud Computing (SECCLO) Code SCI3084 Supervisor Prof. Davide Balzarotti, EURECOM Prof. Jan-Erik Ekberg, Aalto University Level Master’s thesis Date 27 July 2020 Pages 133 Language English Abstract WebAssembly, colloquially known as Wasm, is a specification for an intermediate representation that is suitable for the web environment, particularly in the client-side. It provides a machine abstraction and hardware-agnostic instruction sets, where a high-level programming language can target the compilation to the Wasm instead of specific hardware architecture. The JavaScript engine implements the Wasm specification and recompiles the Wasm instruction to the target machine instruction where the program is executed. Technically, Wasm is similar to a popular virtual machine bytecode, such as Java Virtual Machine (JVM) or Microsoft Intermediate Language (MSIL).
  • Emscripten: an LLVM to Javascript Compiler

    Emscripten: an LLVM to Javascript Compiler

    Emscripten: An LLVM to JavaScript Compiler Alon Zakai Mozilla What? Why? Compiling to JavaScript ● The web is everywhere – PCs to iPads – No plugins, no installation required – Built on standards ● The web runs JavaScript Existing Compilers to JavaScript ● Google Web Toolkit: Java (Gmail, etc.) ● CoffeeScript ● Pyjamas: Python ● SCM2JS: Scheme ● JSIL: .NET bytecode ● (and many more) ● But C and C++ are missing! Emscripten ● Enables compiling C and C++ into JavaScript ● Written in JavaScript ● Open source http://emscripten.org https://github.com/kripken/emscripten Demos! ● Bullet ● SQLite ● Python, Ruby, Lua ● Real-world code – Large, complex codebases ● Manual ports exist – Typically partial and not up to date The Big Picture C or C++ LLVM Bitcode JavaScript Low Level Virtual Machine (LLVM) ● A compiler project (cf. GCC) ● Intermediate Representation: LLVM bitcode – Very well documented – Great tools ● Much easier to compile LLVM bitcode than compile C or C++ directly! How? Code Comparison #include <stdio.h> int main() { printf(“hello, world!\n”); return 0; } Code Comparison @.str = private unnamed_addr constant [15 x i8] c"hello, world!\0A\00", align 1 define i32 @main() { entry: %retval = alloca i32, align 4 call i32 (i8*, ...)* @printf(i8* getelementptr inbounds ([15 x i8]* @.str, i32 0, i32 0)) store i32 0, i32* %retval ret i32 %retval } Code Comparison define i32 @main() { function _main() { entry: %retval = alloca i32, var _retval; align 4 call i32 (i8*, ...)* _printf (..); @printf (..) store i32 0, i32* _retval = 0; %retval ret
  • Browser Security Information

    Browser Security Information

    Browser Security Information Customer security is important to us. Our top priority is to protect the privacy of your personal account information and your financial transactions FirstLine Mortgages is leading the way in Internet banking services and uses several layers of robust security technology to help ensure the confidentiality of transactions across the Internet. The first security level begins with your Web browser. When you access FirstLine Mortgages Internet Site , your browser is checked to ensure that it meets our minimum requirements. Additionally, we only allow customers with browsers that use 128-bit encryption (one of the highest levels of browser security available today) to bank on our web site. But, even with this validation, there are other precautions you should follow to maximize your protection. You have a responsibility to ensure your own security. The browser validation will verify the browser type you are using, your browser encryption level, the version of Netscape or Microsoft browser, as well as Javascript and cookies being enabled. To access -FirstLine Mortgages Internet site , you need to use: • a Netscape browser version 4.06 or better with a minimum 128-bit encryption technology • a Microsoft browser version 4.01 SP2 or better with a minimum 128-bit encryption technology • Javascript (please see below for more information about how to check and enable Javascript support) • Cookies (see below) If your browser does not meet all of these requirements, you will need to upgrade your browser to access the FirstLine Internet Site . To upgrade your browser, select the Netscape or Microsoft button below and download the latest browser version.
  • But Were Afraid to Ask!)

    But Were Afraid to Ask!)

    05_576593 ch01.qxd 10/12/04 9:55 PM Page 9 Chapter 1 All You Ever Wanted to Know about JavaScript (But Were Afraid to Ask!) In This Chapter ᮣ Understanding a working definition of JavaScript ᮣ Dispelling common JavaScript misconceptions ᮣ Getting started with JavaScript tools ᮣ Finding information online aybe you’ve surfed to a Web site that incorporates really cool features, Msuch as ߜ Images that change when you move your mouse over them ߜ Slideshow animations ߜ Input forms with pop-up messages that help you fill in fields correctly ߜ Customized messages that welcome repeat visitors By using JavaScript and the book you’re reading right now you can create all these effects and many more! The Web page in Figure 1-1 shows you an example COPYRIGHTEDof the kinds of things that you canMATERIAL look forward to creating for your own site. A lot has changed since the previous edition of JavaScript For Dummies came out. Perhaps the biggest change is the evolution of DHTML, or dynamic HTML. DHTML refers to JavaScript combined with HTML and cascading style sheets, and it’s a powerful combination you can use to create even more breathtak- ingly cool Web sites than ever before. 05_576593 ch01.qxd 10/12/04 9:55 PM Page 10 10 Part I: Building Killer Web Pages for Fun and Profit Figure 1-1: JavaScript lets you add interactive features to your Web site quickly and easily. Along with this increased power comes increased complexity, unfortunately — but that’s where this new, improved, better-tasting edition of JavaScript For Dummies comes in! Even if you’re not a crackerjack programmer, you can use the techniques and sample scripts in this book to create interactive Web pages bursting with animated effects.
  • Seamless Offloading of Web App Computations from Mobile Device to Edge Clouds Via HTML5 Web Worker Migration

    Seamless Offloading of Web App Computations from Mobile Device to Edge Clouds Via HTML5 Web Worker Migration

    Seamless Offloading of Web App Computations From Mobile Device to Edge Clouds via HTML5 Web Worker Migration Hyuk Jin Jeong Seoul National University SoCC 2019 Virtual Machine & Optimization Laboratory Department of Electrical and Computer Engineering Seoul National University Computation Offloading Mobile clients have limited hardware resources Require computation offloading to servers E.g., cloud gaming or cloud ML services for mobile Traditional cloud servers are located far from clients Suffer from high latency 60~70 ms (RTT from our lab to the closest Google Cloud DC) Latency<50 ms is preferred for time-critical games Cloud data center End device [Kjetil Raaen, NIK 2014] 2 Virtual Machine & Optimization Laboratory Edge Cloud Edge servers are located at the edge of the network Provide ultra low (~a few ms) latency Central Clouds Mobile WiFi APs Small cells Edge Device Cloud Clouds What if a user moves? 3 Virtual Machine & Optimization Laboratory A Major Issue: User Mobility How to seamlessly provide a service when a user moves to a different server? Resume the service at the new server What if execution state (e.g., game data) remains on the previous server? This is a challenging problem Edge computing community has struggled to solve it • VM Handoff [Ha et al. SEC’ 17], Container Migration [Lele Ma et al. SEC’ 17], Serverless Edge Computing [Claudio Cicconetti et al. PerCom’ 19] We propose a new approach for web apps based on app migration techniques 4 Virtual Machine & Optimization Laboratory Outline Motivation Proposed system WebAssembly
  • Webassembly a New World of Native Exploits on the Web Agenda

    Webassembly a New World of Native Exploits on the Web Agenda

    WebAssembly A New World Of Native Exploits On The Web Agenda • Introduction • The WebAssembly Platform • Emscripten • Possible Exploit Scenarios • Conclusion Wasm: What is it good for? ● Archive.org web emulators ● Image/processing ● Video Games ● 3D Modeling ● Cryptography Libraries ● Desktop Application Ports Wasm: Crazy Incoming ● Browsix, jslinux ● Runtime.js (Node), Nebulet ● Cervus ● eWASM Java Applet Joke Slide ● Sandboxed ● Virtual Machine, runs its own instruction set ● Runs in your browser ● Write once, run anywhere ● In the future, will be embedded in other targets What Is WebAssembly? ● A relatively small set of low-level instructions ○ Instructions are executed by browsers ● Native code can be compiled into WebAssembly ○ Allows web developers to take their native C/C++ code to the browser ■ Or Rust, or Go, or anything else that can compile to Wasm ○ Improved Performance Over JavaScript ● Already widely supported in the latest versions of all major browsers ○ Not limited to running in browsers, Wasm could be anywhere Wasm: A Stack Machine Text Format Example Linear Memory Model Subtitle Function Pointers Wasm in the Browser ● Wasm doesn’t have access to memory, DOM, etc. ● Wasm functions can be exported to be callable from JS ● JS functions can be imported into Wasm ● Wasm’s linear memory is a JS resizable ArrayBuffer ● Memory can be shared across instances of Wasm ● Tables are accessible via JS, or can be shared to other instances of Wasm Demo: Wasm in a nutshell Emscripten ● Emscripten is an SDK that compiles C/C++ into .wasm binaries ● LLVM/Clang derivative ● Includes built-in C libraries, etc. ● Also produces JS and HTML code to allow easy integration into a site.
  • Superoptimization of Webassembly Bytecode

    Superoptimization of Webassembly Bytecode

    Superoptimization of WebAssembly Bytecode Javier Cabrera Arteaga Shrinish Donde Jian Gu Orestis Floros [email protected] [email protected] [email protected] [email protected] Lucas Satabin Benoit Baudry Martin Monperrus [email protected] [email protected] [email protected] ABSTRACT 2 BACKGROUND Motivated by the fast adoption of WebAssembly, we propose the 2.1 WebAssembly first functional pipeline to support the superoptimization of Web- WebAssembly is a binary instruction format for a stack-based vir- Assembly bytecode. Our pipeline works over LLVM and Souper. tual machine [17]. As described in the WebAssembly Core Specifica- We evaluate our superoptimization pipeline with 12 programs from tion [7], WebAssembly is a portable, low-level code format designed the Rosetta code project. Our pipeline improves the code section for efficient execution and compact representation. WebAssembly size of 8 out of 12 programs. We discuss the challenges faced in has been first announced publicly in 2015. Since 2017, it has been superoptimization of WebAssembly with two case studies. implemented by four major web browsers (Chrome, Edge, Firefox, and Safari). A paper by Haas et al. [11] formalizes the language and 1 INTRODUCTION its type system, and explains the design rationale. The main goal of WebAssembly is to enable high performance After HTML, CSS, and JavaScript, WebAssembly (WASM) has be- applications on the web. WebAssembly can run as a standalone VM come the fourth standard language for web development [7]. This or in other environments such as Arduino [10]. It is independent new language has been designed to be fast, platform-independent, of any specific hardware or languages and can be compiled for and experiments have shown that WebAssembly can have an over- modern architectures or devices, from a wide variety of high-level head as low as 10% compared to native code [11].
  • Javascript to Webassembly Cross Compiler Studienarbeit

    Javascript to Webassembly Cross Compiler Studienarbeit

    JavaScript to WebAssembly Cross Compiler Studienarbeit Abteilung Informatik Hochschule für Technik Rapperswil Herbstsemester 2018 Autoren: Matteo Kamm, Mike Marti Betreuer: Prof. Dr. Luc Bläser Projektpartner: Institute for Networked Solutions Inhaltsverzeichnis 1 Abstract 3 2 Einführung 4 2.1 Ausgangslage . .4 2.2 Übersicht . .5 2.2.1 Beispiel . .6 2.3 Struktur des Berichts . .7 3 Language Set 8 3.1 Grundsatz des Subsets . .8 3.2 Typen . .9 3.3 Unterstützte Sprachkonstrukte . .9 4 Cross Compilation 11 4.1 Typinferenz . 11 4.2 Template-Based Code Generation . 11 4.2.1 Unäre Operatoren . 12 4.2.2 Binäre Operationen . 12 4.2.3 Expression Statements . 13 4.2.4 Arrayzugriffe . 13 4.3 Control Flow . 15 4.3.1 Block Statement . 15 4.3.2 Branching . 15 4.3.3 While-Loop . 17 4.3.4 For-Loop . 19 4.4 Variablen-Allokation . 19 4.5 Funktionsaufrufe . 20 5 Laufzeitunterstützung 21 5.1 Prüfen der Funktionssignatur . 21 5.2 Kopieren der Array Parameter . 21 5.3 Konvertieren des zurückgegebenen Resultats . 21 5.4 Out Parameter . 21 5.5 Speicher . 22 5.5.1 Import . 22 5.5.2 Export . 22 6 Auswertung 23 6.1 Testfälle . 23 6.2 Setup . 23 6.3 Resultate . 24 6.3.1 Speedup . 24 6.3.2 Varianz . 26 6.3.3 Vergleich zu C++ . 27 6.3.4 Webpack Development Modus . 28 6.4 Fazit . 28 7 Schlussfolgerung 29 7.1 Ausblick . 29 1 Anhang 30 A Erläuterung Language Set 30 A.1 Typen . 30 A.2 Numerische Erweiterung . 30 A.3 Abweichungen der binären Operatoren zu JavaScript .
  • Javascript Security

    Javascript Security

    Color profile: Generic CMYK printer profile Composite Default screen Complete Reference / JavaScript: TCR / Powell & Schneider / 225357-6 / Chapter 22 Blind Folio 679 22 JavaScript Security ownloading and running programs written by unknown parties is a dangerous proposition. A program available on the Web could work as advertised, but then Dagain it could also install spyware, a backdoor into your system, or a virus, or exhibit even worse behavior such as stealing or deleting your data. The decision to take the risk of running executable programs is typically explicit; you have to download the program and assert your desire to run it by confirming a dialog box or double-clicking the program’s icon. But most people don’t think about the fact that nearly every time they load a Web page, they’re doing something very similar: inviting code—in this case, JavaScript—written by an unknown party to execute on their computer. Since it would be phenomenally annoying to have to confirm your wish to run JavaScript each time you loaded a new Web page, the browser implements a security policy designed to reduce the risk such code poses to you. A security policy is simply a set of rules governing what scripts can do, and under what circumstances. For example, it seems reasonable to expect browsers’ security policies to prohibit JavaScript included on Web pages downloaded from the Internet from having access to the files on your computer. If they didn’t, any Web page you visited could steal or destroy all of your files! In this chapter we examine the security policies browsers enforce on JavaScript embedded in Web pages.
  • Hi, My Name Is Chad Ausen, Technical Director at IMVU, and Today We're Go

    Hi, My Name Is Chad Ausen, Technical Director at IMVU, and Today We're Go

    Hi, my name is Chad Aus0n, technical director at IMVU, and today we’re going to talk about a library we’ve developed for connec0ng C++ and JavaScript with Emscripten. 1 2 IMVU is an online social plaorm where you can sign up, dress up an avatar, and meet people from all around the world. We offer other ac0vi0es such as games as well. 3 The content in our world is created by our customers, and to our knowledge, we have the largest catalog of 3D virtual goods on the Internet. 4 We currently offer a downloadable applicaon for Windows and Mac. Windows and Mac are great plaorms, but in recent years, other plaorms have grown to prominence. We’d like our content available everywhere: mobile plaorms, desktop, server-side renderers, and even the web browser! For almost all plaorms, it’s obvious that C++ is a great choice for the core engine. However, our big ques0on was, what about the web browser? In 2011, I benchmarked an upcoming tool called Emscripten and was quite impressed. 5 Emscripten works very well in prac0ce, so the implicaon is that C++ is the portable, high-performance language EVERYWHERE. 6 Here is our Emscripten applicaon running in Firefox. UI is HTML and CSS. Chat over WebSockets, graphics in WebGL. 7 asm.js is the subset of JavaScript that can be stacally compiled into machine code. More informaon at h`p://asmjs.org/ 8 The C heap is stored in an ArrayBuffer in JavaScript. One con0guous blob of memory. This memory is indexed by eight different typed array views that alias each other.
  • View the Index

    View the Index

    INDEX Symbol public, 248, 258 !! (JavaScript), 47, 53 runtime, 248, 255, 257 super, 263 A AssemblyScript loader, 247, 248, accumulator machine, 221 251–256, 260–266 accumulator register, 220 __allocString, 255 ActionScript Virtual Machine 2 demangle, 264 (AVM2), 9 __getString, 255 Advanced RISC Machine (ARM), 9 __newString, 255 alert (JavaScript), 232, 245 async (JavaScript), 24 allocates memory, 189 ATmega328, 117 __allocString (AssemblyScript AVM2 (ActionScript Virtual loader), 255 Machine 2), 9 AND mask, 80, 106 anyfunc (WAT), 59–60 B ArrayBuffer (JavaScript), 116 base address, 126 asc, 248, 255, 257, 261, 262, 263, 267 base index, 130 --exportRuntime, 255 benchmark (benchmark.js), 216 -h, 248 mean, 217 --importMemory, 252 run, 217 -o, 257, 258 sort, 217 -O, 248 suite, 217 -Oz, 249 suite.add, 217 --sourceMap, 248 suite.on, 217 ASCII, 88, 103, 106, 108, 112, 251 biased exponent, 75 Assembly language, 6 big-endian, 84, 93 AssemblyScript, 3, 6, 197, 198, 247–268 BigInt, 25, 73 class, 262, 263, 266 binary, 70, 101, 110, 147, 148, 151, 152, declare, 250 154, 155 export, 249 Binaryen, 197, 213 f64, 257 Binaryen optimizer, 208 function, 249 bit flipping, 73, 83 garbage collection, 248 bit manipulation, 71, 79 i32, 249 bit masking, 80 installing, 248 bit rotation, 80 private, 247, 248, 258, 259, 261, bit shifting, 79 262, 267 bitwise AND, 80, 212 protected, 248, 258 bitwise OR, 82 block (HTML), 145 r0, 221 block (WAT), 37, 38, 39, 50 StackCheck, 221 body (HTML), 145, 146, 149, 150 Star, 221 Bottom-Up (Chrome profiler), 192 TestLessThan, 221
  • Static Typescript

    Static Typescript

    1 Static TypeScript 56 2 57 3 An Implementation of a Static Compiler for the TypeScript Language 58 4 59 5 60 6 Thomas Ball Peli de Halleux Michał Moskal 61 7 Microsoft Research Microsoft Research Microsoft Research 62 8 Redmond, WA, United States Redmond, WA, United States Redmond, WA, United States 63 9 [email protected] [email protected] [email protected] 64 10 Abstract 65 11 66 12 While the programming of microcontroller-based embed- 67 13 dable devices typically is the realm of the C language, such 68 14 devices are now finding their way into the classroom forCS 69 15 education, even at the level of middle school. As a result, the 70 16 use of scripting languages (such as JavaScript and Python) 71 17 for microcontrollers is on the rise. 72 18 We present Static TypeScript (STS), a subset of TypeScript (a) (b) 73 19 (itself, a gradually typed superset of JavaScript), and its com- 74 20 piler/linker toolchain, which is implemented fully in Type- Figure 1. Two Cortex-M0 microcontroller-based educational 75 21 Script and runs in the web browser. STS is designed to be use- devices: (a) the BBC micro:bit has a Nordic nRF51822 MCU 76 22 ful in practice (especially in education), while being amenable with 16 kB RAM and 256 kB flash; (b) Adafruit’s Circuit Play- 77 23 to static compilation targeting small devices. A user’s STS ground Express (https://adafruit.com/products/3333) has an 78 24 program is compiled to machine code in the browser and Atmel SAMD21 MCU with 32 kB RAM and 256 kB flash.