jsx - developing a statically-typed programming language for the web

JSX developing a statically-typed programming language for the Web

DeNA Co., Ltd.

Kazuho Oku

Jun 8 2013 JSX - developing a statically-typed programming language for the Web 2

Agenda

n JSX n a statically-typed programming language

n that gets optimizing-compiled into JavaScript

n Binding W3C standards to JSX


About me

n Name: Kazuho Oku n Career:

n Palmscape / Xiino – world's first web browser for Palm OS (1997-2004)

n R&D specialist at Cybozu Labs, Inc. (2005-2010) n Japanize – collaborative UI localization service for the Web n Greasemetal – world's first Google Chrome extension n Q4M - message queue plugin for MySQL

n used by largest SNSs in Japan n memcached plugin for MySQL

n working for DeNA Co., Ltd. (2010-) Jun 8 2013 JSX - developing a statically-typed programming language for the Web 4

About DeNA Co., Ltd.

n Operator of Mobage n one of the largest mobile gaming platforms in

Japan n many games are developed by our partners

n games run on web browsers and mobile apps. n we use JavaScript for writing app-based games as well


Problems of JavaScript


Large-scale Applications using JavaScript

n state-of-the-art apps with more than 100k LOC n Kintone (Cybozu)

n Cloud web database

n similar cases with social game apps. n > 5MB of .js after minified

n developed by large team n > 10 members


JavaScript – the Good Parts

n clear language design with specification n works on any web browser n very fast – thanks to the competition n small and primitive language spec.

n prototype-based OO


JavaScript – the not-so-good Parts

n low productivity n cannot find a bug before execution n great variety in coding style

n hard to share the best practice

n thus hard to write high-quality code

n slow execution speed n compared to native

n high memory consumption n slow startup


The reason – JavaScript is a dynamic language

n error-check only at runtime → negative impact to productivity and quality

n adaptive compilation → negative impact on execution speed, startup speed, memory footprint

n no heavy compiler optimizations n optimizations possible by JavaScript JIT engines have

their limits / overheads

→ negative impact on execution speed


The Solution

n Develop a dialect of JavaScript, that… n enforces static types to JavaScript n like ActionScript 3 / EcmaScript 4 n optimize while translating to JavaScript

n so that it would run faster than JavaScript!


JSX


The Goal fo JSX

n an excellent programming language for the web browsers n run faster than JavaScript, on any web browser

n important for browser-based games on smartphones

n higher productivity than JavaScript n easy to learn / maintain

n esp. for JavaScript programmers

n esp. in medium to large-scale development

n help writing high-quality code than in JavaScript


Design Principles of JSX

n fully statically-typed n detect as many errors as possible at compile-time

n leads to higher productivity and better quality

n provide optimizing compiler using the type information

n expressions and statements are: JavaScript + type annotations n easy to learn n no overhead by conversion to JavaScript n inject helper-code for debugging during compile

n Class-based OO Jun 8 2013 JSX - developing a statically-typed programming language for the Web 14

The Language

class Point { var x = 0; // x is a "number" var y = 0; // y is a "number" function constructor() { } function constructor(x : number, y : number) { this.x = x; this.y = y; } override function toString() : string { return this.x as string + "," + this.y as string; }}


Performance Benchmarks

n Box2D n convert box2d.js to JSX and measure the fps n iOS 5.0 – 12% speed-up n Android 2.3 – 29% speed-up

n  AOBench n  from http://spheresofa.net/blog/?p=757

Jun 8 2013 JSX - developing a statically-typed programming language for the Web

0 0.5 1 1.5 2

JavaScript

JSX

TypeScript

Haxe

処理速度

iOS

Android

16

Minify

Jun 8 2013 JSX - developing a statically-typed programming language for the Web

n Minify is safe and more effective thanks to the type information

0" 0.2" 0.4" 0.6" 0.8" 1" 1.2"

Total"

ngCore"HTML5"

JSX"

v8bench.jsx"

byte%size%of%generated%code(ra2o)%

Impact%of%Minifica2on�

jsx"AArelease"

jsx"AArelease"|"uglifyjs"

jsx"AArelease"|"esmangle"

jsx"AArelease"AAminify"

17

Debugging on Chrome


Automatic Completion


Integrated Test Framework

// to run: jsx --test hello.jsx

import "test-case.jsx"; class _Test extends TestCase {

function test1() :void { this.expect("hello").toBe("hello"); this.expect("world").toBe("world"); }

function test2() :void { this.expect(42).toBe(42); } }


Profiler

n works on any runtime with XHR support


Supported Optimization Methods

n const-folding, inlining, DCE, local CSE, array-length, unboxing, method-to-static-func n all optimizations are performed using link-time

information

n is not SSA-based n to preserve the original code as much as possible

after conversion n SSA + code generation sometimes cause slowdown


Optimization Example: Affine Transformation

n source code: new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y))

n generated code: {x: x + 0 * y, y: 0 * x + 2 * y}Note: 0 * n cannot be folded since it is equiv. to: isNaN(n) ? NaN : 0


Future of JSX

n provide async syntax n compile the code to callback-passing style n esp. necessary for node.js

n compile to native? n for faster performance on PNaCl, asm.js


Binding JSX to W3C Standards


Binding JSX to W3C Standards

n Need to translate W3C IDL to JSX n for the ease of writing code in JSX n to use the compiler to detect errors

dom.document.creatElement() // error!


Binding JSX to W3C standards

% cat lib/js/js/web.jsx(snip)/** @see http://www.w3.org/TR/DOM-Level-3-Events/ */native class Event { /** @see http://www.w3.org/TR/dom/ */ function constructor(type : string/*DOMString*/); /** @see http://www.w3.org/TR/dom/ */ function constructor(type : string/*DOMString*/, eventInitDict : EventInit); /** @see http://www.w3.org/TR/dom/ */ __readonly__ var type : string/*DOMString*/; /** @see http://www.w3.org/TR/dom/ */ __readonly__ var target : Nullable.<EventTarget>; /** @see http://www.w3.org/TR/dom/ */ __readonly__ var currentTarget : Nullable.<EventTarget>; /** @see http://www.w3.org/TR/dom/ */ static __readonly__ var NONE : number/*unsigned short*/;


Binding JSX to W3C standards

n wrote perl scripts to do the translation n supporting 35 IDLs (358 classes)

n most of those on http://w3.org/ n some from others (Khronos, browser vendors,

etc.) n we write some IDL as well

n to support vendor-specific defs. (webkitXXX, etc.)


The Lessons we learned

n "union types" are not uncommon n we use variant for now

n so that it could store any type of data

n should we better support disjoint types?

n some types are not narrowed n HTMLOptionsCollection#item() does not return

HTMLOptionElement


The Lessons we learned (cont'd)

n interface definition is lost in JavaScript n since there is no way in JS to express such ideas

n IDLs on working drafts may have errors


Conclusion


Conclusion: it is possible to…

n use a statically-typed language atop JavaScript running on web browsers n to boost productivity and execution speed n to reduce code footprint n such approach might become more common as

web evolves

n generate interface defs. from W3C IDLs automatically n thanks a lot for providing them!!!!!!


For more information

please visit the JSX project page at jsx.github.io


jsx - developing a statically-typed programming language for the web

Documents

web dena

web browsernimportant

primitive language spec

web browser forpalm

web browsernvery fast

use javascript

dialect of javascript

reason javascript