DOCSLIB.ORG

Webassembly & Javascript

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Webassembly & Javascript CS/COE 1520 pitt.edu/~ach54/cs1520 WebAssembly WebAssembly ● WebAssembly is a low-level language that runs within the web browser with near-native performance for those tasks that demand that level of performance ○ Eg. Augmented/Virtual Reality, 3D Games, Video Editing ● Provides a compilation target for languages like C/C++ ● It is being created as an open standard by the W3C WebAssembly Community Group 2 Goals ● Be fast, efficient, and portable ● Be readable and debuggable ● Keep secure ● Don't break the web 3 WebAssembly & JavaScript ● JavaScript is used to load a WebAssembly file ● JavaScript can call the functions defined in the WebAssembly file ● The WebAssembly file can call functions defined in JavaScript ● Calls between WebAssembly and JavaScript are synchronous ● Note: WebAssembly cannot directly access Web APIs (DOM, WebGL, etc) 4 Key Concepts ● Module: Represents a WebAssembly binary that has been compiled by the browser into executable machine code. ● Memory: A resizable ArrayBuffer that contains the linear array of bytes read and written by WebAssembly’s low-level memory access instructions. ● Table: A resizable typed array of references that could not otherwise be stored as raw bytes in Memory. ● Instance: A Module paired with all the state it uses at runtime including a Memory, Table, and set of imported values. 5 Using ● There are two ways to use WebAssembly ○ As a compilation target. Several languages are currently supported ■ C/C++ ■ Rust ■ AssemblyScript ○ Writing WebAssembly directly 6 Compiling C to WebAssembly ● We can compile C to WebAssembly using Emscripten ● Emscripten compiles LLVM bytecode (which we get from using clang to compile c) into WebAssembly with a JavaScript “glue” file ● The “glue” file compiles and instantiates the WebAssembly module as well as placing in any code needed to convert C libraries into Web APIs ○ Eg. OpenGL translation to WebGL 7 Emscripten outputs for hello.c ● WebAssembly (hello.wasm) and JavaScript (hello.js) ○ emcc -o hello.js hello.c ● WebAssembly (hello.wasm) and JavaScript(hello.js) and HTML (hello.html) ○ emcc -o hello.html hello.c ○ The hello.html file will show a console output as well as a canvas for any WebGL content ○ You can view this content with emrun hello.html 8 So everything has to go in main, right? ● No ● We can call C functions but we must explicitly export them ○ To do that, we need to make two changes to our source file ■ Add #include <emscripten/emscripten.h> to the top of our file ■ Add EMSCRIPTEN_KEEPALIVE to any function we want to export to JavaScript. Place it between the function’s return type and name ● Compile with the added flags -s NO_EXIT_RUNTIME=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall'] 9 Module.ccall() ● Module.ccall() will call an exported function from our C source file ● Takes 4 arguments ○ The name of the function ○ The data type of the return value ○ An array of data types representing the C functions arguments ○ An array of values to send ot the C function ● module.ccall('factorial', 'number', ['number'], [5]); 10 Writing out own HTML to use Emscripten JS ● We do not need to use the output HTML file as a starter for our Emscripten JS ● For the compiled hello.js file. Simply add <script src="hello.js"></script> to your html file before any code that will call a C function 11 Writing your own JavaScript “glue” file ● This allows you to customize what happens when the .wasm file is loaded and lets you load handwritten WebAssembly which won’t come with a “glue” file like emscripten creates. let importObjects = { imports: { log: arg => console.log(arg) } } fetch('add.wasm') .then(response => response.arrayBuffer()) .then(buffer => WebAssembly.instantiate(buffer, importObjects)) .then(({module, instance}) => instance.exports.add(x, y)); 12 Handwritten WebAssembly ● WebAssembly has a textual representation of the binary that we can edit with a text editor. ● You can easily convert between the text and binary formats ● It is made up of a tree of s-expressions with each s-expression being a node of that tree ○ An s-expression is represented as a pair of parentheses surrounding a space separated list ○ The first item in the list is a label for that node ○ Subsequent items are either function arguments or child nodes (i32.add (i32.const 3) (i32.const 3)) 13 Text Format’s functions, data types, etc ● Outside the scope of this course 14.
Load more

