DOCSLIB.ORG

CS 263: Emscripten Documentation Release 1.0

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
CS 263: Emscripten Documentation Release 1.0 CS 263: Emscripten Documentation Release 1.0 Aaron Dodson June 03, 2013 CONTENTS 1 Installing Emscripten 3 1.1 Prereqs..................................................3 1.2 Getting the Source............................................4 1.3 Finalizing Installation..........................................4 2 A Simple Example 5 2.1 Hello, World!...............................................5 2.2 Compiler Options............................................5 3 Dealing with Files 7 3.1 Basic File Support............................................7 3.2 File System API.............................................7 4 Porting pngcrush 9 4.1 What it is.................................................9 4.2 JSifying pngcrush............................................9 4.3 Making make work............................................9 4.4 Bitcode to Javascript...........................................9 5 PNGCrush Emscripten Demo 11 5.1 Getting the Demo............................................ 11 5.2 Installation and Use........................................... 11 5.3 Recompiling............................................... 11 6 PNGCrush Native Client Demo 13 6.1 Getting the Demo............................................ 13 6.2 Installation and Use........................................... 13 6.3 Compilation............................................... 13 7 Indices and tables 15 i ii CS 263: Emscripten Documentation, Release 1.0 Contents: CONTENTS 1 CS 263: Emscripten Documentation, Release 1.0 2 CONTENTS CHAPTER ONE INSTALLING EMSCRIPTEN This document assumes that you are installing Emscripten on a fresh installation of OS X 10.8 Mountain Lion. 1.1 Prereqs Before installing Emscripten, you will need to install and configure its dependencies. 1.1.1 Xcode Command Line Tools Before proceeding, you should install the Xcode command line tools. These provide a base set of common utilities, compilers and other tools. You can install the tools either through Xcode or directly from Apple’s website. To install the Command Line Tools via Xcode: • If you haven’t already, install Xcode. – Open the Finder – Navigate to /Applications – Open the App Store – Search for Xcode – Click the FREE button – Enter your Apple ID and password – When the download completes, Xcode will be in your Applications folder • Open Xcode in /Applications • Choose Xcode > Preferences... in the menu bar • Click the Downloads tab in the toolbar • If it is not already selected, click the Components tab in the Downloads section of Preferences • Click the Install button next to Command Line Tools in the table • Enter your username and password, and wait for the download to complete To install the Command Line Tools manually: • Go to https://developer.apple.com/mac, click Sign in, and enter your Apple ID username and password 3 CS 263: Emscripten Documentation, Release 1.0 – If you have set up your Apple ID as a developer account, click the Register button below the username and password field and do so first • Scroll to the bottom and click View all downloads in the Additional Downloads section • In the list of available downloads, look for and click on the most recent version of the Command Line Tools. As of this writing, that is “Command Line Tools (OS X Mountain Lion) for Xcode - April 2013” • Click the link next to the disk image icon to download them • When the download completes, open ~/Downloads and double click the .dmg to mount it • In the .dmg, run the installer 1.1.2 Homebrew Homebrew is a package manager for OS X that makes it much easier to install and configure the other utilities Em- scripten depends on. More information is available at http://mxcl.github.io/homebrew/. To install Homebrew, copy and paste ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)" into Terminal and follow the script’s instructions. When it is done, run brew doctor, brew update and brew upgrade. If you already have Homebrew installed, make sure to run brew update and brew upgrade before proceeding. 1.1.3 Other Utilities With Homebrew installed, you can now use it to install other utilities Emscripten depends on. These are based on https://gist.github.com/nathanhammond/1974955. • brew install node spidermonkey closure-compiler yuicompressor • brew install llvm --with-clang 1.2 Getting the Source At this point, you’re ready to install Emscripten. First, you’ll need to get the source. To do so, open a Terminal, cd to the directory you want Emscripten to reside at, and run git clone git://github.com/kripken/emscripten.git 1.3 Finalizing Installation To begin, cd into the directory you cloned Emscripten into in the previous step. Then, run python emcc. This will write out a configuration file at ~/.emscripten. Open this file in your editor of choice and replace the line LLVM_ROOT = os.path.expanduser(os.getenv(’LLVM’) or ’/usr/bin’) # directory with the line LLVM_ROOT = os.path.expanduser(os.getenv(’LLVM’) or ’/usr/local/Cellar/llvm/3.2/bin’) # directory Then, run python emcc again. If everything worked, you should see a few lines ending with emcc: no input files. If you receive an error instead, consult the official Emscripten documentation at https://github.com/kripken/emscripten/wiki/Tutorial. You are now ready to use Emscripten. 4 Chapter 1. Installing Emscripten CHAPTER TWO A SIMPLE EXAMPLE 2.1 Hello, World! With Emscripten installed, you’re now ready to use it to compile code. To begin, try the standard C Hello World program: #include <stdio.h> int main(int agrc, char *argv[]) { printf("Hello, world!\n"); return 0; } Save it into a file named hello.c. To compile code into Javascript, you use the Emscripten compiler, emcc. It can take as input C or C++ code or LLVM bitcode and produce as output Javascript or Javascript embedded into an HTML page. File extensions are used by emcc to determine what input and output formats it should use for a particular invocation. To compile the above code to Javascript, run the following in a terminal: emcc hello.c -o hello.js This will produce a file named hello.js. You can run it using node.js as follows: node hello.js And will receive the output you’d expect: Hello, world! If you open hello.js and inspect it, you’ll find that it consists of several hundred lines of Javascript. Most of this is boilerplate that sets up the environment and emulates certain aspects of the system that C and C++ code expects, but you’ll also find a _main function equivalent to that of the input file. 2.2 Compiler Options 2.2.1 Optimization Flags Since emcc mostly wraps clang, most standard compiler flags will also have their intended effect with Emscripten. During normal usage, the most important of these are likely to be the optimization flags. To improve performance, it’s advisable to invoke emcc with -O1 or -O2. Consider the following rather inefficient program: 5 CS 263: Emscripten Documentation, Release 1.0 #include <stdio.h> int main(int argc, char *argv[]) { int found = 0; long largestTestedNumber = 100000000; while (!found) { largestTestedNumber++; found = 1; int i; for (i = 1; i < 21; i++) { if (largestTestedNumber % i != 0) found = 0; } } printf("The smallest number evenly divisible by all the numbers from 1 to 20 is %i\n", largestTestedNumber); return 0; } When compiled to native code by clang at optimization level O2, this program executes on a 1.8 GHz Core i7 in 3.05 seconds. When compiled to Javascript by Emscripten at optimization level O2 and executed by node.js on the same machine, it runs in 12.05 seconds - roughly 4 times slower, but still reasonable. However, if compiled without the optimization flag, the runtime grows to 164.42 seconds - a very significant difference. 2.2.2 Library Linking Flags Normally, when using libraries, a -llibname flag is required to cause the build product to be linked. Emscripten provides Javascript implementations of parts of several libraries, such as LibGL, OpenAL, SDL, and the C standard libraries. These do not need to be explicitly linked - if they are used, Emscripten will detect and link them without the -l flags. However, these flags are harmless if present. 6 Chapter 2. A Simple Example CHAPTER THREE DEALING WITH FILES Emscripten provides several options for supporting programs that need to handle file-based input and output. Part of the boilerplate wrapped around output programs is support for a basic virtualized file system and implementations of the C standard library functions for doing IO. 3.1 Basic File Support If a program only needs to read from pre-existing data files, they can be compiled directly in to the output JavaScript. To do so, use the --preload-file flag to emcc, passing a file or directory as an argument. The file(s) will then be accessible by name from fopen and other function calls from within the program. 3.2 File System API For more advanced file system support, Emscripten provides a JavaScript-based file system API that al- lows for the dynamic creation and deletion of files, directories and symlinks. The official documentation at https://github.com/kripken/emscripten/wiki/Filesystem-Guide provides a good overview. 3.2.1 Creating Files and Directories Interacting with Emscripten’s file system is fairly straightforward from within a HTML page containing the generated Javascript. To add a file to the file system, place the following Javascript within <script> tags: FS.createDataFile("/","file.txt","File contents here", true, true); This will create a file named file.txt located at / with the contents “File contents here” and with both read and write permissions granted for the Emscripten program. After the call completes, the Emscripten program will be able to access the file, modify and save it through the normal C standard library functions. File contents can be provided as a string or as an array of bytes, and the path to create the file at can be specified by a string or by the return value from a call to FS.createPath or FS.createFolder. FS.createDataFile returns a reference to the file as a Javascript object.
Load more

