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