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
Lessons learned: Architecting react apps
Search
Ankita Kulkarni
September 15, 2020
Technology
1
190
Lessons learned: Architecting react apps
Ankita Kulkarni
September 15, 2020
Tweet
Share
More Decks by Ankita Kulkarni
See All by Ankita Kulkarni
5 things you must know to take your Next app to the next level
kulkarniankita09
0
230
Oh Hello Apollo client, Goodbye Redux!
kulkarniankita09
1
440
Beyond the React Native Benchmark
kulkarniankita09
0
51
Accessibility 360 - Web -> Mobile
kulkarniankita09
0
55
Make your React Native apps accessible 🙌
kulkarniankita09
0
170
Let's fight - Redux side-effects showdown
kulkarniankita09
0
150
The Art of Humanizing Pull Requests
kulkarniankita09
0
590
Being Agile - Scrum and Extreme Programming
kulkarniankita09
0
73
Other Decks in Technology
See All in Technology
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
220
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
220
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
110
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
360
alecthomas/kong はいいぞ
fujiwara3
6
1.3k
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
220
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
200
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
140
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
8.1k
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
650
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
250
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Practical Orchestrator
shlominoach
190
11k
Balancing Empowerment & Direction
lara
1
520
Navigating Team Friction
lara
188
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Side Projects
sachag
455
43k
The Cult of Friendly URLs
andyhume
79
6.5k
Optimizing for Happiness
mojombo
379
70k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Code Review Best Practice
trishagee
69
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Transcript
@kulkarniankita9 10 consulting lessons: architecting react apps Ankita Kulkarni, Tech
Lead, Loblaw Digital
@kulkarniankita9 Hi, I’m Ankita!
@kulkarniankita9 What have I built?
@kulkarniankita9
@kulkarniankita9 Use cases • Monitor your credit score - using
biometrics • Food delivery app • Reporting
@kulkarniankita9
@kulkarniankita9 1. Project structure
@kulkarniankita9 Directory structure index.js src auth index.js actions/epic/reducer/selector common components
button primaryButton/secondaryButton/tertiaryButton utils constants store storybook locale Modules
@kulkarniankita9 Challenges • A lot of shared context made it
difficult to share code Vertical slicing modules eg: auth, biometrics
@kulkarniankita9 2. React context and state management
@kulkarniankita9 Project
@kulkarniankita9 Is Context a state management solution?
@kulkarniankita9 Does Context replace redux?
@kulkarniankita9 Do you need redux?
@kulkarniankita9 We couldn’t get rid of state management library
@kulkarniankita9 Common context examples ✨ • Auth context • Orders
context
@kulkarniankita9 Challenges • Context was used as a state management
solution When the app was small, this worked fine but not when it grew Look into a state management solution Examples: Redux, Apollo cache
@kulkarniankita9 3. How storybook helped and evolved?
@kulkarniankita9 What is storybook?
@kulkarniankita9 Storybook is
@kulkarniankita9 Design tokens
@kulkarniankita9 Component library
@kulkarniankita9 Examples
@kulkarniankita9 4. With ❤ and without GQL
@kulkarniankita9 What is GQL? • Only get what you ask
for
@kulkarniankita9 Without GQL
@kulkarniankita9 Without GQL
@kulkarniankita9 With GQL
@kulkarniankita9 With GQL
@kulkarniankita9 Challenges • We were missing data transformation using Apollo
hooks Added validation on top of this to check for null values
@kulkarniankita9 5. Performance
@kulkarniankita9 Container and presentational components
@kulkarniankita9 • Container and Presentational components • Use memoization •
Use pure functions • Code splitting
@kulkarniankita9 6. Documentation and on-boarding
@kulkarniankita9 Docs! • Add a task to add some documentation
to every Jira ticket • Practice what you preach
@kulkarniankita9 7. Accessibility
@kulkarniankita9 React a11y • https://github.com/dequelabs/react-axe • Lighthouse
@kulkarniankita9 Lighthouse
@kulkarniankita9 8. With hooks ⚓
@kulkarniankita9 Common hooks ✨ • Translation hook • Accessibility hook
for reducing motion • Responsive breakpoints
@kulkarniankita9 9. Testing
@kulkarniankita9 What gave us more confidence?
@kulkarniankita9 Testing • Unit testing • React component testing: react-testing-library
• API data transformation layer testing • Integration testing • Automation testing
@kulkarniankita9 10. Forms are hard, use a library
@kulkarniankita9
@kulkarniankita9 Libraries used • Formik • redux-form
@kulkarniankita9 Example
@kulkarniankita9 Design pattern • Multi-step sign-up process • JSON form
builder
@kulkarniankita9 Bonus: Be Empathetic!
@kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make
it positive— Catch me after!!
@kulkarniankita9 You did it