React + X: Best practices for reusable UI components

Slide 1

Slide 1 text

1 React plus X Mars Jullian Senior UI Engineer Best practices for reusable UI components.

Slide 2

Slide 2 text

2 Hi, I’m Mars. Senior UI Engineer @ I like reusable UI components (a lot).

Slide 3

Slide 3 text

3 The challenge. • 2 products —> 3 identical dashboards. • Breaking out of the monolith —> different teams working on each dashboard —> different frameworks & build systems. • Brand & UX consistency —> Share & maintain the design & functionality across codebases easily.

Slide 4

Slide 4 text

4 The solution? Reusable UI components!

Slide 5

Slide 5 text

5 React: No templates needed.

Slide 6

Slide 6 text

6 React: build UI in terms of components

Slide 7

Slide 7 text

7 React: declarative framework

Slide 8

Slide 8 text

8 React & Us • JSX / no templates —> less ﬁles per component • State & Props —> UI components can be independent of data source but still have full control over interactions. • Easily ported into different frameworks

Slide 9

Slide 9 text

9 Reusable UI components should be… …self-sufﬁcient …easy to integrate with

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

12 Self-sufﬁciency

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

15 Ease of integration

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

21 Reusable UI components should be… …self-sufﬁcient …easy to integrate with