JSX

JSX DeNA Co., Ltd. Kazuho Oku

What is JSX? Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 2

kind of a skunk-works project I have been doing for the last week or two... (together with gfx) Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 3

Existing problems with JavaScript low productivity requires skills to write fast and maintainable code esp. in medium to large-scale development slow esp. on iOS (without JIT) memory-consuming esp. on JavaScript runtimes with JIT support Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 4

JSX is... a strictly-typed OO language convertible to JavaScript and runs faster than JavaScript on web browsers Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 5

JSX as a programming language strictly-typed OO programming language syntax: class / function definition like Java function body is JavaScript strict types lead to higher productivity / better quality than JavaScript higher productivity / better quality than C / C++ (JSX has GC, no pointers) Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 6

JSX to JavaScript compiler generated code runs faster than JS by optimizing the generated code using type-info JSX is designed so that there would be no overhead when compiled to JavaScript interoperable with JavaScript generates source-map for debugging source-map is a technology that supports debugging of client-side code on web browsers written in languages other than JavaScript Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 7

The goal of JSX run faster than JavaScript on browsers higher productivity than JavaScript applications developed using JSX will have higher quality than when using JavaScript Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 8

Comparison: Google Web Toolkit write in Java / translate to JavaScript differences bet. Java and JS leads to... different behaviors between when run on Java and on JavaScript makes debugging is difficult the translation introduces speed / size overhead hard to use in conjunction with JS libraries cannot use existing Java code as well JSX has none of the problems listed above Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 9

Comparison: Google Closure Compiler a JavaScript minifier can use type-annotations to optimize JS problem: type-annotations are fragile hard to write, impossible to maintain JSX does not have the problem strict types promise higher productivity and performance: all optimizations possible by Closure Compiler can be applied initial versions of JSX will generate fully type-annotated code and pass it to Closure Compiler  Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 10

Comparison: Dart promoted by Google as an replacement of JavaScript optionally-typed OO language Problems: slower than JavaScript when converted to JS unlikely to be supported by web browsers other than Chrome (as a native language) unlikely to run at native performance optionally-typed languages usually require JIT support to run fast Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 11

Comparison: ActionScript 3 an extension of JavaScript with classes and optional types Problem: cannot be translated to JavaScript without big performance penalty unlikely to run at native performance optionally-typed languages usually require JIT support to run fast Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 12

Sample code import "./foo"; // import foo.jsx to current scope import "./bar" into Bar; // refer to the classes as Bar.clazz class Fib { static function fib(n : number) : number { if (n < 2) return 1; else return fib(n - 1) + fib(n - 2); } } Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 13

Sample code (cont'd) class FizzBuzz { static function main(args : String[]) : number { for (var i = 0; i < 100; i++) { if (i % 15 == 0) log "FizzBuzz"; else if (i % 3 == 0) log "Fizz"; else if (i % 5 == 0) log "Buzz"; else log i; } } } Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 14

Design notes on JSX  no global namespace  namespaces exist for each source file  classes in imported source files will be expanded the top-level namespace (or to the specified namespace)  primitive types: void, null, boolean, int, number, String  int: introduced for future usage  on JS, additional overhead only for div and mod operations (by "| 0", etc.), which are rarely used  functions and member functions:  can be overloaded (internally uses name mangling)  accessing the arguments object is slow in JS  function references and member function references are first-class objects Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 15

Design notes on JSX (cont'd)  built-in log and assert statements  no code will be emitted for release builds  support for typed arrays  will fallback to normal array if not supported by the platform  primary target: to support games on HTML 5  compiler is written in JavaScript  so that it could be run on the web browser  for faster development cycle  will be ported to JSX once self-hosting becomes possible  will be a good test code  may use a preprocessor so that the compiler could be interpreted as both JS and JSX Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 16