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

Slide 1

Slide 1 text

Wantedlyでの React + Reduxの導入 & 展開ーシゴトでココロオドル人をふやすー TechHub - React 勉強会高松真平 (@shimpeiws)

Slide 2

Slide 2 text

シゴトでココロオドル私は誰? 2 * 高松真平 (@shimpeiws) * Webエンジニア @ Wantedly * クライアントグロースチーム https://www.wantedly.com/users/544320

Slide 3

Slide 3 text

シゴトでココロオドルブログや発表 3 * React系でブログを書いたりLTしたり * Wantedly Feedのスペース機能でエンジニアブログが書けます!!!

Slide 4

Slide 4 text

シゴトでココロオドル目次 1 Wantedlyの開発フロー 2 React + Reduxの導入 3 社内での展開 4 まとめとこれから 4

Slide 5

Slide 5 text

1.Wantedlyの開発フロー 5

Slide 6

Slide 6 text

シゴトでココロオドル * GitHubのwantedlyリポジトリは2011/9にinitial commit * モノリシックなRailsアプリケーション * Model数 350超 Wantedly 6

Slide 7

Slide 7 text

シゴトでココロオドル * ディレクターのいないエンジニア中心のカルチャー * Code Wins Argumentsの精神 * エンジニアによるPDCAサイクル Wantedlyのエンジニアカルチャー 7

Slide 8

Slide 8 text

シゴトでココロオドル * Rails Wayに則った開発 * Github Flowによる高速な開発スタイル * デプロイはエンジニアが任意のタイミングで行う Wantedlyの開発フロー 8

Slide 9

Slide 9 text

シゴトでココロオドル * Asset Pipeline・Sprockets・coffee script * 部分的にBackbone.jsとAngular.jsを導入 * メンテナンスされなくなり、負債となりかけたAngular.js製コード Wantedlyのフロントエンド開発 9

Slide 10

Slide 10 text

2.React + Reduxの導入 10

Slide 11

Slide 11 text

シゴトでココロオドル * SPAなど複雑・大規模なJS開発の必要性が出てきた * JSフレームワークの乱立が落ち着きつつあった時期 * 既存部分の置き換えではなく、新規部分から順次適用 React + Redux導入の経緯 11

Slide 12

Slide 12 text

シゴトでココロオドル * 2016年現在の比較的メジャーなものを集めた構成 * React + Reduxを中心としている * 自分はFlux Utilesを推していた... 導入したスタック 12 * ES2015 + Babel (stage-3) * React * Redux * Immutable.js * CSS Modules * webpack

Slide 13

Slide 13 text

シゴトでココロオドル * 脱Asset Pipeline!!! * Railsプロジェクト直下のappと同階層にfrontend * frontend/assets/javascripts/react配下がReact + Redux部分フォルダ構成 13

Slide 14

Slide 14 text

シゴトでココロオドル * ビルドにはwebpackを利用(タスクランナーはなし) * 開発環境ではwebpack dev-serverを利用 * アセットのminifyやダイジェストの追加はwebpackのプラグインで実施 * 環境ごとの違いはヘルパメソッドを作成することで吸収ビルド・開発環境・デプロイ 14

Slide 15

Slide 15 text

シゴトでココロオドルスタックの選定、開発環境・デプロイまとめ - React + Reduxの導入 15 * スタックの選定 * React + Reduxを中心に現在主流なものを集めた * 特にImmutable.jsが設計上重要な位置を占めている * 開発環境・デプロイ * ビルドにはwebpackを採用 * 開発環境ではwebpack dev-server、他の環境ではデプロイプロセスにビルドが組み込まれている * 環境ごとの差はヘルパメソッドを用意して吸収

Slide 16

Slide 16 text

3.社内での展開 16

Slide 17

Slide 17 text

シゴトでココロオドル * 導入当初は2人しか書けなかった * その後数ヶ月で5人に増えた * Reactのコンポーネントの資産は100以上になった書けるメンバーが増えた 17 2016/2 2016/7

Slide 18

Slide 18 text

シゴトでココロオドル * クライアントサイド1万行超えの大規模プロジェクト、Reactの Production使用経験・SPA実装経験があるのは自分のみ * 最初の2週間は、アーキテクチャを考えながらひたすら書いた * ↑を手本に書いたメンバーの実装分をレビューしていったチームへの展開 18

Slide 19

Slide 19 text

シゴトでココロオドル 1. 通信のタイミングは適切か? ユーザの操作をブロックしていないか? 2. データの先読みが可能ならば行っているか? エラー時に適切なフォールバックが行われているか? レビューポイント(Reactに限らない) 19

Slide 20

Slide 20 text

シゴトでココロオドルレビューポイント(Reactに限らない) 20 3. エラーViewやリロードボタンなどの削除漏れはないか? 特定の操作パターンで残っていないか? 4. Stateの置き場は適切か? this.stateは後から後悔することが多い...

Slide 21

Slide 21 text

シゴトでココロオドル * “一人React.js Advent Calendar 2014”がバイブル * Reduxは公式ドキュメント * ES2015はcoffeeを書いていた人には入りやすかったらしい * react-routerが難しかったという声がチラホラ... React + Reduxオススメ資料 21

Slide 22

Slide 22 text

シゴトでココロオドル * プロダクションと同じ環境で作ったサンプル + 実習資料 * プロジェクトに入る人にやってもらう、という計画... * 動作確認のためのplaygroundを用意 * レビュー時の部分的確認、ライブラリを試してみる時などにサンプル・環境の整備 22 shimpeiws/react-redux-sokushu shimpeiws/js-playground

Slide 23

Slide 23 text

シゴトでココロオドルプロジェクトの運営 + 資料や環境の整備まとめ - 社内での展開 23 * プロジェクトの運営 * 最初にアーキテクチャを考えながらひたすら書く * レビューではReactに限らずWebのクライアントサイド開発の設計について主に指摘している * 資料や環境の整備 * Productionの構成を簡略化したサンプルと解説を用意した * Productionと同じ構成で気軽に試せる環境を用意した → レビューやライブラリ選定で捗る

Slide 24

Slide 24 text

4.まとめとこれから 24

Slide 25

Slide 25 text

シゴトでココロオドルまとめ 25 * React + Reduxの導入 * フロントエンドの複雑さに対応するためにReact + Reduxを導入した * 脱Asset Pipelineの方針なので、Rails Wayからそれることを決断した * 社内展開 * プロジェクトの運営 + 資料整備で書けるメンバーを増やしていった * レビューではReactに限らずWebのクライアントサイド開発の設計について主に見ている * Productionと同じ構成で気軽に試せる環境を用意した

Slide 26

Slide 26 text

シゴトでココロオドルまだできていない事、これからの課題これから 26 * 品質との戦い * 規模も大きく複雑度も高いので、バグは出やすい。現状はリリース前に目視のテスト項目を消化している。 * 適切にユニットテストを書きたい(対象や粒度を決めていきたい) * サーバサイドレンダリング * 現状管理画面等、初期ロードの遅さは許される部分でしか使っていない * イニシャルロードの速さが求められる画面でも適用できないか? (Reactを使わないという選択肢もあり)

Slide 27

Slide 27 text

シゴトでココロオドルモダンな環境でReactを書きたいエンジニアWanted！！ We are hiring 27 https://www.wantedly.com/projects/59809