Wantedlyでの React + Reduxの導入 & 展開

WantedlyにReact + Reduxを導入した方法と、社内での展開方法についての発表です。

React 勉強会@Hive Shibuya
http://connpass.com/event/35540/

Transcript

1. Wantedlyでの React + Reduxの導入 & 展開 ーシゴトでココロオドル人をふやすー TechHub - React 勉強会 高松 真平 (@shimpeiws)
2. シゴトでココロオドル 私は誰? 2 * 高松 真平 (@shimpeiws) * Webエンジニア @ Wantedly * クライアントグロースチーム https://www.wantedly.com/users/544320
3. シゴトでココロオドル ブログや発表 3 * React系でブログを書いたりLTしたり * Wantedly Feedのスペース機能でエンジニアブログが書けます!!!
4. シゴトでココロオドル 目次 1 Wantedlyの開発フロー 2 React + Reduxの導入 3 社内での展開 4 まとめとこれから 4
5. 1.Wantedlyの開発フロー 5
6. シゴトでココロオドル * GitHubのwantedlyリポジトリは2011/9にinitial commit * モノリシックなRailsアプリケーション * Model数 350超 Wantedly 6
7. シゴトでココロオドル * ディレクターのいないエンジニア中心のカルチャー * Code Wins Argumentsの精神 * エンジニアによるPDCAサイクル Wantedlyのエンジニアカルチャー 7
8. シゴトでココロオドル * Rails Wayに則った開発 * Github Flowによる高速な開発スタイル * デプロイはエンジニアが任意のタイミングで行う Wantedlyの開発フロー 8
9. シゴトでココロオドル * Asset Pipeline・Sprockets・coffee script * 部分的にBackbone.jsとAngular.jsを導入 * メンテナンスされなくなり、負債となりかけたAngular.js製コード Wantedlyのフロントエンド開発 9
10. 2.React + Reduxの導入 10
11. シゴトでココロオドル * SPAなど複雑・大規模なJS開発の必要性が出てきた * JSフレームワークの乱立が落ち着きつつあった時期 * 既存部分の置き換えではなく、新規部分から順次適用 React + Redux導入の経緯 11
12. シゴトでココロオドル * 2016年現在の比較的メジャーなものを集めた構成 * React + Reduxを中心としている * 自分はFlux Utilesを推していた... 導入したスタック 12 * ES2015 + Babel (stage-3) * React * Redux * Immutable.js * CSS Modules * webpack
13. シゴトでココロオドル * 脱Asset Pipeline!!! * Railsプロジェクト直下のappと同階層にfrontend * frontend/assets/javascripts/react配下がReact + Redux部分 フォルダ構成 13
14. シゴトでココロオドル * ビルドにはwebpackを利用(タスクランナーはなし) * 開発環境ではwebpack dev-serverを利用 * アセットのminifyやダイジェストの追加はwebpackのプラグインで実施 * 環境ごとの違いはヘルパメソッドを作成することで吸収 ビルド・開発環境・デプロイ 14
15. シゴトでココロオドル スタックの選定、開発環境・デプロイ まとめ - React + Reduxの導入 15 * スタックの選定 * React + Reduxを中心に現在主流なものを集めた * 特にImmutable.jsが設計上重要な位置を占めている * 開発環境・デプロイ * ビルドにはwebpackを採用 * 開発環境ではwebpack dev-server、他の環境ではデ プロイプロセスにビルドが組み込まれている * 環境ごとの差はヘルパメソッドを用意して吸収
16. 3.社内での展開 16
17. シゴトでココロオドル * 導入当初は2人しか書けなかった * その後数ヶ月で5人に増えた * Reactのコンポーネントの資産は100以上になった 書けるメンバーが増えた 17 2016/2 2016/7
18. シゴトでココロオドル * クライアントサイド1万行超えの大規模プロジェクト、Reactの Production使用経験・SPA実装経験があるのは自分のみ * 最初の2週間は、アーキテクチャを考えながらひたすら書いた * ↑を手本に書いたメンバーの実装分をレビューしていった チームへの展開 18
19. シゴトでココロオドル 1. 通信のタイミングは適切か? ユーザの操作をブロックしていないか? 2. データの先読みが可能ならば行っているか? エラー時に適切なフォールバックが行われているか? レビューポイント(Reactに限らない) 19
20. シゴトでココロオドル レビューポイント(Reactに限らない) 20 3. エラーViewやリロードボタンなどの削除漏れはないか? 特定の操作パターンで残っていないか? 4. Stateの置き場は適切か? this.stateは後から後悔することが多い...
21. シゴトでココロオドル * “一人React.js Advent Calendar 2014”がバイブル * Reduxは公式ドキュメント * ES2015はcoffeeを書いていた人には入りやすかったらしい * react-routerが難しかったという声がチラホラ... React + Reduxオススメ資料 21
22. シゴトでココロオドル * プロダクションと同じ環境で作ったサンプル + 実習資料 * プロジェクトに入る人にやってもらう、という計画... * 動作確認のためのplaygroundを用意 * レビュー時の部分的確認、ライブラリを試してみる時などに サンプル・環境の整備 22 shimpeiws/react-redux-sokushu shimpeiws/js-playground
23. シゴトでココロオドル プロジェクトの運営 + 資料や環境の整備 まとめ - 社内での展開 23 * プロジェクトの運営 * 最初にアーキテクチャを考えながらひたすら書く * レビューではReactに限らずWebのクライアントサイ ド開発の設計について主に指摘している * 資料や環境の整備 * Productionの構成を簡略化したサンプルと解説を用 意した * Productionと同じ構成で気軽に試せる環境を用意し た → レビューやライブラリ選定で捗る
24. 4.まとめとこれから 24
25. シゴトでココロオドル まとめ 25 * React + Reduxの導入 * フロントエンドの複雑さに対応するためにReact + Reduxを導入した * 脱Asset Pipelineの方針なので、Rails Wayからそれ ることを決断した * 社内展開 * プロジェクトの運営 + 資料整備で書けるメンバーを 増やしていった * レビューではReactに限らずWebのクライアントサイ ド開発の設計について主に見ている * Productionと同じ構成で気軽に試せる環境を用意し た
26. シゴトでココロオドル まだできていない事、これからの課題 これから 26 * 品質との戦い * 規模も大きく複雑度も高いので、バグは出やすい。 現状はリリース前に目視のテスト項目を消化している。 * 適切にユニットテストを書きたい(対象や粒度を決め ていきたい) * サーバサイドレンダリング * 現状管理画面等、初期ロードの遅さは許される部分 でしか使っていない * イニシャルロードの速さが求められる画面でも適用 できないか? (Reactを使わないという選択肢もあり)
27. シゴトでココロオドル モダンな環境でReactを書きたいエンジニアWanted！！ We are hiring 27 https://www.wantedly.com/projects/59809