JSX - developing a statically-typed programming language for the Web

JSXdeveloping 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-)

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

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%Miniﬁca2on
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*/);
function constructor(type : string/*DOMString*/, eventInitDict : EventInit);

__readonly__ var type : string/*DOMString*/;
__readonly__ var target : Nullable.<EventTarget>;
__readonly__ var currentTarget : Nullable.<EventTarget>;
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

More Related Content

What's hot

Similar to JSX - developing a statically-typed programming language for the Web

More from Kazuho Oku

JSX - developing a statically-typed programming language for the Web