Bachelor Degree Project WebAssembly for Web Developers Author: Olle Lauri Boström ​ Supervisor: Francis Palma ​ Semester. VT 2019 ​ Subject: Computer Science ​ Abstract One of the latest tools in the strive troughwards a fast and secure Web is called WebAssembly. It is a low-level, assembly-like language that can run in the browser alongside JavaScript. WebAssembly is designed to load fast and aims to execute at near-native speed. Being a compilation target for system languages like C, C++, and Rust, WebAssembly is not very accessible from a Web developer perspective. This project explores ways to generate WebAssembly directly from JavaScript code, in order to lower the learning curve, and allow for a more widespread adoption of WebAssembly. This has resulted in a utility tool called Esmbly, which can turn simple JavaScript ​ ​ ​ programs into WebAssembly binaries by collecting and utilizing type information from various flavours of statically typed JavaScript. Keywords: WebAssembly, Web developers, JavaScript, TypeScript, ​ Flow, JSDoc, V8, Transpiler Contents 1 Introduction 5 1.1 Background 6 1.1.1 Static vs dynamic types 6 1.1.2 JavaScript type systems 7 1.1.3 TypeScript 7 1.1.4 Flow 7 1.1.5 JSDoc 8 1.1.6 V8 runtime type information 9 1.1.7 Compiler 9 1.1.8 Transpiler 9 1.1.9 Abstract syntax tree 9 1.2 Related work 10 1.3 Problem formulation 11 1.4 Motivation 11 1.5 Objectives 12 1.6 Scope 13 1.7 Target group 14 1.8 Outline 14 2 Method 15 2.1 Design Science 15 2.2 Evaluation 15 3 Implementation 16 3.1 Project overview 16 3.1.1 Packages 16 3.1.2 Mono repository 16 3.1.3 TypeScript 17 3.2 Esmbly core 17 3.2.1 Run configuration 18 3.2.2 Parsing 18 3.3 Transformers 18 3.3.1 Parser options 19 3.3.2 Input and Output formats 19 3.3.3 Transforming the AST 19 3.3.4 Creating output files 20 3.4 Flow transformer 20 3.5 JSDoc transformer 20 3.6 V8 transformer 21 3.7 WebAssembly transformer 21 3.8 Examples 21 3.8.1 Example of ‘Add’ function 22 3.8.2 Example of ‘Conway's Game of Life’ 22 3.8.3 Example of Insertion sort 22 3.8.4 Example of ‘String pad’ 22 3.8.5 Example of ‘Radians’ 23 3.8.6 Example of ‘String repeat’ 23 3.8.7 Example of ‘Custom rule’ 23 3.8.8 Example of ‘Custom transformer’ 23 3.8.9 Example of ‘Browser’ 23 3.9 Documentation and guides 23 3.10 Tests 24 3.11 Integration with WebAssembly Studio 24 4 Results 25 4.1 Transforming the examples 25 4.1.1 Add example 25 4.1.2 Conway's Game of Life example 25 4.1.3 Insertion sort example 25 4.1.4 String pad example 25 4.1.5 Radians example 26 4.1.6 String repeat example 26 4.2 Transforming popular open source projects 26 4.2.1 Yarn 26 4.2.2 Lodash 26 4.2.3 ms 27 4.3 Extensibility 27 4.4 A tool for both Node.js and the Browser 27 4.5 Limitations 28 4.5.1 Flow transformer 28 4.5.2 JSDoc transformer 28 4.5.3 V8 transformer 28 4.5.4 WebAssembly transformer 28 5 Analysis 30 5.1 Lowers the WebAssembly-barrier for Web developers 30 5.2 Beyond the basics 30 5.3 A useful tool for migrating between (and working with) different type systems 31 6 Discussion 32 7 Conclusion 33 7.1 Future work 34 References 35 Appendix 38 A1 Add example 38 A2 Insertion sort example 40 A3 String pad example 42 A4 Radians example 44 A5 String repeat example 45 1 Introduction As the capabilities of the Web Platform increases, being able to write fast and secure code for the Web has become more important than ever. Demanding applications including 3D visualizations, virtual reality and games, which are traditionally built using native techniques, are now being built for the Web. Even though the performance progress of JavaScript, in terms of execution speed, has been high for the last ten years, the language is not very well suited for many of these demanding use cases [1][2]. One of the latest tools for writing fast and secure Web applications is called WebAssembly, a collaborative effort by the four major browser vendors (i.e., Google, Mozilla, Microsoft, and Apple). It is a low-level, assembly-like language which can run in the browser alongside JavaScript. WebAssembly is designed to load fast and aims to execute at near-native speed. WebAssembly works as a compilation target for system languages like C, C++, and Rust which means that it is now possible to take a piece of code written in one of these languages, compile it to WebAssembly, and run it on the Web. WebAssembly aims to bring native speed to the Web, but for a large majority of Web developers who are not familiar with any of the initially supported system languages, getting started can be hard. This thesis aims to make it easier for Web developers to start working with WebAssembly, by implementing a tool which can generate WebAssembly directly from JavaScript code. 1.1 Background 1.1.1 Static vs dynamic types Most system languages like C, C++, and Rust are statically typed. This ​ ​ means that variable types are specified by the programmer and known at compile time [4]. This is a requirement for compilation to WebAssembly. JavaScript, on the other hand, is dynamically typed without any built-in way ​ of expressing variable types. This means that type information is not available until the program is running [5]. 1.1.2 JavaScript type systems Even though JavaScript lacks a built-in way of expressing variable types, most code is written with a certain type in mind. This has lead to the development of several external type systems. Even though these type ​ ​ systems differ in their goals, all of them lets the programmer specify variable types. Using a type system, commonly referred to as statically typed ​ JavaScript has become increasingly popular over the past few years [6]. The State of JavaScript Survey 2018 shows that almost half of the responding developers have used TypeScript and that they are excited about using it again [6]. This project targets the three most popular type systems at the moment, TypeScript, Flow, and JSDoc. These are presented below. 1.1.3 TypeScript TypeScript is a superset of the JavaScript language which adds support for optional static types. TypeScript code compiles to JavaScript, and any type errors are caught at compile time. TypeScript is developed and maintained by Microsoft and released under an open source Apache license [7]. Figure 1.1 shows an example the TypeScript syntax. Figure 1.1: Code example showing a simple JavaScript function and the corresponding implementation in TypeScript. 1.1.4 Flow Flow is an static type checker developed by Facebook, released under an open source MIT license [8]. Flow uses a syntax that is similar to TypeScript, but unlike TypeScript it is not a programming language. Type annotations are added to the source code to specify variable types, which enables Flow to check for any type errors. Flow does not include a compiler like TypeScript, but there are tools for automatically removing the type annotations and output plain JavaScript. Figure 1.2 shows an example of a JavaScript function with Flow annotations. Figure 1.2: Code example showing a simple JavaScript function and the corresponding implementation with Flow annotations. 1.1.5 JSDoc JSDoc is different from TypeScript and Flow in several ways. Firstly, as suggested by the name, JSDoc is mainly a way of documenting JavaScript code as opposed to TypeScript and Flow, which focuses on type checking. Furthermore, TypeScript and Flow syntax is not valid JavaScript which means that the code cannot run before it has been transformed to plain JavaScript. JSDoc on the other hand is written in the form of regular JavaScript comments. This makes code that is annotated with JSDoc comments runnable without the need of any transformation. JSDoc is released under an open source Apache license and has been around for many years [9]. Figure 1.3 shows an example of a JavaScript function that has been annotated with a JSDoc comment. Figure 1.3: Code example showing a simple JavaScript function annotated with a JSDoc comment. 1.1.6 V8 runtime type information V8 is an open source JavaScript engine developed by Google that is used to power both Google Chrome and Node.js [10]. V8 exposes run time type ​ ​ information through the inspector protocol [11]. This means that when a ​ ​ JavaScript program is running on the V8 engine, we can use the inspector protocol to find out the parameter and return types in a program. This project aims to utilize this by experimenting with ways of collecting a type profile during test runs and use it to output WebAssembly. 1.1.7 Compiler A compiler is a computer program which transforms source code written in one programming language to another. Most commonly, this transformation is performed from a high-level programming language to a low-level language like assembly or machine code to create an executable program [12]. Like from instance, transforming a C program to WebAssembly. 1.1.8 Transpiler A transpiler is a source-to-source compiler. It transforms source code written in one high-level language to another (or the same) high-level language [12].