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