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

Eightのフロントエンド〜改善の歴史と今後の展望〜 / Eight Frontend

Sansan
October 23, 2019

Eightのフロントエンド〜改善の歴史と今後の展望〜 / Eight Frontend

■イベント
Sansan Builders Box 2019
https://jp.corp-sansan.com/sbb2019/

■登壇概要
タイトル:Eightのフロントエンド〜改善の歴史と今後の展望〜

登壇者:
Eight事業部 フロントエンジニア 青山修平

▼Sansan Builders Box
https://buildersbox.corp-sansan.com/

Sansan

October 23, 2019
Tweet

More Decks by Sansan

Other Decks in Technology

Transcript

  1. Sansan Builders Box - 機能拡充 - メッセージ - 通知 -

    プレミアム - フレームワーク導⼊ Backbone.js + jQuery UI + CoffeeScript 時代
  2. Sansan Builders Box - ID セレクター - 要素型セレクター - 複雑な結合⼦

    - !important - 課題 - モノリシックなCSS … … …
  3. Sansan Builders Box - CSSファイルをコンポーネントファイルに合わせる - 1つのコンポーネントには1つのCSS - スタイル定義のセレクタに規約を設ける -

    コンポーネントの最外部に固有のclassをつける - ドキュメントの整備 - 既存のCSSファイルをコンポーネント単位に - およそ 11,000⾏ - 地道な作業 - 改善 - CSSのコンポーネント化 BEM scss-lint
  4. Sansan Builders Box - Storybook - React Hooks - TypeScript

    - Jest - 改善 - スタイルガイド New プロダクト全体へ
  5. Sansan Builders Box - 課題 - 煩雑な定形コード作成 view middleware action

    reducer store Redux React 定形処理のコード群 • 通信部分 • reducer コピペコード
  6. Sansan Builders Box Eightフロントエンド 改善 の歴史 2016~ CSSのコンポーネント化 2015/12 React

    + Redux スタイルガイド 新スタイルガイド コード⾃動化 2017~ 2018/5~
  7. Sansan Builders Box - swagger-client - API定義から⾃動で通信を⾏う - normalizr -

    ネストしたリソースを正規化 - https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape - 改善 - ⾃動でデータを取り扱う
  8. Sansan Builders Box - API定義から専⽤のコードを⽣成するツールを作成 - normalizrで利⽤するschema定義 - actionのtype定義 -

    データの型情報など - ⽣成されたコードを使って通信、レスポンス解析を⾏うための middlewareとreducerを作成 - 改善 - ⾃動でデータを取り扱う https://github.com/eightcard/openapi-to-normalizr
  9. Sansan Builders Box - 改善 - ⾃動でデータを取り扱う 専⽤middleware action response

    schema + normalizrで正規化 dispatch swagger-clientで通信
  10. Sansan Builders Box - 改善 - ⾃動でデータを取り扱う id: 2 id:

    1 Pet PetStore id: b id: a store view React 正規化により 同じデータは⼀箇所に 専⽤ reducer
  11. Sansan Builders Box - 改善 - ⾃動でデータを取り扱う view middleware action

    reducer store 定形処理のコード群 • 通信部分 • reducer Redux React