新規プロダクト立ち上げとフロントエンド設計

Slide 1

Slide 1 text

1 新規プロダクト立ち上げとフロントエンド設計 Hyunseung Park / 朴賢勝 Uzabase Inc, Japan 2021.07.13 SaaSプロダクトのフロントエンド最前線 1

Slide 2

Slide 2 text

2 自己紹介プロダクトの概要 - プロダクト - デザインフィードバックをもらうまとめ 01 02 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　2 アジェンダ 04 03

Slide 3

Slide 3 text

3 @dordieux dordieux ● 朴賢勝（Park Hyunseung） ● 株式会社ユーザベース 2020/11/01 ~ ○ 2019年新卒から中途入社 ○ 前職はインターネット広告会社でJavaの開発 ● React大好き【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　3 自己紹介

Slide 4

Slide 4 text

4 4 2020/11/01入社からSPEEDAの開発をしていた【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　4

Slide 5

Slide 5 text

5 5 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　5 マイクロフロントエンド・マイクロサービス各プロジェクトチームで開発をしている -> 各プロダクトは他のプロダクトに影響を大きく与えず開発できる

Slide 6

Slide 6 text

6 感じていた課題 6 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　6 - Angular/Dartで書き方に不慣れていた - Atomic Designを採用しているが、コンポーネントのサイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い ...

Slide 7

Slide 7 text

7 7 2021/04 ~ 新規プロダクトチーム【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　7

Slide 8

Slide 8 text

8 プロダクトの概要 8

Slide 9

Slide 9 text

9 9 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　9 ※ プレスリリース前です

Slide 10

Slide 10 text

10 プロダクトの概要 10 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　10 - SPEEDAから離れた完全に別のシステム - 既存のユーザーもいるが、ユーザーが触れる画面などはなかった。 - メールベースや簡易的なフォームぐらい - 既存ユーザー + 新規ユーザーを狙う

Slide 11

Slide 11 text

11 11 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　11 さて、SPEEDAで感じた課題をどう解決していくか

Slide 12

Slide 12 text

12 感じていた課題 12 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　12 - Angular/Dartで書き方に不慣れていた - Atomic Designを採用しているが、コンポーネントのサイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い

Slide 13

Slide 13 text

13 アーキテクチャー 13 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　13

Slide 14

Slide 14 text

14 アーキテクチャー 14 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　14

Slide 15

Slide 15 text

15 15 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　15 UzabaseはXPを元にペアプログラミングを徹底しています

Slide 16

Slide 16 text

16 感じていた課題 16 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　16 - Angular/Dartで書き方に不慣れていた - Atomic Designを採用しているが、コンポーネントのサイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い

Slide 17

Slide 17 text

17 17 UIフレームワークらしきものを作る【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　17

Slide 18

Slide 18 text

18 18 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　18 最初からできるわけではなく、多くのフィードバックを元に作られる

Slide 19

Slide 19 text

19 19 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　19 最初からできるわけではなく、多くのフィードバックを元に作られるフィードバックサイクルをどうやっていかに早く、多く回すか

Slide 20

Slide 20 text

20 フィードバックをもらう 20

Slide 21

Slide 21 text

21 フィードバックサイクル 21 フィードバックサイクルをいかに早く、多く回すか【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　21

Slide 22

Slide 22 text

22 フィードバックサイクル 22 フィードバックが多い改善が多い変化に強く作る【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　22

Slide 23

Slide 23 text

23 フィードバックサイクル 23 フィードバックが多い改善が多い変化に強く作る【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　23

Slide 24

Slide 24 text

24 変化に強くするには 24 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　24

Slide 25

Slide 25 text

25 変化に強くするには 25 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　25 内部品質

Slide 26

Slide 26 text

26 変化に強くするには 26 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　26

Slide 27

Slide 27 text

27 27 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　27 e2e module-e2e dev argo sync docker image k8s マニフェスト作成 e2e実行 prod

Slide 28

Slide 28 text

28 変化に強くするには 28 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　28

Slide 29

Slide 29 text

29 29 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　29 保守性高いコードを書く質とスピードはトレードオフではない保守性を高めればスピードも上がり、保守性を落とせばスピードは下がる

Slide 30

Slide 30 text

30 30 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　30 保守性高いコードを書く質とスピードはトレードオフではない保守性を高めればスピードも上がり、保守性を落とせばスピードは下がる Clean Architectureでやっています

Slide 31

Slide 31 text

31 変化に強くするには 31 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　31

Slide 32

Slide 32 text

32 32 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　32 UzabaseのE2E Gauge + Chrome Driverを使った Seleniumのテスト

Slide 33

Slide 33 text

33 33 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　33 実際のテスト # マイページの項目の更新 * トップページにアクセスする * メールアドレス"test@uzabase.com"パスワード"password"でログインする * マイページが表示されている ## メールアドレスを更新することができる - mailaddress * メールアドレスに"test@uzabase.com"が表示されている * メールアドレスに"update@uzabase.com"を入力する * 更新ボタンを押下する * メールアドレスに"update@uzabase.com"が表示されている * DBが更新されている * 外部のAPIにリクエストが行われている

Slide 34

Slide 34 text

34 34 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　34 実際のテスト

Slide 35

Slide 35 text

35 35 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　35 自動テスト自動テスト（E2Eテスト）を書くのは大変だけど、本当に効果ある？

Slide 36

Slide 36 text

36 36 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　36 自動テスト自動テストを書くのに消費した時間はいつ回収できる？

Slide 37

Slide 37 text

37 37 https://speakerdeck.com/twada/quality-and-speed-2020-autumn-edition 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　37

Slide 38

Slide 38 text

38 まとめ 38

Slide 39

Slide 39 text

39 39 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　39 まとめ - UI/UXの改善は多くのフィードバックを元に行われる - 内部品質をあげることでフィードバックサイクルが早くなる - 多くのフィードバックはUI/UXなどの外部品質を向上させる - UI/UXの改善は内部品質をあげるところから始まる

Slide 40

Slide 40 text

40 40 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　40 反省点コンポーネントをもっと抽象化するパイプラインの効率化（CI/CD改善）フロントエンドの知見を広げる

Slide 41

Slide 41 text

41 41 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　41 https://hatenanews.com/articles/20 21/05/26/103000 https://zine.qiita.com/interview/2021 05-uzabase/ 積極採用中です！