Post on 31-May-2015
description
Closure CompilerのES6対応 あるいは
ES6時代のAltJS生存戦略
@teppeis ES6 Casual 2014/10/29
Hello!• @teppeis
• cybozu kintone
• Closure Compiler, TypeScript, Testing, Scaling..
Closure Compiler
Closure Compiler
• compile JS to better JS
• 超圧縮&最適化
• JSDocベースの静的型付け
あなたも毎日使ってます!
JSDocベースの静的型付け
JSDocベースの静的型付け• 冗長だけど、既存のJSとの親和性がバツグン
• JavaScriptの進化に追随できる(後述)
• コンパイルなしでも実行可能
• どうせJSDoc書くし。まさか、ドキュメント書かない気ですか?
5月にGitHub化
活発に開発中
最近何やってんの?• ECMAScript6対応
• 型推論の強化
• RefasterJS(自動リファクタリング)
• Conformance(規約チェック)
ECMAScript 6
Compile ES6 to ES3
java -jar compiler.jar \ --language_in ECMASCRIPT6 \ --language_out ECMASCRIPT3 \ --js foo.js
Arrow Function
Class
Enhanced object literals
Default, rest, spread params
and already supported !• const/let
• Generator
• Destructuring
• String templates
• Binary & octal literal
• …
実装中の大物• Modules
• super (Class)
ES6 compatibility table
各種ブラウザとコンパイラのES6対応表
http://kangax.github.io/compat-table/es6/
対応状況のチェックを自動化• かなりの書きなぐりコード
• 6to5とかも対応しようと思ったけど面 (ry
Why doesn’t Closure use Traceur?
Tracuerを使わなかった理由• Tracuerは変換結果にコメントを残せない
• Closure CompilerではJSDocが肝
• パフォーマンス問題
• TraceurはJS実装、ClosureはJava実装
• ASTとソースの変換が2回
コンパイルのコスト• Traceur + Closure
• ES6 > Traceur AST > ES5 > Closure AST > Optimized ES5
• Closure only
• ES6 > Closure AST (ES6 > ES5) > Optimized ES5
http://yosuke-furukawa.hatenablog.com/entry/2014/09/10/191140
nodeconf.eu 2014
ちょw
Tracuerの微妙なところ• 自前で実装する基準がよくわからない
• String.prototype.startsWith とか
• そのおかげでランタイムがめちゃでかい。
• コンパイル不要な機能はes6shimに任せれば良いのでは?
ES6 vs. AltJS
AltJS黎明期• 各種AltJSがオレオレ最強Syntaxを実装
• そのうち有用なものをES6/7が取り込む
• ES6だけでも十分モダンなsyntaxに
• 各ブラウザとコンパイラがES6対応開始
• いまここ
AltJSの選定基準• そのコンテキストにおけるJSの不満を解決
• 主目的はそれぞれ • 学習コスト、開発者の確保
• ECMAScriptベースだと楽じゃない? • AltJSからの出口戦略(プロダクトとAltJSどっちが長生き?)
• 開発の継続性 • コミュニティが活発 • 強力な後ろだて(政治)
• 移行コスト
• 元コードがキレイ or 生成コードがキレイ(標準に近い)
ECMAScript準拠の強み• Closure Compilerは基本文法はJSそのまま
• JS (ECMAScript) が進化すれば、Closure Compilerも合わせて進化できる
• 独自syntaxのAltJSではそうもいかない
• 進化しないと、機能落ち、 類似だけど微妙に違う仕様、などに陥る
ES6時代のAltJS
• 欲張らないES6ベース + 独自色(主目的)
• Closure(型、圧縮)
• TypeScript(型)
• AngularJS AtScript(型、アノテーション)
• Facebook Flow(型、高速化?)
型ばっかりでゴメンw• でも Google, Microsoft, Facebook,
ビッグネームが型付きJS始めたのは 偶然じゃあない。
• ECMAScript Types が提案に(次の発表で!)
• 最強の出口戦略: 標準化
• 来るか大統一型定義時代!
http://teppeis.hatenablog.com/entry/2014/10/facebook-flow-in-3-minutes
Thanks!