@kulkarniankita910 consulting lessons:architecting react appsAnkita Kulkarni,Tech Lead, Loblaw Digital
View Slide
@kulkarniankita9Hi, I’m Ankita!
@kulkarniankita9What have I built?
@kulkarniankita9
@kulkarniankita9Use cases• Monitor your credit score - using biometrics• Food delivery app• Reporting
@kulkarniankita91. Projectstructure
@kulkarniankita9Directory structure index.js srcauth index.jsactions/epic/reducer/selectorcommoncomponentsbuttonprimaryButton/secondaryButton/tertiaryButtonutilsconstantsstorestorybook localeModules
@kulkarniankita9Challenges • A lot of shared context made it difficult to share codeVertical slicing modules eg: auth, biometrics
@kulkarniankita92. React contextand statemanagement
@kulkarniankita9Project
@kulkarniankita9Is Context a statemanagementsolution?
@kulkarniankita9Does Contextreplace redux?
@kulkarniankita9Do you needredux?
@kulkarniankita9We couldn’t get rid of state managementlibrary
@kulkarniankita9Common context examples ✨• Auth context • Orders context
@kulkarniankita9Challenges • Context was used as a state management solutionWhen the app was small, this worked fine but not when it grewLook into a state management solution Examples: Redux, Apollo cache
@kulkarniankita93. How storybookhelped andevolved?
@kulkarniankita9What is storybook?
@kulkarniankita9Storybook is
@kulkarniankita9Design tokens
@kulkarniankita9Component library
@kulkarniankita9Examples
@kulkarniankita94. With ❤and without GQL
@kulkarniankita9What is GQL? • Only get what you ask for
@kulkarniankita9Without GQL
@kulkarniankita9With GQL
@kulkarniankita9Challenges• We were missing data transformation using Apollo hooksAdded validation on top of this to check for null values
@kulkarniankita95. Performance
@kulkarniankita9Container and presentationalcomponents
@kulkarniankita9• Container and Presentational components• Use memoization• Use pure functions• Code splitting
@kulkarniankita96. Documentationand on-boarding
@kulkarniankita9Docs!• Add a task to add some documentation to every Jira ticket• Practice what you preach
@kulkarniankita97. Accessibility
@kulkarniankita9React a11y• https://github.com/dequelabs/react-axe• Lighthouse
@kulkarniankita9Lighthouse
@kulkarniankita98. With hooks ⚓
@kulkarniankita9Common hooks ✨• Translation hook• Accessibility hook for reducing motion• Responsive breakpoints
@kulkarniankita99. Testing
@kulkarniankita9What gave usmoreconfidence?
@kulkarniankita9Testing• Unit testing• React component testing: react-testing-library• API data transformation layer testing• Integration testing• Automation testing
@kulkarniankita910. Forms arehard, use alibrary
@kulkarniankita9Libraries used• Formik• redux-form
@kulkarniankita9Example
@kulkarniankita9Design pattern• Multi-step sign-up process• JSON form builder
@kulkarniankita9Bonus: BeEmpathetic!
@kulkarniankita9This is pretty much the end..Questions?Comments?Feedback…make it positive—Catch me after!!
@kulkarniankita9You did it
kulkarniankita09
naohachi89
is_ryo
kgsi
oracle4engineer
na0x2c6
oldbigbuddha
codenote
.jpg){kind=avatar}
oshanqq
shkitayama
sugawani
otanet
moritalous
eitanlees
lara
quramy
tenderlove
geeforr
bcantrill
jennybc
soudai
lemiorhan
chriscoyier
tammyeverts