Recommended publications
  • 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).
    [Show full text]
  • 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
    [Show full text]
  • Netscape 6.2.3 Software for Solaris Operating Environment
    What’s New in Netscape 6.2 Netscape 6.2 builds on the successful release of Netscape 6.1 and allows you to do more online with power, efficiency and safety. New is this release are: Support for the latest operating systems ¨ BETTER INTEGRATION WITH WINDOWS XP q Netscape 6.2 is now only one click away within the Windows XP Start menu if you choose Netscape as your default browser and mail applications. Also, you can view the number of incoming email messages you have from your Windows XP login screen. ¨ FULL SUPPORT FOR MACINTOSH OS X Other enhancements Netscape 6.2 offers a more seamless experience between Netscape Mail and other applications on the Windows platform. For example, you can now easily send documents from within Microsoft Word, Excel or Power Point without leaving that application. Simply choose File, “Send To” to invoke the Netscape Mail client to send the document. What follows is a more comprehensive list of the enhancements delivered in Netscape 6.1 CONFIDENTIAL UNTIL AUGUST 8, 2001 Netscape 6.1 Highlights PR Contact: Catherine Corre – (650) 937-4046 CONFIDENTIAL UNTIL AUGUST 8, 2001 Netscape Communications Corporation ("Netscape") and its licensors retain all ownership rights to this document (the "Document"). Use of the Document is governed by applicable copyright law. Netscape may revise this Document from time to time without notice. THIS DOCUMENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. IN NO EVENT SHALL NETSCAPE BE LIABLE FOR INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY KIND ARISING FROM ANY ERROR IN THIS DOCUMENT, INCLUDING WITHOUT LIMITATION ANY LOSS OR INTERRUPTION OF BUSINESS, PROFITS, USE OR DATA.
    [Show full text]
  • 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
    [Show full text]
  • Casperjs Documentation Release 1.1.0-DEV Nicolas Perriault
    CasperJs Documentation Release 1.1.0-DEV Nicolas Perriault February 04, 2016 Contents 1 Installation 3 1.1 Prerequisites...............................................3 1.2 Installing from Homebrew (OSX)....................................3 1.3 Installing from npm...........................................4 1.4 Installing from git............................................4 1.5 Installing from an archive........................................4 1.6 CasperJS on Windows..........................................5 1.7 Known Bugs & Limitations.......................................5 2 Quickstart 7 2.1 A minimal scraping script........................................7 2.2 Now let’s scrape Google!........................................8 2.3 CoffeeScript version...........................................9 2.4 A minimal testing script......................................... 10 3 Using the command line 11 3.1 casperjs native options.......................................... 12 3.2 Raw parameter values.......................................... 13 4 Selectors 15 4.1 CSS3................................................... 15 4.2 XPath................................................... 16 5 Testing 17 5.1 Unit testing................................................ 17 5.2 Browser tests............................................... 18 5.3 Setting Casper options in the test environment............................. 19 5.4 Advanced techniques........................................... 20 5.5 Test command args and options....................................
    [Show full text]
  • 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.
    [Show full text]
  • 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].
    [Show full text]
  • 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 .
    [Show full text]
  • 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.
    [Show full text]
  • Webgl™ Optimizations for Mobile
    WebGL™ Optimizations for Mobile Lorenzo Dal Col Senior Software Engineer, ARM 1 Agenda 1. Introduction to WebGL™ on mobile . Rendering Pipeline . Locate the bottleneck 2. Performance analysis and debugging tools for WebGL . Generic optimization tips 3. PlayCanvas experience . WebGL Inspector 4. Use case: PlayCanvas Swooop . ARM® DS-5 Streamline . ARM Mali™ Graphics Debugger 5. Q & A 2 Bring the Power of OpenGL® ES to Mobile Browsers What is WebGL™? Why WebGL? . A cross-platform, royalty free web . It brings plug-in free 3D to the web, standard implemented right into the browser. Low-level 3D graphics API . Major browser vendors are members of . Based on OpenGL® ES 2.0 the WebGL Working Group: . A shader based API using GLSL . Apple (Safari® browser) . Mozilla (Firefox® browser) (OpenGL Shading Language) . Google (Chrome™ browser) . Opera (Opera™ browser) . Some concessions made to JavaScript™ (memory management) 3 Introduction to WebGL™ . How does it fit in a web browser? . You use JavaScript™ to control it. Your JavaScript is embedded in HTML5 and uses its Canvas element to draw on. What do you need to start creating graphics? . Obtain WebGLrenderingContext object for a given HTMLCanvasElement. It creates a drawing buffer into which the API calls are rendered. For example: var canvas = document.getElementById('canvas1'); var gl = canvas.getContext('webgl'); canvas.width = newWidth; canvas.height = newHeight; gl.viewport(0, 0, canvas.width, canvas.height); 4 WebGL™ Stack What is happening when a WebGL page is loaded . User enters URL . HTTP stack requests the HTML page Browser . Additional requests will be necessary to get Space User JavaScript™ code and other resources WebKit JavaScript Engine .
    [Show full text]
  • 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.
    [Show full text]
  • Casperjs Documentation Release 1.1.0-DEV
    CasperJs Documentation Release 1.1.0-DEV Nicolas Perriault Sep 13, 2018 Contents 1 Installation 3 1.1 Prerequisites...............................................3 1.2 Installing from Homebrew (OSX)....................................4 1.3 Installing from npm...........................................4 1.4 Installing from git............................................4 1.5 Installing from an archive........................................5 1.6 CasperJS on Windows..........................................5 1.7 Known Bugs & Limitations.......................................6 2 Quickstart 7 2.1 A minimal scraping script........................................7 2.2 Now let’s scrape Google!........................................8 2.3 CoffeeScript version...........................................9 2.4 A minimal testing script......................................... 10 3 Using the command line 11 3.1 casperjs native options.......................................... 12 3.2 Raw parameter values.......................................... 13 4 Selectors 15 4.1 CSS3................................................... 15 4.2 XPath................................................... 16 5 Testing 17 5.1 Unit testing................................................ 17 5.2 Browser tests............................................... 18 5.3 Setting Casper options in the test environment............................. 19 5.4 Advanced techniques........................................... 20 5.5 Test command args and options....................................
    [Show full text]