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

13d936e697fe0f4fa96f926d0a712f6c?s=47 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/

13d936e697fe0f4fa96f926d0a712f6c?s=128

Sansan

October 23, 2019
Tweet

Transcript

  1. 18.

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

    プレミアム - フレームワーク導⼊ Backbone.js + jQuery UI + CoffeeScript 時代
  2. 25.

    Sansan Builders Box - ID セレクター - 要素型セレクター - 複雑な結合⼦

    - !important - 課題 - モノリシックなCSS … … …
  3. 29.
  4. 31.

    Sansan Builders Box - CSSファイルをコンポーネントファイルに合わせる - 1つのコンポーネントには1つのCSS - スタイル定義のセレクタに規約を設ける -

    コンポーネントの最外部に固有のclassをつける - ドキュメントの整備 - 既存のCSSファイルをコンポーネント単位に - およそ 11,000⾏ - 地道な作業 - 改善 - CSSのコンポーネント化 BEM scss-lint
  5. 37.
  6. 39.
  7. 44.

    Sansan Builders Box - Storybook - React Hooks - TypeScript

    - Jest - 改善 - スタイルガイド New プロダクト全体へ
  8. 53.

    Sansan Builders Box - 課題 - 煩雑な定形コード作成 view middleware action

    reducer store Redux React 定形処理のコード群 • 通信部分 • reducer コピペコード
  9. 55.
  10. 56.

    Sansan Builders Box Eightフロントエンド 改善 の歴史 2016~ CSSのコンポーネント化 2015/12 React

    + Redux スタイルガイド 新スタイルガイド コード⾃動化 2017~ 2018/5~
  11. 57.

    Sansan Builders Box - swagger-client - API定義から⾃動で通信を⾏う - normalizr -

    ネストしたリソースを正規化 - https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape - 改善 - ⾃動でデータを取り扱う
  12. 58.

    Sansan Builders Box - API定義から専⽤のコードを⽣成するツールを作成 - normalizrで利⽤するschema定義 - actionのtype定義 -

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

    Sansan Builders Box - 改善 - ⾃動でデータを取り扱う 専⽤middleware action response

    schema + normalizrで正規化 dispatch swagger-clientで通信
  14. 61.

    Sansan Builders Box - 改善 - ⾃動でデータを取り扱う id: 2 id:

    1 Pet PetStore id: b id: a store view React 正規化により 同じデータは⼀箇所に 専⽤ reducer
  15. 63.

    Sansan Builders Box - 改善 - ⾃動でデータを取り扱う view middleware action

    reducer store 定形処理のコード群 • 通信部分 • reducer Redux React
  16. 65.
  17. 68.