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)


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


JSX is…

a strictly-typed OO language
convertible to JavaScript
and runs faster than JavaScript on web browsers


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)


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

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


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

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 

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

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


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);
}
}


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;
}
}
}


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


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


JSX

More Related Content

JSX