JSX

31,633 views

Published on

Published in: Technology
3 Comments
48 Likes
Statistics
Notes
No Downloads
Views
Total views
31,633
On SlideShare
0
From Embeds
0
Number of Embeds
178
Actions
Shares
0
Downloads
126
Comments
3
Likes
48
Embeds 0
No embeds

No notes for slide

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

×