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
54
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
OpenTelemetry の Log を使いこなそう
biwashi
5
990
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
190
TROCCO今昔
gtnao
0
210
Wasmで社内ツールを作って配布しよう
askua
0
110
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
120
M365アカウント侵害時の初動対応
lhazy
7
4.5k
SAE J1939シミュレーション環境構築
daikiokazaki
0
140
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
500
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
8.9k
20250719_JAWS_kobe
takuyay0ne
1
160
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
140
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A better future with KSS
kneath
238
17k
Unsuck your backbone
ammeep
671
58k
Automating Front-end Workflow
addyosmani
1370
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Practical Orchestrator
shlominoach
189
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Ace a Technical Interview
jacobian
278
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Statistics for Hackers
jakevdp
799
220k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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