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 JSXn a statically-typed programming languagen that gets optimizing-compiled into JavaScriptn Binding W3C stan...
About me	n Name: Kazuho Okun Career:n Palmscape / Xiino – worlds first web browser forPalm OS (1997-2004)n R&D special...
About DeNA Co., Ltd.	n Operator of Mobagen one of the largest mobile gaming platforms inJapann many games are developed...
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 than100k LOC	n Kintone (Cybozu)n Cloud web ...
JavaScript – the Good Parts	n clear language design with specification	n works on any web browser	n very fast – thanks ...
JavaScript – the not-so-good Parts	n low productivity	n cannot find a bug before executionn great variety in coding sty...
The reason – JavaScript is a dynamic language	n error-check only at runtime	→ negative impact to productivity and quality...
The Solution	n Develop a dialect of JavaScript, that…n enforces static types to JavaScript	n like ActionScript 3 / Ecma...
JSX	Jun 8 2013 JSX - developing a statically-typed programming language for the Web 12
The Goal fo JSX	n an excellent programming language forthe web browsersn run faster than JavaScript, on any web browser	...
Design Principles of JSX	n fully statically-typed	n detect as many errors as possible at compile-time	n leads to higher...
The Language	class Point {	var x = 0; // x is a "number"	var y = 0; // y is a "number"		function constructor() {	}		functi...
Performance Benchmarks	n Box2D	n convert box2d.js to JSX and measure the fps	n iOS 5.0 – 12% speed-upn Android 2.3 – 2...
Minify	Jun 8 2013 JSX - developing a statically-typed programming language for the Webn Minify is safe and more effective...
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 te...
Profiler	n works on any runtime with XHR support	Jun 8 2013 JSX - developing a statically-typed programming language for ...
Supported Optimization Methods	n const-folding, inlining, DCE, local CSE,array-length, unboxing, method-to-static-funcn ...
Optimization Example: Affine Transformation	n source code:new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y))	n gene...
Future of JSX	n provide async syntaxn compile the code to callback-passing stylen esp. necessary for node.jsn compile ...
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 JSXn for the ease of writing code in JSXn to use the compil...
Binding JSX to W3C standards	% cat lib/js/js/web.jsx	(snip)		/** @see http://www.w3.org/TR/DOM-Level-3-Events/ */	native c...
Binding JSX to W3C standards	n wrote perl scripts to do the translationn supporting 35 IDLs (358 classes)n most of thos...
The Lessons we learned	n "union types" are not uncommonn we use variant for nown so that it could store any type of dat...
The Lessons we learned (contd)	n interface definition is lost in JavaScriptn since there is no way in JS to express such...
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 atopJavaScript running on web browsersn to boost produc...
For more information	please visit the JSX project page atjsx.github.io	Jun 8 2013 JSX - developing a statically-typed prog...
Upcoming SlideShare
Loading in...5
×

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

12,224

