Slide 1

Slide 1 text

Components done right™ Best practices for components and component-based architectures Javi Velasco Robin Frischmann

Slide 2

Slide 2 text

Javi Velasco @javivelasco @javivelasco Barcelona, Spain ZEIT ▲

Slide 3

Slide 3 text

react-toolbox/react-toolbox

Slide 4

Slide 4 text

Robin Frischmann @rofrischmann @rofrischmann Karlsruhe, Germany dm-drogerie markt

Slide 5

Slide 5 text

rofrischmann/fela

Slide 6

Slide 6 text

Disclaimer !

Slide 7

Slide 7 text

Info i

Slide 8

Slide 8 text

? What is a component?

Slide 9

Slide 9 text

- React documentation,  Components and Props “Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.“ Source: https://reactjs.org/docs/components-and-props.html

Slide 10

Slide 10 text

The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed Trending Books

Slide 11

Slide 11 text

The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed BookList Trending Books

Slide 12

Slide 12 text

The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed BookList Trending Books BookListItem

Slide 13

Slide 13 text

The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed BookList Trending Books BookListItem Rating

Slide 14

Slide 14 text

The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed BookList Trending Books BookListItem Rating

Slide 15

Slide 15 text

? What makes a good component?

Slide 16

Slide 16 text

1. have a single   responsibility 2. are accessible 3. are predictable 4. are customisable 5. are reusable Good components _ 0 % 23 % 45 % 68 % 90 % single  responsibility accessible predictable custom isable reusable 84 % 76 % 42 % 19 % 17 %

Slide 17

Slide 17 text

Single Responsibility #1

Slide 18

Slide 18 text

? Why is the single responsibility principle important?

Slide 19

Slide 19 text

God Components

Slide 20

Slide 20 text

Separation of Concerns

Slide 21

Slide 21 text

CSS Loading BookListItem Rating Classic definition HTML Loading BookListItem Rating JS Rating

Slide 22

Slide 22 text

Loading HTML CSS Rating HTML CSS JS Component-oriented definition BookListItem HTML CSS

Slide 23

Slide 23 text

Component-oriented definition Loading HTML CSS Rating HTML CSS JS BookListItem HTML CSS

Slide 24

Slide 24 text

Component-oriented definition Loading HTML CSS Rating HTML CSS JS BookListItem HTML CSS

Slide 25

Slide 25 text

๏ concerned with how things look ➞ markup & styling ๏ are stateless ๏ receive data via props ๏ often just render children ๏ have no dependencies Presentational Source: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 Logical ๏ concerned with how things work ➞ logic ๏ are stateful ๏ render presentational components ๏ have dependencies

Slide 26

Slide 26 text

BookList Example Code Example

Slide 27

Slide 27 text

Accessibility #2

Slide 28

Slide 28 text

? Why is Accessibility important?

Slide 29

Slide 29 text

? How do we increase Accessibility?

Slide 30

Slide 30 text

++ Readability

Slide 31

Slide 31 text

SEO

Slide 32

Slide 32 text

#3 Predictability

Slide 33

Slide 33 text

? Why is Predictability important?

Slide 34

Slide 34 text

Confidence in Correctness

Slide 35

Slide 35 text

? How do we increase Predictability?

Slide 36

Slide 36 text

UI = f(state)

Slide 37

Slide 37 text

Pure Functions ๏ given the same input, always return the same output ๏ not mutate its arguments ๏ not call non-pure functions (e.g. Date.now or Math.random) ๏ not perform side effects (e.g. API calls) A pure function should _

Slide 38

Slide 38 text

function add(a, b) { return a + b } Examples function Header(props) { return

{props.children}

}

Slide 39

Slide 39 text

const View = () => (

Some Text

) .text_success { color: green } JS(X) CSS

Slide 40

Slide 40 text

const View = state => (

Some Text

) .text_success { color: green } .text_failure { color: red } JS(X) CSS

Slide 41

Slide 41 text

const View = state => (

Some Text

) .text_success { color: green } .text_failure { color: red; font-size: 20px } JS(X) CSS

Slide 42

Slide 42 text

CSS in JS

Slide 43

Slide 43 text

Style = f(state)

Slide 44

Slide 44 text

import { createComponent } from 'react-fela' const style = state => ({ color: state.error ? 'red' : 'green' }) const View = createComponent(style) // =>

// =>

JS(X)

Slide 45

Slide 45 text

Automated Layout Tests via Snapshot Testing Code  Example

Slide 46

Slide 46 text

.a { color: green } .b { color: red }

Rendering Test Snapshot

Slide 47

Slide 47 text

#4 Customisability

Slide 48

Slide 48 text

? Why do we want to customise components?

Slide 49

Slide 49 text

BookListItem BookList Rating The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed Trending Books Stars Loading

Slide 50

Slide 50 text

? How do we customise components?

Slide 51

Slide 51 text

API === Props

Slide 52

Slide 52 text

Customisation via props Stars - (int) value - (int) size - (string) color - (boolean) showValue size = 10 size = 15 color = yellow color = green showValue = false showValue = true 4.5 of 5 stars

Slide 53

Slide 53 text

Mastering props avoid (multiple) boolean props Click me Click me Click me ???

Slide 54

Slide 54 text

Mastering props avoid spread props

Slide 55

Slide 55 text

Mastering props use PropTypes / type your props

Slide 56

Slide 56 text

Mastering props provide useful defaults

Slide 57

Slide 57 text

Mastering props KISS don’t abuse props

Slide 58

Slide 58 text

Reusability #5

Slide 59

Slide 59 text

? How do we reuse presentational components?

Slide 60

Slide 60 text

1. Customisation via props  2. Theming

Slide 61

Slide 61 text

Move your layout flow and spacings up to the parent component

Slide 62

Slide 62 text

? How do we reuse logical components?

Slide 63

Slide 63 text

Rating • calls API • handles errors • renders loading • renders HTML elements

Slide 64

Slide 64 text

Customisation Rating • calls API • handles errors • renders loading • renders HTML elements Loading

Slide 65

Slide 65 text

React Everywhere React Native, etc … Rating • calls API • handles errors • renders loading • renders native elements

Slide 66

Slide 66 text

Headless Components via render-props ๏ encapsulate logic ๏ don’t render UI ๏ are platform-agnostic ๏ call a render-function with all relevant props

Slide 67

Slide 67 text

Refactoring  Rating Live Coding Example

Slide 68

Slide 68 text

Summary ✓ Single Responsibility (Separation of Concerns, Presentational & Logical) ✓ Accessibility (Semantic Markup + Tools) ✓ Predictability (Pure Functions, CSS in JS) ✓ Customisability (Master Props) ✓ Reusability (Theming, Headless Components)