Download as PDF, PPTX
Uploaded byTeppei Sato
Flowtype Introduction
歌舞伎座.tech#6「VirtualDOMとReact」でのLT発表資料 http://kbkz.connpass.com/event/11254/
More Related Content
Flowtype Introduction
- 1.
- 2. Hello! • @teppeis • Cybozukintone • Closure Compiler, TypeScript, Testing, Scaling..
- 3.
- 4. Flowtype • 2014年末にFacebookが発表した JavaScript用静的型チェッカー • TypeScript互換(後述)の型アノテーション •強力な型推論 • React/JSXをネイティブサポート • 高速な並列インクリメンタルコンパイル • OCaml実装
- 5.
- 6. Static typing inJavaScript • 実行時ではななく、 コンパイル時に静的に型の整合性を検査 • Closure Compiler, TypeScript, AtScript, SoundScript … • 一定規模以上での必要性が認知されてきた • ヒト: 開発チームの人数 • モノ: コード行数 • 時間: 開発期間 + メンテナンス期間
- 7.
- 8.
- 9.
- 10. React/JSX with Flowtype •最大の利点は PropTypes の静的型チェック • 通常は開発時のランタイムチェックのみ • Flowtypeに組み込みで実装されてる
- 11.
- 12. ES6 Class withReact v0.13!
- 13.
- 14.
- 15. Tips for installation •Macなら “brew install flow” がオススメ • 中の人が即日反映してくれる • Linuxなら公式のバイナリダウンロード • Windowsは… • opam, npm は更新が遅いので注意
- 16.
- 17. Flow vs. TypeScript •強力な型推論と型表現 (non-nullable, this, …) • 高速なインクリメンタルコンパイラ • React/JSXネイティブ対応 • Module関連はどちらもまだまだ • FlowtypeであってFlowlangではない
- 18.
- 19.
- 20. FlowtypeはFlowlangではない • ただの型チェッカーに徹するシンプルさ • jsx—strip-types で型注釈を削除 • 言語に独自機能を足さない • 既存資産との親和性、学習容易性 • ES6に合わせて進化できる • 将来の型注釈標準化との相性の良さ • TypeScript “lang” とは思想が違う
- 21.
- 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.