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
260
新規プロダクト立ち上げとフロントエンド設計
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.5k
Other Decks in Programming
See All in Programming
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Securify_エンジニア採用資料
3shake
0
110
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
3
870
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
170
私のEbitengineの第一歩
qt_luigi
0
450
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
LangChainの現在とv0.3にむけて
os1ma
4
940
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
400
Featured
See All Featured
Navigating Team Friction
lara
183
13k
How STYLIGHT went responsive
nonsquared
93
5.1k
A Philosophy of Restraint
colly
202
16k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
What's in a price? How to price your products and services
michaelherold
242
11k
Optimizing for Happiness
mojombo
375
69k
Designing for Performance
lara
604
68k
Typedesign – Prime Four
hannesfritz
39
2.3k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Six Lessons from altMBA
skipperchong
26
3.4k
Design by the Numbers
sachag
277
19k
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/ 積極採用中です!