Transcript

• 1. Flowtype Introduction @teppeis 歌舞伎座.tech#6 2015/02/16
• 2. Hello! • @teppeis • Cybozu kintone • Closure Compiler, TypeScript, Testing, Scaling..
• 3. Flowtype?
• 4. Flowtype • 2014年末にFacebookが発表した
 JavaScript用静的型チェッカー • TypeScript互換(後述)の型アノテーション • 強力な型推論 • React/JSXをネイティブサポート • 高速な並列インクリメンタルコンパイル • OCaml実装
• 5. Static Typing <Kata>
• 6. Static typing in JavaScript • 実行時ではななく、
 コンパイル時に静的に型の整合性を検査 • Closure Compiler, TypeScript, AtScript, SoundScript … • 一定規模以上での必要性が理解されてきた • コード規模 • 開発者数 • メンテナンス期間
• 7. TypeScriptっぽい型注釈
• 8. 強力な型推論
• 9. Native Support for React/JSX
• 10. React/JSX with Flowtype • 最大の利点は PropTypes の静的型チェック • 通常は開発時のランタイムチェックのみ • Flowtypeに組み込みで実装されてる
• 11. • propTypesで定義した型をコンパイル時チェック PropTypes
• 12. ES6 Class with React v0.13!
• 13. Flowtype is Fast!
• 14. 並列インクリメンタルコンパイラ • flowコマンドでバックグラウンドに
 複数プロセスが立ち上がる。 • 2回目からは超高速
• 15. Tips for installation • Macなら “brew install flow” がオススメ • 中の人が即日反映してくれる • Linuxなら公式のバイナリダウンロード • Windowsは… • opam, npm は更新が遅いので注意
• 16. vs. TypeScript
• 17. Flow vs. TypeScript • 強力な型推論と型表現 (non-nullable, this, …) • 高速なインクリメンタルコンパイラ • React/JSXネイティブ対応 • Module関連はどちらもまだまだ • FlowtypeであってFlowlangではない
• 18. ECMAScript 7?
• 19. TC39 September 25 2014
• 20. FlowtypeはFlowlangではない • ただの型チェッカーに徹するシンプルさ • jsx —strip-types で型注釈を削除 • 言語に独自機能を足さない • 既存資産との親和性、学習容易性 • ES6に合わせて進化できる • 将来の型注釈標準化との相性の良さ • TypeScript “lang” とは思想が違う
• 21. で、Flowtype 今すぐ使えるの?
• 22. 落ち着け
 もう少し待て
• 23. はまりポイント • 情報が無い, ドキュメントは初版から更新無し • 型定義ファイルの記述力が低い • d.tsとの互換性にいくつか問題が • TypeScriptの独自仕様がきつい • constructor, nested module, export … • まだまだベータ。がんがん変わる。 • Facebook社内ブランチがもりもりmergeされてる
• 24. References • Flow | A static type checker for JavaScript
 http://flowtype.org/ • React.js Conf 2015 - Static typing with Flow and TypeScript
 https://www.youtube.com/watch?v=9PTa9-PPVAc
 https://github.com/jbrantly/reactconf • React v0.13.0 Beta 1 | React
 http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html • tc39-notes/es6/2014-09
 https://github.com/tc39/tc39-notes/tree/master/es6/2014-09
• 25. Thanks!