jsx2js_js2jsx

天下一ajtjs武闘会LT発表資料

Transcript

1. 
 JS to JSX, JSX to JS @yosuke_furukawa
2. @yosuke_furukawa Node.jsϢʔβʔάϧʔϓ୅ද / DeNAॴଐ
3. ఱԼҰaltjs෢ಆձ JSX࿮
4. ఱԼҰaltjs෢ಆձ ....
6. ଟ෼͜Μͳײ͡ʹἤΓ͋͏ձͱ༧૝
7. ͜Μͳ෩ʹֶͼ
8. ࠷ऴతʹ͜͏ͳͬͯؼΓ͍ͨ
9. ຊฤ
10. JS to JSX
11. JSX͸ܕ͕͋ΔaltJS interface Animal {// interfaceΛఆٛͰ͖Δ function say () : void; } ! class Duck implements Animal { // interfaceΛimplementsͰ͖Δ override function say () : void {// ࣮૷ log("quack!"); } } ! class Dog implements Animal { override function say () : void { log("bow!"); } }
12. JSX͸ܕ͕͋ΔaltJS interface Animal {// interfaceΛఆٛͰ͖Δ function say () : void; } ! class Duck implements Animal { // interfaceΛimplementsͰ͖Δ override function say () : void {// ࣮૷ log("quack!"); } } ! class Dog implements Animal { override function say () : void { log("bow!"); } } طଘͷJSΛ࢖͏ʹ͸binding͕ඞཁʂʂ
13. JSXͱTypeScriptͷbindingͷҧ͍ ! TypeScript͸ܕఆٛϑΝΠϧͱJavaScriptΛ෼཭͢Δ JSX͸ܕఆٛϑΝΠϧʹ௚઀JavaScriptΛهड़͢Δ
14. JSXόΠϯσΟϯάͷॻ͖ํ native class JSON5 { static function parse(str:string) : variant; static function stringify(json:variant) : string; } = "require('json5')"; ͜͜ʹ+BWB4DSJQUͰ࣮૷Λॻ͚Δ ܕఆٛΛॻ͘
15. ࢥ૝తʹ͸TypeScriptͷํ͕៉ྷ JSXͷํ͕ࠞಱΛ࢈Ή͕ ࠇຐज़తͳ࢖͍ํ͕Ͱ͖Δ
16. JSXόΠϯσΟϯά͸୯ͳΔόΠϯσΟϯά͡Όͳ͍ native class JSON5 { static function parse(str:string) : variant; static function stringify(json:variant) : string; static function strictParse (st:string) : variant; } = """ (function(){ var json5 = require(‘json5’); var json5x = { parse : json5.parse, stringify : json5.stringify, strictParse : JSON.parse }; return json5x; }()); """; ৽͍͠ػೳ௥Ճͨ͠Γɺ ΠϯλϑΣʔεม͑ͨΓɺ όΠϯσΟϯά͡Όͳ͘ ͯϥούʔʹ͍ۙ
17. JSX to JS
18. JSX͸ίϯύΠϧޙͷJavaScriptΛ
 طଘͷJavaScript͔Β΋࢖͑Δɻ
19. JSX-linker !
20. JSX-linkerͷػೳ ίϯύΠϧޙͷJSΛଞͷJS͔ΒಡΊΔΑ͏ʹ͢Δ ! ! Common-JS style Closure compiler style AMD style export global Support WebWoker import
21. JSX-linkerΛ࢖͏ // require͔ΒಡΊΔΑ͏ʹͳΔɻ $ jsx test.jsx | jsx-linker -t commonjs-lib --stdin -o test.js // global͔ΒಡΊΔΑ͏ʹͳΔ $ jsx test.jsx | jsx-linker -t export-global --stdin -o test.js // amd͔ΒಡΊΔ $ jsx test.jsx | jsx-linker -t amd-lib --stdin -o test.js // closure compiler ͔Β $ jsx test.jsx | jsx-linker -t closure-lib --stdin -o test.js // webworker͔Β $ jsx test.jsx | jsx-linker -t webworker --stdin -o test.js
22. JSX-linkerΛ࢖͏ // require͔ΒಡΊΔΑ͏ʹͳΔɻ $ jsx test.jsx | jsx-linker -t commonjs-lib --stdin -o test.js // global͔ΒಡΊΔΑ͏ʹͳΔ $ jsx test.jsx | jsx-linker -t export-global --stdin -o test.js // amd͔ΒಡΊΔ $ jsx test.jsx | jsx-linker -t amd-lib --stdin -o test.js // closure compiler ͔Β $ jsx test.jsx | jsx-linker -t closure-lib --stdin -o test.js // webworker͔Β $ jsx test.jsx | jsx-linker -t webworker --stdin -o test.js cool isn’t it !? :D
23. JSXͱJSͷؒʹ֞ࠜ͸ͳ͍
24. +49 Thanks :D