Recommended publications
  • 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]
  • 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]
  • 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]
  • 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]
  • BROWSIX: Bridging the Gap Between Unix and the Browser Bobby Powers, John Vilk, Emery D
    BROWSIX: Bridging the Gap Between Unix and the Browser Bobby Powers, John Vilk, Emery D. Berger University of Massachusetts Amherst Abstract As a representative example, websites like ShareLaTeX1 2 A Applications written to run on conventional operating sys- and Overleaf let users write and edit LTEX documents in the tems typically depend on OS abstractions like processes, pipes, browser without the need to install a TEX distribution locally. signals, sockets, and a shared file system. Porting these ap- This workflow lowers the barrier for students and first-time A plications to the web currently requires extensive rewriting LTEX authors and enables real-time collaboration, eliminating or hosting significant portions of code server-side because some of the complexity of creating multi-author documents. browsers present a nontraditional runtime environment that These applications achieve this functionality by providing a lacks OS functionality. browser-based frontend for editing; user input is sent to the server for persistence and collaboration purposes. When the This paper presents BROWSIX, a framework that bridges pdflatex the considerable gap between conventional operating systems user requests a generated PDF, the website runs bibtex and the browser, enabling unmodified programs expecting a and server-side on the user’s behalf, with the resulting PDF sent to the browser when complete. Unix-like environment to run directly in the browser. BROWSIX comprises two core parts: (1) a JavaScript-only system that These web applications generate PDFs server-side out of makes core Unix features (including pipes, concurrent pro- necessity because browsers lack the operating system services cesses, signals, sockets, and a shared file system) available to and execution environment that Unix programs expect.
    [Show full text]
  • Porting C/C++ Applications to the Web PROJECT P1 Fundamental Research Group
    Porting C/C++ applications to the web PROJECT P1 Fundamental Research Group Mentors Nagesh Karmali Rajesh Kushalkar Interns Ajit Kumar Akash Soni Sarthak Mishra Shikhar Suman Yasasvi V Peruvemba List of Contents Project Description Simavr Understanding the Problem Overall Problems Emscripten References Vim.wasm Tetris PNGCrush.js Project Description Lots of educational tools like electronic simulators, emulators, IDEs, etc. are written mostly as a native C/C++ applications. This project is focussed on making these applications run on the web as a service in the cloud. It is focused on porting these desktop applications into their JavaScript counterparts. Understanding the problem 1. Converting the underlying logic written in C/C++ into it’s analogous Javascript file 2. Making sure minimum performance loss occurs during porting. Emscripten 1. Emscripten is an Open Source LLVM to JavaScript compiler. 2. Compile any other code that can be translated into LLVM bitcode into JavaScript. https://emscripten.org/docs/introducing_emscrip ten/about_emscripten.html Installing Emscripten # Get the emsdk repo git clone https://github.com/emscripten-core/emsdk.git # Enter that directory cd emsdk # Fetch the latest version of the emsdk (not needed the first time you clone) git pull # Download and install the latest SDK tools. ./emsdk install latest # Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file) ./emsdk activate latest # Activate PATH and other environment variables in the current terminal source ./emsdk_env.sh Porting of Vim Github Repository https://github.com/rhysd/vim.wasm Source files of Vim that are slightly modified can be found here - https://github.com/rhysd/vim.wasm/compare/a9604e61451707b38fdcb088fbfaeea 2b922fef6...f375d042138c824e3e149e0994b791248f2ecf41#files The Vim Editor is completely written in C.
    [Show full text]
  • Prioritizing Pull Requests
    Prioritizing pull requests Version of June 17, 2015 Erik van der Veen Prioritizing pull requests THESIS submitted in partial fulfillment of the requirements for the degree of MASTER OF SCIENCE in COMPUTER SCIENCE by Erik van der Veen born in Voorburg, the Netherlands Software Engineering Research Group Q42 Department of Software Technology Waldorpstraat 17F Faculty EEMCS, Delft University of Technology 2521 CA Delft, the Netherlands The Hague, the Netherlands www.ewi.tudelft.nl www.q42.com c 2014 Erik van der Veen. Cover picture: Finding the pull request that needs the most attention. Prioritizing pull requests Author: Erik van der Veen Student id: 1509381 Email: [email protected] Abstract Previous work showed that in the pull-based development model integrators face challenges with regard to prioritizing work in the face of multiple concurrent pull requests. We identified the manual prioritization heuristics applied by integrators and ex- tracted features from these heuristics. The features are used to train a machine learning model, which is capable of predicting a pull request’s importance. The importance is then used to create a prioritized order of the pull requests. Our main contribution is the design and initial implementation of a prototype service, called PRioritizer, which automatically prioritizes pull requests. The service works like a priority inbox for pull requests, recommending the top pull requests the project owner should focus on. It keeps the pull request list up-to-date when pull requests are merged or closed. In addition, the service provides functionality that GitHub is currently lacking. We implemented pairwise pull request conflict detection and several new filter and sorting options e.g.
    [Show full text]
  • WASM Deep Dive by Geoff Darst
    WASM Deep Dive By Geoff Darst Introduction The purpose of this document is to take a deep dive into WASM. We will explore the complete end-to- end scenario of compiling C/C++ code to WASM and then loading and executing WASM in Microsoft Flight Simulator. We will perform our investigation from the system level with the goal being to have as complete of an understanding as possible of how WASM works (down to the hardware level) in Microsoft Flight Simulator. This document assumes understanding of how to build WASM in Microsoft Visual Studio for Microsoft Flight Simulator as well as create and deploy the package. For anyone who has not yet built their first WASM, I would recommend doing so prior to continuing with this document. The Platform Toolset instructions can be found here: SDK Documentation (flightsimulator.com). Background What is WASM? WASM stands for Web ASseMbly. It is a specification for an abstract LLVM (Low Level Virtual Machine). The complete specification can be found here: WebAssembly Specification — WebAssembly 1.1 (Draft 2021-05-17). Unlike architectures such as x86-64, which represent physical chips, LLVMs are an abstraction that allows imagining computation without tying it to a specific hardware implementation. The WASM LLVM architecture is that of a stack machine. There are no defined registers in the instruction set. Instead, operations generally involve pushing and popping values from the stack. For example, a binary operation such as Add would pop two values from the stack (the left and right operands) and then push the result of the operation back onto the stack.
    [Show full text]
  • Research.Js: Sharing Your Research on the Web
    Research.js: Sharing Your Research on the Web Joel Galenson, Cuong Nguyen, Cindy Rubio-Gonzalez,´ Christos Stergiou, Nishant Totla University of California, Berkeley fjoel,rubio,chster,[email protected] Abstract We propose helping researchers compile their tools to Most research tools are publicly available but rarely used JavaScript, which would allow anyone with a web browser to due to the difficulty of building them, which hinders the use them. This would allow researchers to make their tools sharing of ideas. Web browsers have recently become an usable online without running their own secure servers. It excellent platform for giving portable demos. Researchers would also allow readers to browse through tool demos as could enable their tools to run in a web browser by compiling easily as they browse through web pages, thereby helping them into JavaScript, making the tools more accessible by them discover ideas that interest them and explore interest- removing the need to configure and build them. In this paper, ing tools. we explore ideas to make sharing research easier. 2. Approach We propose building an infrastructure that makes it easy both 1. Motivation to take an existing project and compile it to JavaScript and When computer scientists create tools in the course of their to put the JavaScript onto a webpage for users to visit. research, they sometimes publicly release them. This is a 2.1 Translation to JavaScript useful practice, as it allows other researchers to evaluate and build on their ideas and potentially enables users to We plan to leverage existing tools that translate programs use a practical tool.
    [Show full text]
  • Is the Web Good Enough for My App?
    Is the Web good enough for my app ? François Daoust (@tidoust), W3C Workshop HTML5 vs Native by software.brussels 4 December 2014 A short history of the Web App platform Tim Berners Lee Olympic games opening ceremony July 2012, London “The Web is an information space in which the items of interest, referred to as resources, are identified by global identifiers called Uniform Resource Identifiers” Architecture of the World Wide Web HTML HTTP URL • Web Standards HTML, CSS, XML, SVG, PNG, XSLT, WCAG, RDF, JavaScript APIs… • Consortium ~400 members, from industry and research • World-wide Offices in many countries • One Web! Founded and directed by Tim Berners-Lee • Global participation 55,000 people subscribed to mailing lists, 1,500+ participants in 60+ Groups User interaction <form action="post.cgi"> <input type="text" name="firstname" /> <input type="submit" title="Submit" /> </form> User interaction <form action="post.cgi"> <input type="text" name="firstname" /> <input type="submit" title="Submit" /> </form> DHTML • Document Object Model (DOM) • JavaScript • Events AJAX XMLHttpRequest Properties of the Web app platform Top-down approach and Extensible Web Manifesto Security • Hard to expose low-level APIs • Beware of fingerprinting Global platform Ex: access to local storage IndexedDB API Human platform Philae vs. CSS Complete platform Communications API Usage HTML5 Web Messaging Inter-app (same browser) WebRTC P2P, real time data/audio/video Network Service Discovery Local network Presentation API Second screen Cross-device communication Presentation API navigator.presentation .startSession('http://example.org/pres.html') .then(function (newSession) { session.onstatechange = function () { switch (session.state) { case 'connected': session.postMessage(/*...*/); session.onmessage = function() { /*...*/ }; break; case 'disconnected': console.log('Disconnected.'); break; } }; }, function () { /*...*/ }); Packaging • Offline execution ApplicationCache Service Workers • Packaging in itself Manifest file Archive (Zip) Native shim (ex.
    [Show full text]
  • Using SD Everywhere to Bring SD Models to Mac, Windows, and the Web
    Using SD Everywhere to Bring SD Models to Mac, Windows, and the Web By Travis Franck and Todd Fincannon Abstract A good user interface makes System Dynamics models come alive for policymakers and stakeholders. This workshop will show how Climate Interactive translates large Vensim models into C and JavaScript code which can be embedded in custom applications. The open source SDEverywhere toolkit developed by Climate Interactive and Todd Fincannon gives you full control over user interface development. We will show how to get SDEverywhere, translate your model, and run it everywhere: on Mac, Windows, and the web. SDEverywhere is one of several new community tools (e.g., SDXchange project, PySD) that are providing open source solutions to make SD models more useful. Visit sdeverywhere.org for the latest updates, tutorials, release information, and news. Required software SDEverywhere currently runs on macOS. You will need a Mac and a text editor such as Atom. We will be working from the command line. You can use the Terminal app that is built into macOS, or try the iTerm2 terminal emulator. The instructions below will guide you through installing the other tools required by SDEverywhere. Xcode Node.js Emscripten SDK Set up SDEverywhere Follow this procedure to set up SDEverywhere on your macOS computer. 1. If you have installed Apple’s Xcode development kit on your Mac, skip this step. Otherwise, open the App Store app on your Mac, search for Xcode , download it, and install it. 2. If you have installed Node.js version 6.11.1 LTS or later, skip this step.
    [Show full text]