Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

DAN ABRAMOV Term coined by

Slide 3

Slide 3 text

CONTAINER & PRESENTATIONAL Later called them components

Slide 4

Slide 4 text

C IN MVC = SMART V IN MVC = DUMB Others have compared them to

Slide 5

Slide 5 text

How things work No DOM markup, no styles Provide data Call actions How things look No app dependencies Just props, for data and callbacks Rarely have own state, only UI state

Slide 6

Slide 6 text

Separation of concern Easier to reason about Localize complexity Lots simple components UI bits more reusable BENEFITS

Slide 7

Slide 7 text

* (UI noun) MemberTableHeader SearchInput FieldErrors OrgInvitesPendingContainer OrgPageContainer ReportsUsersContainer *Container NAMING

Slide 8

Slide 8 text

App needs to be smart Have data Respond to interaction Mostly dumb Lots of UI WHERE TO SPLIT?

Slide 9

Slide 9 text

Simplest One transition into dumb components 1-1 SPLIT

Slide 10

Slide 10 text

“Deep” 1 component, many props eg, OrgLayoutContainer -> OrgLayout 1-1 SPLIT

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Make the transition faster Scattered props Access to Container references 1-* SPLIT

Slide 16

Slide 16 text

“Broad” eg, ReportsUsersContainer -> * 1-* SPLIT

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

"When you notice that some components don’t use the props they receive but merely forward them down and you have to rewire all those intermediate components any time the children need more data, it’s a good time to introduce some container components.” @dan_abramov MOAR BROAD?

Slide 20

Slide 20 text

CONTAINMENT props.children props.other React.PropTypes.node Name *Layout

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text


Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text


Slide 28

Slide 28 text

ALL PROPS True wrapper Passthrough, provides additional functionality eg, OverallTrendWidgetContainer -> OverallTrendWidget

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

WHOLE REDUCER Lazy? Couples view to reducer format in more places eg, OverallTrendWidgetContainer -> OverallTrendWidget

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

NEW PRIMITIVES Explicit Traceable Decoupled

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

DISTINGUISHING Rule of thumb: @styleable(css) @connect([selector]) class OneReactComponent extends AntiPattern

Slide 36

Slide 36 text

DOGMA It’s an art Pirates’ Code Think

Slide 37

Slide 37 text