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

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

Recommended

More Related Content

What's hot (20)

Similar to JSX (20)

More from Kazuho Oku (20)

Recently uploaded (20)

JSX