Upload
kazuho-oku
View
11.943
Download
3
Tags:
Embed Size (px)
Citation preview
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 3
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 5
Problems of JavaScript
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 6
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 7
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 8
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 9
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 10
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!
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 11
JSX
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 12
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 13
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; }}
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 15
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 18
Automatic Completion
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 19
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); } }
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 20
Profiler
n works on any runtime with XHR support
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 21
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 22
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 23
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 24
Binding JSX to W3C Standards
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 25
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!
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 26
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*/;
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 27
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.)
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 28
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 29
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
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 30
Conclusion
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 31
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!!!!!!
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 32
For more information
please visit the JSX project page at jsx.github.io
Jun 8 2013 JSX - developing a statically-typed programming language for the Web 33