Tweet
Tweet

Slide 1

Slide 1 text

@kulkarniankita9 10 consulting lessons: architecting react apps Ankita Kulkarni, Tech Lead, Loblaw Digital

Slide 2

Slide 2 text

@kulkarniankita9 Hi, I’m Ankita!

Slide 3

Slide 3 text

@kulkarniankita9 What have I built?

Slide 4

Slide 4 text

@kulkarniankita9

Slide 5

Slide 5 text

@kulkarniankita9 Use cases • Monitor your credit score - using biometrics • Food delivery app • Reporting

Slide 6

Slide 6 text

@kulkarniankita9

Slide 7

Slide 7 text

@kulkarniankita9 1. Project structure

Slide 8

Slide 8 text

@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

Slide 9

Slide 9 text

@kulkarniankita9 Challenges • A lot of shared context made it difficult to share code Vertical slicing modules eg: auth, biometrics

Slide 10

Slide 10 text

@kulkarniankita9 2. React context and state management

Slide 11

Slide 11 text

@kulkarniankita9 Project

Slide 12

Slide 12 text

@kulkarniankita9 Is Context a state management solution?

Slide 13

Slide 13 text

@kulkarniankita9 Does Context replace redux?

Slide 14

Slide 14 text

@kulkarniankita9 Do you need redux?

Slide 15

Slide 15 text

@kulkarniankita9 We couldn’t get rid of state management library

Slide 16

Slide 16 text

@kulkarniankita9 Common context examples ✨ • Auth context • Orders context

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@kulkarniankita9 3. How storybook helped and evolved?

Slide 19

Slide 19 text

@kulkarniankita9 What is storybook?

Slide 20

Slide 20 text

@kulkarniankita9 Storybook is

Slide 21

Slide 21 text

@kulkarniankita9 Design tokens

Slide 22

Slide 22 text

@kulkarniankita9 Component library

Slide 23

Slide 23 text

@kulkarniankita9 Examples

Slide 24

Slide 24 text

@kulkarniankita9 4. With ❤ and without GQL

Slide 25

Slide 25 text

@kulkarniankita9 What is GQL? • Only get what you ask for

Slide 26

Slide 26 text

@kulkarniankita9 Without GQL

Slide 27

Slide 27 text

@kulkarniankita9 Without GQL

Slide 28

Slide 28 text

@kulkarniankita9 With GQL

Slide 29

Slide 29 text

@kulkarniankita9 With GQL

Slide 30

Slide 30 text

@kulkarniankita9 Challenges • We were missing data transformation using Apollo hooks Added validation on top of this to check for null values

Slide 31

Slide 31 text

@kulkarniankita9 5. Performance

Slide 32

Slide 32 text

@kulkarniankita9 Container and presentational components

Slide 33

Slide 33 text

@kulkarniankita9 • Container and Presentational components • Use memoization • Use pure functions • Code splitting

Slide 34

Slide 34 text

@kulkarniankita9 6. Documentation and on-boarding

Slide 35

Slide 35 text

@kulkarniankita9 Docs! • Add a task to add some documentation to every Jira ticket • Practice what you preach

Slide 36

Slide 36 text

@kulkarniankita9 7. Accessibility

Slide 37

Slide 37 text

@kulkarniankita9 React a11y • https://github.com/dequelabs/react-axe • Lighthouse

Slide 38

Slide 38 text

@kulkarniankita9 Lighthouse

Slide 39

Slide 39 text

@kulkarniankita9 8. With hooks ⚓

Slide 40

Slide 40 text

@kulkarniankita9 Common hooks ✨ • Translation hook • Accessibility hook for reducing motion • Responsive breakpoints

Slide 41

Slide 41 text

@kulkarniankita9 9. Testing

Slide 42

Slide 42 text

@kulkarniankita9 What gave us more confidence?

Slide 43

Slide 43 text

@kulkarniankita9 Testing • Unit testing • React component testing: react-testing-library • API data transformation layer testing • Integration testing • Automation testing

Slide 44

Slide 44 text

@kulkarniankita9 10. Forms are hard, use a library

Slide 45

Slide 45 text

@kulkarniankita9

Slide 46

Slide 46 text

@kulkarniankita9 Libraries used • Formik • redux-form

Slide 47

Slide 47 text

@kulkarniankita9 Example

Slide 48

Slide 48 text

@kulkarniankita9 Design pattern • Multi-step sign-up process • JSON form builder

Slide 49

Slide 49 text

@kulkarniankita9 Bonus: Be Empathetic!

Slide 50

Slide 50 text

@kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make it positive— Catch me after!!

Slide 51

Slide 51 text

@kulkarniankita9 You did it