WantedlyにReact + Reduxを導入した話

WantedlyにReact + Reduxを導入した話

Meguro.es #3 in Drecom (2016/4/19)
http://meguroes.connpass.com/event/28320/

Transcript

1. Wantedlyに React + Reduxを導入した話 ーJavaScriptでココロオドル人をふやすー Meguro.es #3 in Drecom 高松 真平 (@shimpeiws)
2. シゴトでココロオドル 私は誰? 2 * 高松 真平 (@shimpeiws) * Webエンジニア @ Wantedly https://www.wantedly.com/users/544320
3. シゴトでココロオドル 目次 1 WantedlyのJS開発のこれまで 2 導入したスタック 3 ビルド・デプロイ 4 まとめとこれから 3
4. 1.WantedlyのJS開発のこれまで 4
5. シゴトでココロオドル * GitHubのwantedlyリポジトリは2011/9にinitial commit * Rails wayに則って開発 * Model数 334 Wantedly 5
6. シゴトでココロオドル WantedlyのJS開発 6 * altJSはcoffee script、モジュールローダはなし * app/assets以下は歴史を感じる重厚感 * Backbone.js、AngularがGlobalに進出
7. シゴトでココロオドル WantedlyのJS開発 7 * “フロントエンドエンジニア”は現状いない * メンテンナンスされないAngular製コード * もうJSライブラリ嫌だ... な空気が社内に蔓延 時代の到来!!!
8. シゴトでココロオドル とはいえSPA的な動的な処理が続く画面でjQueryだけはつらい → 革命だ WantedlyのJS開発 8
9. シゴトでココロオドル Issueがたった!!! WantedlyのJS開発 9
10. 2.導入したスタック 10
11. シゴトでココロオドル 今の定番を手堅くおさえた感じになっている 導入したスタック 11 * ES2015 + Babel * React * Redux * Immutable.js * CSS Modules * webpack aync/awaitが使いたいのでstage3 Flux Utilsが良い勢との戦い 内部的にも評判が良い! gulpはなし!
12. シゴトでココロオドル フォルダ構成 導入したスタック 12
13. 3.ビルド・デプロイ 13
14. シゴトでココロオドル developではwebpack dev-server ビルド・デプロイ 14 * ビルド * JS/CSS/imageなどのサーブ * HotModuleReplacementPlugin * NoErrorsPlugin
15. シゴトでココロオドル asset pipelineとどうつきあうべきか? ビルド・デプロイ 15 http://qiita.com/joe-re/items/1d5e1d0527cc439e03ef
16. シゴトでココロオドル 飛び交うマサカリ!!! ビルド・デプロイ 16 ➔ 脱 asset pipelineへ!!!
17. シゴトでココロオドル productionでのビルド・デプロイ(Assets) ビルド・デプロイ 17 * webpackからのビルドは public/assets に出力 * JS・CSSのuglify * manifestファイルの作成 * production・stagingだけ digestをつけて出力
18. シゴトでココロオドル productionでのビルド・デプロイ(Rails側) ビルド・デプロイ 18 webpackから出力されたAssetsを読み込む ヘルパメソッドを作成
19. 4.まとめとこれから 19
20. シゴトでココロオドル これからの課題 まとめとこれから 20 * React + Reduxな環境を導入した * 出だしは好調!!! * 社内的にはまだまだ書ける人が少ない * 社内勉強会 + 積極的にレビュー * テストをどう書いていくべきか * 現状Rails側のcapybara * 共通的なコンポーネントの設計 * styleはどう渡す? * イベントハンドリングはどこまでやる?
21. シゴトでココロオドル モダンな環境でReactを書きたいエンジニアWanted！！ We are hiring 21 https://www.wantedly.com/projects/51709