Mais conteúdo relacionado
Semelhante a kintoneフロントエンド開発 モダン化への道 (20)
Mais de Yusuke Amano (13)
kintoneフロントエンド開発 モダン化への道
- 5. 開発体制
▌PM 2名
▌PG 東京9名 + 大阪3名
▌デザイナ 2名
▌QA 東京、松山、上海合わせて15名強
▌3ヶ月に1度の機能追加リリース
▌開発者環境→社内環境の二段階ドッグフーディング
- 8. ベースJSライブラリ: Google Closure Tools
▌Closure Library
フルスタックなJSのライブラリ
▌Closure Compiler
静的型チェック&minify
▌Closure Templates
テンプレートエンジン
▌当時はモジュール管理ができて機能豊富だったのが選定理由
▌今はClosure Compilerの静的型チェックの存在が大きい
- 11. ユニットテスト
▌mocha + Sinon.JS + expect.js でテスト記述
▌Karmaを使ってPhantomJSでテスト実行
▌PhantomJSが不安定なので4並列で4回に分けて実行
http://blog.cybozu.io/entry/7089
- 13. これまでのモダン化への取り組み
▌ Closure Compilerの型チェック有効化
▌ Closure Linter, JSHintの導入
▌ CI & 自動テスト環境の整備
▌ ユニットテストのモダンツール化
▌ Graspによるソースコード変換でBDDスタイルに移行
▌ Grunt導入
▌ ビルドスクリプトのnpm run化
▌ Gruntタスクの並列化
▌ Sass + Compass導入
▌ CSSビルドをMaven→Gruntタスク化
▌ autoprefixer導入
▌ Yeoman generators
▌ etc…
- 16. Closure Tools + React
http://www.slideshare.net/ama-ch/google-closure-toolsreact
Notas do Editor
- Autoprefixerや4096セレクタ対策にblesscssなども
- 既存ライブラリがある状況でReactを導入した
まだ道半ば
- ES6+React/Reduxで小規模なSPAを作った
小さいプロジェクトで実績を作ることで導入しやすくなる
- 一泊二日の合宿で改善活動
React導入に向けたコンポーネントの生産、ES6調査などをした
- 社内のフロント情報に興味ある人達が情報共有する場
勉強会じゃなくてランチ会にすることで開催コストを0にした
ESLintのルール名をカルタにしたら面白いんじゃないかと思ってやってみたけど、全然面白くなかった
- ES6は言語としての機能が増えるのでぜひ使いたい。Babelなどで一度導入すれば今後入るES2016,ES2017にも対応できる。
ReactはVirtualDOMの概念でUI構築のパラダイムシフトが起きたと思うので触ってほしい。Reactを触ることで自然とbabelやnpmなどモダンツールセットに近づけるのも○
- 壊さない→JSHintの導入時はいきなり修正を始めず、まず緩い設定で入れたりインライン無効化した
少しずつ→一部のコンポーネントだけReact化してみる, 追加するテストだけ新構成で動かす
背景を説明→MTGやGW上で周囲に共有
ドキュメントを書く→導入によって手順や書き方が変わるところをまとめる。迷ったらこれを引けるようにする。
サポート窓口→自分が最後まで責任をもって導入を進めるという意思表示