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

by Sansan

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Eightの紹介

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Sansan Builders Box PCからも利⽤可能 Eightの紹介

Slide 10

Slide 10 text

Sansan Builders Box - Eight企業向けプレミアム - Eight Career Design Eightの紹介 - 企業向けサービス

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Eightフロントエンドの歴史

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Sansan Builders Box - 初期リリース - 名刺ホルダー jQuery UI 時代

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Sansan Builders Box - 機能拡充 - メッセージ - 通知 - プレミアム - フレームワーク導⼊ Backbone.js + jQuery UI + CoffeeScript 時代

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Sansan Builders Box - MVCの構成が複雑化 - デザイン刷新 - やってみる！ React + Redux + ES6 時代

Slide 21

Slide 21 text

課題と改善

Slide 22

Slide 22 text

Sansan Builders Box 【UI】 - モノリシックなCSS - バラバラなスタイル、コンポーネント【データ】 - 煩雑な定形コード作成課題

Slide 23

Slide 23 text

モノリシックなCSS

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Sansan Builders Box - ID セレクター - 要素型セレクター - 複雑な結合⼦ - !important - 課題 - モノリシックなCSS … … …

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Sansan Builders Box - 課題 - モノリシックなCSS なぜそこも・・・それじゃぁ、これで・・・ ※ 限りなく現実に近いフィクションです

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

改善

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Sansan Builders Box - CSSファイルをコンポーネントファイルに合わせる - １つのコンポーネントには１つのCSS - スタイル定義のセレクタに規約を設ける - コンポーネントの最外部に固有のclassをつける - ドキュメントの整備 - 既存のCSSファイルをコンポーネント単位に - およそ 11,000⾏ - 地道な作業 - 改善 - CSSのコンポーネント化 BEM scss-lint

Slide 32

Slide 32 text

Sansan Builders Box - 改善 - CSSのコンポーネント化 Bコンポーネント Aコンポーネント疎結合

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

改善

Slide 38

Slide 38 text

Sansan Builders Box Eightフロントエンド改善の歴史 2016~ CSSのコンポーネント化 2015/12 React + Redux スタイルガイド

Slide 39

Slide 39 text

Sansan Builders Box - 参照しやすいように静的なドキュメントとして展開 - PropType (型定義)が表現できる - 実際に触って動かせる - react-styleguidist - 改善 - スタイルガイド

Slide 40

Slide 40 text

Sansan Builders Box - 改善 - スタイルガイドこんなボタンにしたいんだけどスタイルガイドのこのボタンであわせてみませんか？デザイナエンジニアなるほど

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

さらに改善 ~新スタイルガイド~

Slide 43

Slide 43 text

Sansan Builders Box - あらためて既存UIからの切り出し - デザイナとの確認 - チームでの議論 - 改善 - スタイルガイド New

Slide 44

Slide 44 text

Sansan Builders Box - Storybook - React Hooks - TypeScript - Jest - 改善 - スタイルガイド New プロダクト全体へ

Slide 45

Slide 45 text

Sansan Builders Box Eightフロントエンド改善の歴史 2016~ CSSのコンポーネント化 2015/12 React + Redux スタイルガイド新スタイルガイド

Slide 46

Slide 46 text

Sansan Builders Box - 改善 - スタイルガイド

Slide 47

Slide 47 text

Sansan Builders Box 【UI】 - モノリシックなCSS - バラバラなスタイル、コンポーネント【データ】 - 煩雑な定形コード作成課題

Slide 48

Slide 48 text

煩雑な定形コード作成

Slide 49

Slide 49 text

Sansan Builders Box - 課題 - 煩雑な定形コード作成 • YAML or JSON • RESTful API • a.k.a. Swagger

Slide 50

Slide 50 text

Sansan Builders Box - 課題 - 煩雑な定形コード作成 Swagger UI https://swagger.io/tools/swagger-ui

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Sansan Builders Box - 課題 - 煩雑な定形コード作成 194 API (2019/10時点) ⼤量のコードが必要

Slide 53

Slide 53 text

Sansan Builders Box - 課題 - 煩雑な定形コード作成 view middleware action reducer store Redux React 定形処理のコード群 • 通信部分 • reducer コピペコード

Slide 54

Slide 54 text

Sansan Builders Box - 改善 - ⾃動でデータを取り扱う定義があるなら⾃動的にデータを取得、格納できるのでは

Slide 55

Slide 55 text

改善

Slide 56

Slide 56 text

Sansan Builders Box Eightフロントエンド改善の歴史 2016~ CSSのコンポーネント化 2015/12 React + Redux スタイルガイド新スタイルガイドコード⾃動化 2017~ 2018/5~

Slide 57

Slide 57 text

Sansan Builders Box - swagger-client - API定義から⾃動で通信を⾏う - normalizr - ネストしたリソースを正規化 - https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape - 改善 - ⾃動でデータを取り扱う

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Sansan Builders Box - 改善 - ⾃動でデータを取り扱う { type: GET_PET__PET_ID_, payload: { petId: 1 }, } dispatch action

Slide 60

Slide 60 text

Sansan Builders Box - 改善 - ⾃動でデータを取り扱う専⽤middleware action response schema + normalizrで正規化 dispatch swagger-clientで通信

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Sansan Builders Box normalizrのメリット - 更新APIなどではレスポンスを利⽤して、なにもしなくてもデータ更新 - APIのレスポンスに更新済みデータがあればschemaに従って更新 - ネストしているリソースも正規化するので異なるAPI由来でもデータ更新 - 改善 - ⾃動でデータを取り扱う { petStore: { id: “a”, pet: { petId: 1, kind: “cat” } } } store petStore更新 pet更新

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Sansan Builders Box - 改善 - ⾃動でデータを取り扱う action schema reducer 不要不要 x 4

Slide 65

Slide 65 text

まとめ

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

No content