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

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

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

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

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

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ファイルをコンポーネントファイルに合わせる - １つのコンポーネントには１つの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 フロントエンド サーバサイド