Maintainable React

A presentation at Geekle.us 2020 - Online conference in April 2020 in by Charly Poly

Slide 1

Slide 1

Maintainable React p h o t o b y M a t í a s S a n t a n 1a

Slide 2

Slide 2

Who am I Maintainable React Charly POLY @whereischarly 2

Slide 3

Slide 3

Who am I Maintainable React Charly POLY Sr. Software Engineer at Double Former Tech lead at Algolia @whereischarly 2

Slide 4

Slide 4

Who am I Maintainable React Charly POLY Sr. Software Engineer at Double Former Tech lead at Algolia Passionate about web-engineering for 15 years @whereischarly 2

Slide 5

Slide 5

Who am I Maintainable React Charly POLY Sr. Software Engineer at Double Former Tech lead at Algolia Passionate about web-engineering for 15 years Write on Medium and honest.engineering Speak at meetups and conferences @whereischarly 2

Slide 6

Slide 6

A quick look to front-end history @whereischarly Maintainable React 3.1

Slide 7

Slide 7

A quick look to front-end history Maintainable React <2000 JQuery /Prototype Cross-browsers API Animations @whereischarly 3.1

Slide 8

Slide 8

A quick look to front-end history <2000 Maintainable React 2000-2010’ JQuery /Prototype Backbone Cross-browsers API MVP Animations Component State management Templating @whereischarly 3.1

Slide 9

Slide 9

A quick look to front-end history <2000 Maintainable React 2000-2010’ 2010-2020’ JQuery /Prototype Backbone Angular / React Cross-browsers API MVP MVV, MV* Animations Component State management Separation of Concerns Templating Application State management modules DI @whereischarly 3.1

Slide 10

Slide 10

Maintainable React “ Modern front-end is complex software @whereischarly 3.2

Slide 11

Slide 11

What is “Maintainable”? Maintainable React Maintainable React app is about code that is: @whereischarly 4

Slide 12

Slide 12

What is “Maintainable”? Maintainable React Maintainable React app is about code that is: Easy to navigate @whereischarly 🧭 4

Slide 13

Slide 13

What is “Maintainable”? Maintainable React Maintainable React app is about code that is: 🧭 Easy to change 🔧 Easy to navigate @whereischarly 4

Slide 14

Slide 14

What is “Maintainable”? Maintainable React Maintainable React app is about code that is: 🧭 Easy to change 🔧 Easy to test 📏 Easy to navigate @whereischarly 4

Slide 15

Slide 15

What is “Maintainable”? Maintainable React Maintainable React app is about code that is: 🧭 Easy to change 🔧 Easy to test 📏 Stable 🏗 Easy to navigate @whereischarly 4

Slide 16

Slide 16

Maintainable React Make your React app easy to navigate @whereischarly 🧭 5.1

Slide 17

Slide 17

React app easy to navigate @whereischarly 🧭 Maintainable React 5.2

Slide 18

Slide 18

React app easy to navigate 🧭 Maintainable React Project: Project chat title Project header Project listing item Project shortlist item Project thumbnail Project actions buttons @whereischarly 5.2

Slide 19

Slide 19

React app easy to navigate 🧭 Maintainable React Project: Project chat title Project header Project listing item Project shortlist item Project thumbnail Project actions buttons @whereischarly 5.2

Slide 20

Slide 20

React app easy to navigate 🧭 Maintainable React [Domain]|[Page/Context]|ComponentName|[Type] Part surrounded by “[]” are optional. @whereischarly 5.3

Slide 21

Slide 21

React app easy to navigate 🧭 Maintainable React [Domain]|[Page/Context]|ComponentName|[Type] Part surrounded by “[]” are optional. @whereischarly 5.4

Slide 22

Slide 22

React app easy to navigate 🧭 Maintainable React Domain: “Which product owns this component?” [Domain]|[Page/Context]|ComponentName|[Type] Part surrounded by “[]” are optional. @whereischarly 5.4

Slide 23

Slide 23

React app easy to navigate 🧭 Maintainable React Domain: “Which product owns this component?” [Domain]|[Page/Context]|ComponentName|[Type] Part surrounded by “[]” are optional. @whereischarly Context/Page: “what is the parent component?” “Which product subpart/page does this component belong to?” 5.4

Slide 24

Slide 24

React app easy to navigate 🧭 Maintainable React Domain: “Which product owns this component?” [Domain]|[Page/Context]|ComponentName|[Type] Part surrounded by “[]” are optional. Context/Page: “what is the parent component?” “Which product subpart/page does this component belong to?” Component’s name: “What does this component do?” @whereischarly 5.4

Slide 25

Slide 25

