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. Eightのフロントエンド 〜改善の歴史と今後の展望〜

  2. Sansan Builders Box アジェンダ - Eightの紹介 - Eightフロントエンドの歴史 - 課題と改善

    - まとめ
  3. Eightの紹介

  4. Sansan Builders Box Eightの紹介 名刺でつながる、ビジネスのためのSNS • 正確にデータ化 • 近況情報が届く •

    すぐに名刺情報にアクセス • 気軽に連絡
  5. Sansan Builders Box Eightの紹介 名刺でつながる、ビジネスのためのSNS • 正確にデータ化 • 近況情報が届く •

    すぐに名刺情報にアクセス • 気軽に連絡
  6. Sansan Builders Box Eightの紹介 名刺でつながる、ビジネスのためのSNS • 正確にデータ化 • 近況情報が届く •

    すぐに名刺情報にアクセス • 気軽に連絡
  7. Sansan Builders Box Eightの紹介 名刺でつながる、ビジネスのためのSNS • 正確にデータ化 • 近況情報が届く •

    すぐに名刺情報にアクセス • 気軽に連絡
  8. Sansan Builders Box Eightの紹介 名刺でつながる、ビジネスのためのSNS • 正確にデータ化 • 近況情報が届く •

    すぐに名刺情報にアクセス • 気軽に連絡
  9. Sansan Builders Box PCからも利⽤可能 Eightの紹介

  10. Sansan Builders Box - Eight企業向けプレミアム - Eight Career Design Eightの紹介

    - 企業向けサービス
  11. Sansan Builders Box 名刺をスキャンするだけで、社内の名刺が共有できる Eight 企業向けプレミアム

  12. Sansan Builders Box Eight Career Design タレントプールで転職シグナルをキャッチ

  13. ⻘⼭ 修平(Shuhei Aoyama) • Eight Career Designを担当 • さわり⼼地のよいUIを作っていきたい フロントエンドエンジニア

    @Mt_blue81
  14. Eightフロントエンドの歴史

  15. Sansan Builders Box Eightフロントエンドの歴史 2012/2 2013/4 2015/12 jQuery UI Backbone.js

    React + Redux
  16. Sansan Builders Box - 初期リリース - 名刺ホルダー jQuery UI 時代

  17. Sansan Builders Box Eightフロントエンドの歴史 2012/2 2013/4 2015/12 jQuery UI Backbone.js

    React + Redux
  18. Sansan Builders Box - 機能拡充 - メッセージ - 通知 -

    プレミアム - フレームワーク導⼊ Backbone.js + jQuery UI + CoffeeScript 時代
  19. Sansan Builders Box Eightフロントエンドの歴史 2012/2 2013/4 2015/12 jQuery UI Backbone.js

    React + Redux
  20. Sansan Builders Box - MVCの構成が複雑化 - デザイン刷新 - やってみる! React

    + Redux + ES6 時代
  21. 課題と改善

  22. Sansan Builders Box 【UI】 - モノリシックなCSS - バラバラなスタイル、コンポーネント 【データ】 -

    煩雑な定形コード作成 課題
  23. モノリシックなCSS

  24. Sansan Builders Box - 課題 - モノリシックなCSS 参照

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

    - !important - 課題 - モノリシックなCSS … … …
  26. Sansan Builders Box - 課題 - モノリシックなCSS ここの背景⾊⽔⾊に変えたいな ※ 限りなく現実に近いフィクションです

  27. Sansan Builders Box - 課題 - モノリシックなCSS なぜそこも・・・ それじゃぁ、これで・・・ ※

    限りなく現実に近いフィクションです
  28. Sansan Builders Box - 課題 - モノリシックなCSS ※ 限りなく現実に近いフィクションです

  29. 改善

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

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

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

  33. バラバラなスタイル、コンポーネント

  34. Sansan Builders Box - 課題 - バラバラなスタイル、コンポーネント 同じ?

  35. Sansan Builders Box - 課題 - バラバラなスタイル、コンポーネント マウスホバー時

  36. Sansan Builders Box - 課題 - バラバラなスタイル、コンポーネント 似ているけど違う

  37. 改善

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

    + Redux スタイルガイド
  39. Sansan Builders Box - 参照しやすいように 静的なドキュメントとして展開 - PropType (型定義)が表現できる -

    実際に触って動かせる - react-styleguidist - 改善 - スタイルガイド
  40. Sansan Builders Box - 改善 - スタイルガイド こんなボタンにしたいんだけど スタイルガイドのこのボタンで あわせてみませんか?

    デザイナ エンジニア なるほど
  41. Sansan Builders Box - 改善 - スタイルガイド ここはスタイルガイドの このコンポーネントでいけそうですね エンジニア

    デザイナ なるほど
  42. さらに改善 ~新スタイルガイド~

  43. Sansan Builders Box - あらためて既存UIからの 切り出し - デザイナとの確認 - チームでの議論

    - 改善 - スタイルガイド New
  44. Sansan Builders Box - Storybook - React Hooks - TypeScript

    - Jest - 改善 - スタイルガイド New プロダクト全体へ
  45. Sansan Builders Box Eightフロントエンド 改善 の歴史 2016~ CSSのコンポーネント化 2015/12 React

    + Redux スタイルガイド 新スタイルガイド
  46. Sansan Builders Box - 改善 - スタイルガイド

  47. Sansan Builders Box 【UI】 - モノリシックなCSS - バラバラなスタイル、コンポーネント 【データ】 -

    煩雑な定形コード作成 課題
  48. 煩雑な定形コード作成

  49. Sansan Builders Box - 課題 - 煩雑な定形コード作成 • YAML or

    JSON • RESTful API • a.k.a. Swagger
  50. Sansan Builders Box - 課題 - 煩雑な定形コード作成 Swagger UI https://swagger.io/tools/swagger-ui

  51. Sansan Builders Box - 課題 - 煩雑な定形コード作成 サーバエンジニア アプリエンジニア フロントエンジニア

  52. Sansan Builders Box - 課題 - 煩雑な定形コード作成 194 API (2019/10時点)

    ⼤量のコードが必要
  53. Sansan Builders Box - 課題 - 煩雑な定形コード作成 view middleware action

    reducer store Redux React 定形処理のコード群 • 通信部分 • reducer コピペコード
  54. Sansan Builders Box - 改善 - ⾃動でデータを取り扱う 定義があるなら⾃動的にデータを 取得、格納できるのでは

  55. 改善

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

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

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

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

    payload: { petId: 1 }, } dispatch action
  60. Sansan Builders Box - 改善 - ⾃動でデータを取り扱う 専⽤middleware action response

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

    1 Pet PetStore id: b id: a store view React 正規化により 同じデータは⼀箇所に 専⽤ reducer
  62. Sansan Builders Box normalizrのメリット - 更新APIなどではレスポンスを利⽤して、なにもしなくてもデータ更新 - APIのレスポンスに更新済みデータがあればschemaに従って更新 - ネストしているリソースも正規化するので

    異なるAPI由来でもデータ更新 - 改善 - ⾃動でデータを取り扱う { petStore: { id: “a”, pet: { petId: 1, kind: “cat” } } } store petStore更新 pet更新
  63. Sansan Builders Box - 改善 - ⾃動でデータを取り扱う view middleware action

    reducer store 定形処理のコード群 • 通信部分 • reducer Redux React
  64. Sansan Builders Box - 改善 - ⾃動でデータを取り扱う action schema reducer

    不要 不要 x 4
  65. まとめ

  66. Sansan Builders Box - フロントエンドの歴史と改善 - レガシーへの対応も新しいチャレンジも - 技術だけではなくチームを巻き込んだ改善 まとめ

  67. Sansan Builders Box まとめ デザイナ, PO フロントエンド サーバサイド

  68. None