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
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
自力でTTSモデルを作った話
zgock999
0
100
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
Rubyと自由とAIと
yotii23
6
1.8k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
830
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
290
CloudNativePGを布教したい
nnaka2992
0
110
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
310
Ça bouge du côté des animations CSS !
goetter
2
150
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Designing for Performance
lara
604
68k
Music & Morning Musume
bryan
46
6.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Docker and Python
trallard
44
3.3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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 実際のテスト # マイページの項目の更新 * トップページにアクセスする
* メールアドレス"
[email protected]
"パスワード"password"でログインする * マイページが表示されている ## メールアドレスを更新することができる - mailaddress * メールアドレスに"
[email protected]
"が表示されている * メールアドレスに"
[email protected]
"を入力する * 更新ボタンを押下する * メールアドレスに"
[email protected]
"が表示されている * 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/ 積極採用中です!