Published on

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,224
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
16
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

  1. 1. JSXdeveloping a statically-typed programming language for the Web DeNA Co., Ltd.Kazuho Oku
  2. 2. Jun 8 2013 JSX - developing a statically-typed programming language for the Web 2
  3. 3. Agenda n JSXn a statically-typed programming languagen that gets optimizing-compiled into JavaScriptn Binding W3C standards to JSXJun 8 2013 JSX - developing a statically-typed programming language for the Web 3
  4. 4. About me n Name: Kazuho Okun Career:n Palmscape / Xiino – worlds first web browser forPalm OS (1997-2004)n R&D specialist at Cybozu Labs, Inc. (2005-2010)n Japanize – collaborative UI localization service for the Webn Greasemetal – worlds first Google Chrome extensionn Q4M - message queue plugin for MySQLn used by largest SNSs in Japann memcached plugin for MySQLn working for DeNA Co., Ltd. (2010-)Jun 8 2013 JSX - developing a statically-typed programming language for the Web 4
  5. 5. About DeNA Co., Ltd. n Operator of Mobagen one of the largest mobile gaming platforms inJapann many games are developed by our partnersn games run on web browsers and mobile apps.n we use JavaScript for writing app-based games as wellJun 8 2013 JSX - developing a statically-typed programming language for the Web 5
  6. 6. Problems of JavaScript Jun 8 2013 JSX - developing a statically-typed programming language for the Web 6
  7. 7. Large-scale Applications using JavaScript n state-of-the-art apps with more than100k LOC n Kintone (Cybozu)n Cloud web databasen similar cases with social game apps.n > 5MB of .js after minifiedn developed by large teamn > 10 members Jun 8 2013 JSX - developing a statically-typed programming language for the Web 7
  8. 8. JavaScript – the Good Parts n clear language design with specification n works on any web browser n very fast – thanks to the competitionn small and primitive language spec.n prototype-based OO Jun 8 2013 JSX - developing a statically-typed programming language for the Web 8
  9. 9. JavaScript – the not-so-good Parts n low productivity n cannot find a bug before executionn great variety in coding stylen hard to share the best practice n thus hard to write high-quality code n slow execution speedn compared to native n high memory consumption n slow startup Jun 8 2013 JSX - developing a statically-typed programming language for the Web 9
  10. 10. 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, startupspeed, memory footprintn no heavy compiler optimizations n optimizations possible by JavaScript JIT engines havetheir limits / overheads → negative impact on execution speed Jun 8 2013 JSX - developing a statically-typed programming language for the Web 10
  11. 11. The Solution n Develop a dialect of JavaScript, that…n enforces static types to JavaScript n like ActionScript 3 / EcmaScript 4n 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
  12. 12. JSX Jun 8 2013 JSX - developing a statically-typed programming language for the Web 12
  13. 13. The Goal fo JSX n an excellent programming language forthe web browsersn run faster than JavaScript, on any web browser n important for browser-based games on smartphones n higher productivity than JavaScriptn easy to learn / maintainn 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
  14. 14. 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 qualityn 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 compilen Class-based OO Jun 8 2013 JSX - developing a statically-typed programming language for the Web 14
  15. 15. 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
  16. 16. Performance Benchmarks n Box2D n convert box2d.js to JSX and measure the fps n iOS 5.0 – 12% speed-upn Android 2.3 – 29% speed-upn  AOBenchn  from http://spheresofa.net/blog/?p=757 Jun 8 2013 JSX - developing a statically-typed programming language for the Web0 0.5 1 1.5 2JavaScriptJSXTypeScriptHaxe処理速度 iOSAndroid16
  17. 17. Minify Jun 8 2013 JSX - developing a statically-typed programming language for the Webn Minify is safe and more effective thanksto 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%Minifica2onjsx"AArelease"jsx"AArelease"|"uglifyjs"jsx"AArelease"|"esmangle"jsx"AArelease"AAminify"17
  18. 18. Debugging on Chrome Jun 8 2013 JSX - developing a statically-typed programming language for the Web 18
  19. 19. Automatic Completion Jun 8 2013 JSX - developing a statically-typed programming language for the Web 19
  20. 20. 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
  21. 21. Profiler n works on any runtime with XHR support Jun 8 2013 JSX - developing a statically-typed programming language for the Web 21
  22. 22. Supported Optimization Methods n const-folding, inlining, DCE, local CSE,array-length, unboxing, method-to-static-funcn all optimizations are performed using link-timeinformationn is not SSA-basedn to preserve the original code as much as possibleafter conversionn SSA + code generation sometimes cause slowdownJun 8 2013 JSX - developing a statically-typed programming language for the Web 22
  23. 23. 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 : 0Jun 8 2013 JSX - developing a statically-typed programming language for the Web 23
  24. 24. Future of JSX n provide async syntaxn compile the code to callback-passing stylen esp. necessary for node.jsn compile to native?n for faster performance on PNaCl, asm.jsJun 8 2013 JSX - developing a statically-typed programming language for the Web 24
  25. 25. Binding JSX to W3C Standards Jun 8 2013 JSX - developing a statically-typed programming language for the Web 25
  26. 26. Binding JSX to W3C Standards n Need to translate W3C IDL to JSXn for the ease of writing code in JSXn to use the compiler to detect errorsdom.document.creatElement() // error!Jun 8 2013 JSX - developing a statically-typed programming language for the Web 26
  27. 27. 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
  28. 28. Binding JSX to W3C standards n wrote perl scripts to do the translationn 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 welln to support vendor-specific defs. (webkitXXX, etc.)Jun 8 2013 JSX - developing a statically-typed programming language for the Web 28
  29. 29. The Lessons we learned n "union types" are not uncommonn we use variant for nown so that it could store any type of datan should we better support disjoint types?n some types are not narrowedn HTMLOptionsCollection#item() does not returnHTMLOptionElementJun 8 2013 JSX - developing a statically-typed programming language for the Web 29
  30. 30. The Lessons we learned (contd) n interface definition is lost in JavaScriptn since there is no way in JS to express such ideasn IDLs on working drafts may have errorsJun 8 2013 JSX - developing a statically-typed programming language for the Web 30
  31. 31. Conclusion Jun 8 2013 JSX - developing a statically-typed programming language for the Web 31
  32. 32. Conclusion: it is possible to… n use a statically-typed language atopJavaScript running on web browsersn to boost productivity and execution speedn to reduce code footprintn such approach might become more common asweb evolvesn generate interface defs. from W3C IDLsautomaticallyn thanks a lot for providing them!!!!!! Jun 8 2013 JSX - developing a statically-typed programming language for the Web 32
  33. 33. For more information please visit the JSX project page atjsx.github.io Jun 8 2013 JSX - developing a statically-typed programming language for the Web 33
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×