Más contenido relacionado
La actualidad más candente (20)
JSX
- 2. What is JSX?
Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 2
- 3. 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
- 4. 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
- 5. 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
- 6. 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
- 7. 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
- 8. 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
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. 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