Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ...
Existing problems with JavaScript   low productivity        requires skills to write fast and maintainable code        ...
JSX is…   a strictly-typed OO language   convertible to JavaScript        and runs faster than JavaScript on web browse...
JSX as a programming language   strictly-typed OO programming language   syntax:        class / function definition lik...
JSX to JavaScript compiler   generated code runs faster than JS        by optimizing the generated code using type-info ...
The goal of JSX   run faster than JavaScript on browsers   higher productivity than JavaScript   applications developed...
Comparison: Google Web Toolkit   write in Java / translate to JavaScript   differences bet. Java and JS leads to…       ...
Comparison: Google Closure Compiler   a JavaScript minifier        can use type-annotations to optimize JS        probl...
Comparison: Dart   promoted by Google as an replacement    of JavaScript        optionally-typed OO language   Problems...
Comparison: ActionScript 3   an extension of JavaScript with classes    and optional types   Problem:        cannot be ...
Sample code   import "./foo"; // import foo.jsx to current scope   import "./bar" into Bar; // refer to the classes as Bar...
Sample code (contd)   class FizzBuzz {     static function main(args : String[]) : number {       for (var i = 0; i < 100;...
Design notes on JSX    no global namespace         namespaces exist for each source file         classes in imported so...
Design notes on JSX (contd)    built-in log and assert statements         no code will be emitted for release builds   ...
Upcoming SlideShare
Loading in …5
×

JSX

40,576 views

Published on

Published in: Technology

JSX

  1. 1. JSXDeNA Co., Ltd. Kazuho Oku
  2. 2. What is JSX?Apr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 2
  3. 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. 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 supportApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 4
  5. 5. JSX is… a strictly-typed OO language convertible to JavaScript and runs faster than JavaScript on web browsersApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 5
  6. 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. 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 JavaScriptApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 7
  8. 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 JavaScriptApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 8
  9. 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 aboveApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 9
  10. 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. 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 fastApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 11
  12. 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 fastApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 12
  13. 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. 14. Sample code (contd) 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. 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 objectsApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 15
  16. 16. Design notes on JSX (contd)  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 JSXApr 5 2012 Copyright © 2012 DeNA Co., Ltd., All rights reserved 16

×