JSX
-
Upload
kazuho-oku -
Category
Technology
-
view
19.136 -
download
2
Transcript of 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)
Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 3
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
Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 4
JSX is…
a strictly-typed OO languageconvertible 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 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
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 JavaScriptapplications 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 librariescannot 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 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
Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 10
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
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 penaltyunlikely 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 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); }}
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