React app easy to navigate 🧭 Maintainable React Domain: “Which product owns this component?” [Domain]|[Page/Context]|ComponentName|[Type] Part surrounded by “[]” are optional. Context/Page: “what is the parent component?” “Which product subpart/page does this component belong to?” Component’s name: “What does this component do?” Type: Form (Input, …), View, Button When missing, we assume that a component is a View component by default. @whereischarly 5.4

Slide 26

Slide 26

React app easy to navigate @whereischarly 🧭 Maintainable React 5.5

Slide 27

Slide 27

React app easy to navigate 🧭 Maintainable React File-based Folders-based ACommunityAddToShortListButton.tsx ACommunity/AddToShortList/Button/index.tsx Sidebar.tsx Sidebar/index.tsx SidebarSwitch.tsx Sidebar/Switch/index.tsx @whereischarly 5.6

Slide 28

Slide 28

React app easy to navigate 🧭 @whereischarly 🧭 Maintainable React Good naming convention will force you to divide your app in meaningful pieces 5.7

Slide 29

Slide 29

Maintainable React Make your React app easy to change @whereischarly 🔧 6.1

Slide 30

Slide 30

React app easy to change 🔧 Maintainable React Reference version https://codesandbox.io/s/maintainable-react-geekle-april-2020-94pq1 Refactored version https://codesandbox.io/s/maintainable-react-geekle-april-2020-dkx1h @whereischarly 6.2

Slide 31

Slide 31

React app easy to change @whereischarly 🔧 Maintainable React 6.3

Slide 32

Slide 32

React app easy to change 🔧 @whereischarly 🔧 Maintainable React Hooks doesn’t means that container/view pattern is dead 6.3

Slide 33

Slide 33

React app easy to change 🔧 Hooks doesn’t means that container/view pattern is dead 🔧 @whereischarly 🔧 Maintainable React “A good line of debt is easy to remove” 6.3

Slide 34

Slide 34

Maintainable React Make your React app easy to test @whereischarly 📏 7.1

Slide 35

Slide 35

React app easy to test 📏 Maintainable React Tests makes refactoring easier @whereischarly 7.2

Slide 36

Slide 36

React app easy to test 📏 Maintainable React Tests makes refactoring easier 1. Choose a testing strategy 2. Make your components testable @whereischarly 7.2

Slide 37

Slide 37

React app easy to test 📏 Maintainable React Choose a testing strategy @whereischarly 7.3

Slide 38

Slide 38

React app easy to test 📏 Maintainable React Choose a testing strategy Cypress @whereischarly End-to-end tests: whole application 7.3

Slide 39

Slide 39

React app easy to test 📏 Maintainable React Choose a testing strategy Cypress Enzyme @whereischarly End-to-end tests: whole application Integration tests: components interactions 7.3

Slide 40

Slide 40

React app easy to test 📏 Maintainable React Choose a testing strategy Cypress Enzyme End-to-end tests: whole application Integration tests: components interactions Unit tests: component @whereischarly 7.3

Slide 41

Slide 41

React app easy to test 📏 Maintainable React Choose a testing strategy Cypress Enzyme End-to-end tests: whole application Integration tests: components interactions Unit tests: component Jest @whereischarly Unit tests: Business logic 7.3

Slide 42

Slide 42

React app easy to test 📏 Maintainable React A good testing strategy @whereischarly 7.4

Slide 43

Slide 43

React app easy to test 📏 Maintainable React A good testing strategy 1. Test @whereischarly critical business logic 7.4

Slide 44

Slide 44

React app easy to test 📏 Maintainable React A good testing strategy @whereischarly

  1. Test critical business logic
  2. Add test when fixing regression 7.4

Slide 45

Slide 45

React app easy to test 📏 Maintainable React A good testing strategy @whereischarly

  1. Test critical business logic
  2. Add test when fixing regression
  3. E2E tests for critical paths 7.4

Slide 46

Slide 46

React app easy to test 📏 Maintainable React Make your components testable An example https://codesandbox.io/s/maintainable-react-geekle-april-2020-tests-xw27n @whereischarly 7.5

Slide 47

Slide 47

React app easy to test 📏 Maintainable React Make your components testable @whereischarly 7.6

Slide 48

Slide 48

React app easy to test 📏 Maintainable React Make your components testable Extract business logic and helpers @whereischarly 7.6

Slide 49

Slide 49

React app easy to test 📏 Maintainable React Make your components testable Extract business logic and helpers Complex view complex should get data from props @whereischarly 7.6

Slide 50

Slide 50

React app easy to test @whereischarly 📏 Maintainable React 7.7

Slide 51

Slide 51

React app easy to test 📏 @whereischarly 📏 Maintainable React Make your important logic accessible 7.7

Slide 52

Slide 52

