WantedlyにReact + Reduxを導入した話

WantedlyにReact + Reduxを導入した話

WantedlyにReact + Reduxを導入した話

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

25887c0d7c3ddc0845a0d5738cf21dd6?s=128

Shimpei Takamatsu

April 19, 2016
Tweet

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