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
150
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
220
Oh Hello Apollo client, Goodbye Redux!
kulkarniankita09
1
430
Beyond the React Native Benchmark
kulkarniankita09
0
42
Accessibility 360 - Web -> Mobile
kulkarniankita09
0
47
Make your React Native apps accessible 🙌
kulkarniankita09
0
160
Let's fight - Redux side-effects showdown
kulkarniankita09
0
140
The Art of Humanizing Pull Requests
kulkarniankita09
0
540
Being Agile - Scrum and Extreme Programming
kulkarniankita09
0
66
Other Decks in Technology
See All in Technology
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
380
バイセルにおけるAI活用の取り組みについて紹介します/Generative AI at BuySell Technologies
kyuns
1
220
一休.comレストランにおけるRustの活用
kymmt90
2
300
リファクタリングへの耐性が高いモデルベースの統合テストの紹介 / Model-Base Integration Test for Refactoring
yuitosato
5
1.5k
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
21
6.1k
What's in a Postgres major release? An analysis of contributions in the v17 timeframe | Claire Giordano | PGConf EU 2024
clairegiordano
1
700
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
3
1.5k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
0
110
話題のGraphRAG、その可能性と課題を理解する
hide212131
2
530
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
240
Hotwire光の道とStimulus
nay3
5
2.3k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Happy Clients
brianwarren
97
6.7k
Building Your Own Lightsaber
phodgson
102
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
BBQ
matthewcrist
85
9.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
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