Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新規プロダクト立ち上げとフロントエンド設計
Search
HYUNSEUNG
July 13, 2021
Programming
2
290
新規プロダクト立ち上げとフロントエンド設計
2021.07.13 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 登壇資料
HYUNSEUNG
July 13, 2021
Tweet
Share
More Decks by HYUNSEUNG
See All by HYUNSEUNG
Next.jsでClean ArchitectureとDDD
dordieux
4
3.7k
Other Decks in Programming
See All in Programming
楽しく向き合う例外対応
okutsu
0
710
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
ML.NETで始める機械学習
ymd65536
0
240
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
160
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
260
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.5k
CloudNativePGを布教したい
nnaka2992
0
120
バッチを作らなきゃとなったときに考えること
irof
2
550
Jakarta EE meets AI
ivargrimstad
0
530
AIプログラミング雑キャッチアップ
yuheinakasaka
19
5k
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
Jakarta EE meets AI
ivargrimstad
0
570
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Bash Introduction
62gerente
611
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Fireside Chat
paigeccino
35
3.2k
A better future with KSS
kneath
238
17k
Designing for Performance
lara
605
68k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Automating Front-end Workflow
addyosmani
1369
200k
Git: the NoSQL Database
bkeepers
PRO
428
65k
Transcript
1 新規プロダクト立ち上げと フロントエンド設計 Hyunseung Park / 朴賢勝 Uzabase Inc, Japan
2021.07.13 SaaSプロダクトのフロントエンド最前線 1
2 自己紹介 プロダクトの概要 - プロダクト - デザイン フィードバックをもらう まとめ 01
02 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 2 アジェンダ 04 03
3 @dordieux dordieux • 朴 賢勝(Park Hyunseung) • 株式会社ユーザベース 2020/11/01
~ ◦ 2019年新卒から中途入社 ◦ 前職はインターネット広告会社でJavaの開発 • React大好き 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 3 自己紹介
4 4 2020/11/01入社からSPEEDAの開発をしていた 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 4
5 5 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 5 マイクロフロントエンド・マイクロサービス 各プロジェクトチームで開発をしている -> 各プロダクトは他のプロダクトに影響を 大きく与えず開発できる
6 感じていた課題 6 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 6 - Angular/Dartで書き方に不慣れていた - Atomic
Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い ...
7 7 2021/04 ~ 新規プロダクトチーム 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 7
8 プロダクトの概要 8
9 9 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 9 ※ プレスリリース前です
10 プロダクトの概要 10 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 10 - SPEEDAから離れた完全に別のシステム - 既存のユーザーもいるが、ユーザーが触れる画面などはなかっ
た。 - メールベースや簡易的なフォームぐらい - 既存ユーザー + 新規ユーザーを狙う
11 11 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 11 さて、SPEEDAで感じた課題を どう解決していくか
12 感じていた課題 12 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 12 - Angular/Dartで書き方に不慣れていた - Atomic
Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い
13 アーキテクチャー 13 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 13
14 アーキテクチャー 14 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 14
15 15 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 15 UzabaseはXPを元に ペアプログラミングを徹底しています
16 感じていた課題 16 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 16 - Angular/Dartで書き方に不慣れていた - Atomic
Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い
17 17 UIフレームワークらしきものを作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 17
18 18 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 18 最初からできるわけではなく、 多くのフィードバックを元に作られる
19 19 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 19 最初からできるわけではなく、 多くのフィードバックを元に作られる フィードバックサイクルをどうやって いかに早く、多く回すか
20 フィードバックをもらう 20
21 フィードバックサイクル 21 フィードバックサイクルを いかに早く、多く回すか 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 21
22 フィードバックサイクル 22 フィードバックが多い 改善が多い 変化に強く作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 22
23 フィードバックサイクル 23 フィードバックが多い 改善が多い 変化に強く作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 23
24 変化に強くするには 24 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 24
25 変化に強くするには 25 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 25 内部品質
26 変化に強くするには 26 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 26
27 27 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 27 e2e module-e2e dev argo sync
docker image k8s マニフェスト作成 e2e実行 prod
28 変化に強くするには 28 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 28
29 29 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 29 保守性高いコードを書く 質とスピードはトレードオフではない 保守性を高めればスピードも上がり、 保守性を落とせばスピードは下がる
30 30 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 30 保守性高いコードを書く 質とスピードはトレードオフではない 保守性を高めればスピードも上がり、 保守性を落とせばスピードは下がる Clean
Architectureでやっています
31 変化に強くするには 31 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 31
32 32 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 32 UzabaseのE2E Gauge + Chrome Driverを使った
Seleniumのテスト
33 33 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 33 実際のテスト # マイページの項目の更新 * トップページにアクセスする
* メールアドレス"test@uzabase.com"パスワード"password"でログインする * マイページが表示されている ## メールアドレスを更新することができる - mailaddress * メールアドレスに"test@uzabase.com"が表示されている * メールアドレスに"update@uzabase.com"を入力する * 更新ボタンを押下する * メールアドレスに"update@uzabase.com"が表示されている * DBが更新されている * 外部のAPIにリクエストが行われている
34 34 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 34 実際のテスト
35 35 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 35 自動テスト 自動テスト(E2Eテスト)を書くのは 大変だけど、本当に効果ある?
36 36 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 36 自動テスト 自動テストを書くのに消費した時間は いつ回収できる?
37 37 https://speakerdeck.com/twada/quality-and-speed-2020-autumn-edition 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 37
38 まとめ 38
39 39 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 39 まとめ - UI/UXの改善は多くのフィードバックを元に行われる - 内部品質をあげることでフィードバックサイクルが早くなる
- 多くのフィードバックはUI/UXなどの外部品質を向上させる - UI/UXの改善は内部品質をあげるところから始まる
40 40 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 40 反省点 コンポーネントをもっと抽象化する パイプラインの効率化(CI/CD改善) フロントエンドの知見を広げる
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/ 積極採用中です!