Lessons learned: Architecting react apps

@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
diﬃcult 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 ﬁne 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 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 conﬁdence?

@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

Lessons learned: Architecting react apps

Lessons learned: Architecting react apps

More Decks by Ankita Kulkarni

Other Decks in Technology

Featured

Transcript