Adaptation and Components

Slide 1

Slide 1 text

Adaptation and Components @necolas

Slide 2

Slide 2 text

“Adaption” vs “Change”

Slide 3

Slide 3 text

“Adaptable” vs “Adaptive”

Slide 4

Slide 4 text

Adaptable systems

Slide 5

Slide 5 text

2013 App 2014 App 2012 App

Slide 6

Slide 6 text

The ability to adapt-in-time is business-critical

Slide 7

Slide 7 text

Complexity aﬀects the ability to adapt

Slide 8

Slide 8 text

Technology type as an organising principle

Slide 9

Slide 9 text

HTML A B C D ... CSS A B C D ... JS A B C D ... UNIT A B C D ... ... A B C D ...

Slide 10

Slide 10 text

HTML A B C D ... CSS A B C D ... JS A B C D ... UNIT A B C D ... ... A B C D ...

Slide 11

Slide 11 text

HTML AD B CD D ... CSS A AB C D ... JS A B C D ... UNIT A B C D ... ... A B AC D ...

Slide 12

Slide 12 text

Leaky abstractions increase complexity

Slide 13

Slide 13 text

...

Slide 14

Slide 14 text

...

Slide 15

Slide 15 text

...

Slide 16

Slide 16 text

/* avatar */ .avatar { } /* tweet */ .tweet { } .tweet .avatar { } .tweet .text {} /* user card */ .user { } .user .avatar { }

Slide 17

Slide 17 text

Modularity is not enough

Slide 18

Slide 18 text

Components as the primary unit of scale

Slide 19

Slide 19 text

A HTML CSS JS UNIT ...

Slide 20

Slide 20 text

A HTML CSS JS UNIT ... B HTML CSS JS UNIT ...

Slide 21

Slide 21 text

A HTML CSS JS UNIT ... B HTML CSS JS UNIT ... C HTML CSS JS UNIT ...

Slide 22

Slide 22 text

A HTML CSS JS UNIT ... B HTML CSS JS UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ...

Slide 23

Slide 23 text

A HTML CSS JS UNIT ... B HTML CSS JS UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ... ... HTML CSS JS UNIT ...

Slide 24

Slide 24 text

Components are simple

Slide 25

Slide 25 text

Components are composable & conﬁgurable

Slide 26

Slide 26 text

Reduces emergent complexity

Slide 27

Slide 27 text

Adaptable over reusable

Slide 28

Slide 28 text

facebook.github.io/react Deﬁning components with React

Slide 29

Slide 29 text

/** @jsx React.DOM */ var Photo = React.createClass({ render: function () { return (

); } });

Slide 30

Slide 30 text

Slide 31

Slide 31 text

{this.props.children}

Slide 32

Slide 32 text

Half-Dome in Yosemite National Park

Slide 33

Slide 33 text

suitcss.github.io Styling components with SUIT CSS

Slide 34

Slide 34 text

{this.props.children}

Slide 35

Slide 35 text

{this.props.children}

Slide 36

Slide 36 text

{this.props.children}

Slide 37

Slide 37 text

/** @define Photo */ .Photo {} /* Component */ .Photo--large {} /* Component modifier */ .Photo-crop {} /* Component descendent */ .Photo-crop--circle {} /* Descendent modifier */ .Photo-img {} .Photo-caption {}

Slide 38

Slide 38 text

{this.props.children}

Slide 39

Slide 39 text

{this.props.children}

Slide 40

Slide 40 text

github.com/component/component Managing components with Component

Slide 41

Slide 41 text

A HTML CSS JS UNIT ... B HTML CSS JS UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ... ... HTML CSS JS UNIT ...

Slide 42

Slide 42 text

A HTML CSS JS UNIT ...

Slide 43

Slide 43 text

A HTML CSS JS UNIT ... component.json

Slide 44

Slide 44 text

A HTML CSS JS UNIT ... component.json B

Slide 45

Slide 45 text

A HTML CSS JS UNIT ... component.json B C D E F

Slide 46

Slide 46 text

{ "name": "tweet", "styles": [ "tweet.css" ], "scripts": [ "tweet.js" ], "dependencies": { "suitcss/utils": "0.8.0" }, "locals": [ "avatar", "inline-tweetbox", "tweet-actions" ] }