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
200
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
56
Accessibility 360 - Web -> Mobile
kulkarniankita09
0
58
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
600
Being Agile - Scrum and Extreme Programming
kulkarniankita09
0
77
Other Decks in Technology
See All in Technology
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
160
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
11k
人工衛星のファームウェアをRustで書く理由
koba789
15
7.8k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
280
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
S3アクセス制御の設計ポイント
tommy0124
3
200
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
440
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
120
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
830
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
BBQ
matthewcrist
89
9.8k
Designing for humans not robots
tammielis
253
25k
Bash Introduction
62gerente
615
210k
Writing Fast Ruby
sferik
628
62k
Rails Girls Zürich Keynote
gr2m
95
14k
A Tale of Four Properties
chriscoyier
160
23k
Balancing Empowerment & Direction
lara
3
620
Gamification - CAS2011
davidbonilla
81
5.4k
Agile that works and the tools we love
rasmusluckow
330
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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