Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Shimpei Takamatsu

July 21, 2016
Tweet

More Decks by Shimpei Takamatsu

Other Decks in Technology

Transcript

  1. シゴトでココロオドル 私は誰? 2 * 高松 真平 (@shimpeiws) * Webエンジニア @

    Wantedly * クライアントグロースチーム https://www.wantedly.com/users/544320
  2. シゴトでココロオドル スタックの選定、開発環境・デプロイ まとめ - React + Reduxの導入 15 * スタックの選定

    * React + Reduxを中心に現在主流なものを集めた * 特にImmutable.jsが設計上重要な位置を占めている * 開発環境・デプロイ * ビルドにはwebpackを採用 * 開発環境ではwebpack dev-server、他の環境ではデ プロイプロセスにビルドが組み込まれている * 環境ごとの差はヘルパメソッドを用意して吸収
  3. シゴトでココロオドル * プロダクションと同じ環境で作ったサンプル + 実習資料 * プロジェクトに入る人にやってもらう、という計画... * 動作確認のためのplaygroundを用意 *

    レビュー時の部分的確認、ライブラリを試してみる時などに サンプル・環境の整備 22 shimpeiws/react-redux-sokushu shimpeiws/js-playground
  4. シゴトでココロオドル プロジェクトの運営 + 資料や環境の整備 まとめ - 社内での展開 23 * プロジェクトの運営

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

    Reduxを導入した * 脱Asset Pipelineの方針なので、Rails Wayからそれ ることを決断した * 社内展開 * プロジェクトの運営 + 資料整備で書けるメンバーを 増やしていった * レビューではReactに限らずWebのクライアントサイ ド開発の設計について主に見ている * Productionと同じ構成で気軽に試せる環境を用意し た
  6. シゴトでココロオドル まだできていない事、これからの課題 これから 26 * 品質との戦い * 規模も大きく複雑度も高いので、バグは出やすい。 現状はリリース前に目視のテスト項目を消化している。 *

    適切にユニットテストを書きたい(対象や粒度を決め ていきたい) * サーバサイドレンダリング * 現状管理画面等、初期ロードの遅さは許される部分 でしか使っていない * イニシャルロードの速さが求められる画面でも適用 できないか? (Reactを使わないという選択肢もあり)