JSX

JSXDeNA 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 productivityrequires skills to write fast and maintainable

codeesp. in medium to large-scale development

slowesp. on iOS (without JIT)

memory-consumingesp. on JavaScript runtimes with JIT support


JSX is…

a strictly-typed OO languageconvertible 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 Javafunction body is JavaScript

strict types lead to higher productivity / better quality than JavaScripthigher 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 JSby optimizing the generated code using

type-infoJSX is designed so that there would be no

overhead when compiled to JavaScript

interoperable with JavaScriptgenerates source-map for

debuggingsource-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 JavaScriptapplications 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 librariescannot use existing Java code as well

JSX has none of the problems listed above


Comparison: Google Closure Compiler

a JavaScript minifiercan use type-annotations to optimize JSproblem: type-annotations are fragile

hard to write, impossible to maintain

JSX does not have the problemstrict types promise higher productivity and

performance: all optimizations possible by Closure Compiler can be appliedinitial versions of JSX will generate fully type-

annotated code and pass it to Closure Compiler


Comparison: Dart

promoted by Google as an replacement of JavaScriptoptionally-typed OO language

Problems:slower than JavaScript when converted to JSunlikely 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 penaltyunlikely to run at native performance

optionally-typed languages usually require JIT support to run fast


Sample code

import "./foo"; // import foo.jsx to current scopeimport "./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

Technology

Transcript of JSX