React app easy to test 📏 📏 @whereischarly 📏 Maintainable React Make your important logic accessible Test the critical part of your apps will facilitate refactoring 7.7

Slide 53

Slide 53

Maintainable React Keep your React app stable @whereischarly 🏗 8.1

Slide 54

Slide 54

Keep your React app stable 🏗 Maintainable React Make your React app stable on 3 levels: @whereischarly 8.2

Slide 55

Slide 55

Keep your React app stable 🏗 Maintainable React Make your React app stable on 3 levels: on the code level: by leveraging TypeScript @whereischarly 8.2

Slide 56

Slide 56

Keep your React app stable 🏗 Maintainable React Make your React app stable on 3 levels: on the code level: by leveraging TypeScript on the tools level: by leveraging automation @whereischarly 8.2

Slide 57

Slide 57

Keep your React app stable 🏗 Maintainable React Make your React app stable on 3 levels: on the code level: by leveraging TypeScript on the tools level: by leveraging automation on human level: proper reviews @whereischarly 8.2

Slide 58

Slide 58

Keep your React app stable 🏗 Maintainable React By using TypeScript at its full power Using types partially actually brings noise and false confidence Use TypeScript strict mode OR @whereischarly 8.3

Slide 59

Slide 59

Keep your React app stable 🏗 Maintainable React By using TypeScript at its full power Using types partially actually brings noise and false confidence Use TypeScript strict mode OR Type your data and let the inference do the magic @whereischarly 8.3

Slide 60

Slide 60

Keep your React app stable 🏗 Maintainable React By using TypeScript at its full power Using types partially actually brings noise and false confidence Use TypeScript strict mode OR Type your data and let the inference do the magic @whereischarly 8.3

Slide 61

Slide 61

Keep your React app stable 🏗 Maintainable React By using tools to stay up-to-date “An Empirical Model of Technical Debt and Interest”, SIG @whereischarly 8.4

Slide 62

Slide 62

Keep your React app stable 🏗 Maintainable React By using tools to stay up-to-date Dependabot 🤖 Renovate your code Update, break things often and move fast @whereischarly 8.5

Slide 63

Slide 63

Keep your React app stable 🏗 Maintainable React By properly reviewing your contributions @whereischarly 8.6

Slide 64

Slide 64

Keep your React app stable 🏗 Maintainable React By properly reviewing your contributions @whereischarly 8.7

Slide 65

Slide 65

Keep your React app stable 🏗 Maintainable React By properly reviewing your contributions Review at most 500 LOC at a time, otherwise review fatigue can kick in. @whereischarly 8.7

Slide 66

Slide 66

Keep your React app stable 🏗 Maintainable React By properly reviewing your contributions Review at most 500 LOC at a time, otherwise review fatigue can kick in. Well defined components means smaller changes @whereischarly 8.7

Slide 67

Slide 67

Keep your React app stable 🏗 Maintainable React By properly reviewing your contributions Review at most 500 LOC at a time, otherwise review fatigue can kick in. Well defined components means smaller changes Refactors should be done in dedicated branches @whereischarly 8.7

Slide 68

Slide 68

Conclusion @whereischarly Maintainable React 9

Slide 69

Slide 69

Conclusion Maintainable React 🧭 Naming is a good exercice to help divide your app in meaningful components @whereischarly 9

Slide 70

Slide 70

Conclusion Maintainable React 🧭 Naming is a good exercice to help divide your app in meaningful components 🔧 Hooks doesn’t mean “fat components”, factorise your components wisely 📏 Make your component testable and choose a test strategy to enhance refactorings @whereischarly 9

Slide 71

Slide 71

Conclusion Maintainable React 🧭 Naming is a good exercice to help divide your app in meaningful components 🔧 Hooks doesn’t mean “fat components”, factorise your components wisely 📏 Make your component testable and choose a test strategy to enhance refactorings 🏗 Keep your app stable by stay up-to-date and leveraging types and good team-work @whereischarly 9

Slide 72

Slide 72

Side-note @whereischarly Maintainable React 10 . 1

Slide 73

Slide 73

Side-note Maintainable React No silver bullet, no perfect solution @whereischarly 10 . 1

Slide 74

Slide 74

Side-note Maintainable React No silver bullet, no perfect solution @whereischarly 10 . 1

Slide 75

Slide 75

Side-note Maintainable React The best solution fits your business needs @whereischarly 10 . 2

Slide 76

Slide 76

Side-note Maintainable React The best solution fits your business needs @whereischarly 10 . 2

Slide 77

Slide 77

Side-note Maintainable React The best solution fits your business needs @whereischarly 10 . 2

Slide 78

Slide 78

Thank you! slides on noti.st/charlypoly withdouble.com @whereischarly @wittydeveloper 11