Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Unify the UI with React @dancork
Slide 2
Slide 2 text
Dan Cork UI Engineer & Evangelist @dancork
Slide 3
Slide 3 text
Holiday Extras
Slide 4
Slide 4 text
Beginnings
Slide 5
Slide 5 text
max. 4095 selectors
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
cssstats.com
Slide 8
Slide 8 text
68 unique colors
Slide 9
Slide 9 text
86 unique background colors
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
16 Unique Font Families
Slide 13
Slide 13 text
min-width: 768px and min-width: 1200px
Slide 14
Slide 14 text
min-width: 768px and min-width: 992px
Slide 15
Slide 15 text
min-width: 768px and min-width: 768px
Slide 16
Slide 16 text
Why not Bootstrap?
Slide 17
Slide 17 text
Don't want to look the same
Slide 18
Slide 18 text
source: louderthanten.com/coax/design-machines
Slide 19
Slide 19 text
Configurable but can cause bloat
Slide 20
Slide 20 text
Grids are old news
Slide 21
Slide 21 text
source: www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap
Slide 22
Slide 22 text
flex box, grids & shapes
Slide 23
Slide 23 text
Requires app developers to remember classes
Slide 24
Slide 24 text
Slide 25
Slide 25 text
Often doesn’t fit our design systems
Slide 26
Slide 26 text
Not just CSS
Slide 27
Slide 27 text
Interactions
Slide 28
Slide 28 text
Events
Slide 29
Slide 29 text
Tracking
Slide 30
Slide 30 text
Why use React?
Slide 31
Slide 31 text
Declarative
Slide 32
Slide 32 text
Slide 33
Slide 33 text
Slide 34
Slide 34 text
Application Styling
Slide 35
Slide 35 text
Styling Interaction Events
Slide 36
Slide 36 text
#perfmatters
Slide 37
Slide 37 text
client side rendering is notoriously bad.
Slide 38
Slide 38 text
Render
Slide 39
Slide 39 text
Render Re-render
Slide 40
Slide 40 text
Render
Slide 41
Slide 41 text
Render Virtual DOM
Slide 42
Slide 42 text
Render Virtual DOM
Slide 43
Slide 43 text
Render Virtual DOM
Slide 44
Slide 44 text
Building A Library
Slide 45
Slide 45 text
atomicdesign.bradfrost.com
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
stateless functional components
Slide 48
Slide 48 text
function Button() { return }
Slide 49
Slide 49 text
function Button() { return }
Slide 50
Slide 50 text
MARKUP IN JAVASCRIPT?!?!
Slide 51
Slide 51 text
JSX XML in JavaScript
Slide 52
Slide 52 text
Slide 53
Slide 53 text
React.createElement(“button”)
Slide 54
Slide 54 text
React.DOM.button()
Slide 55
Slide 55 text
function Button() { return React.DOM.button() }
Slide 56
Slide 56 text
function Button() { return }
Slide 57
Slide 57 text
creating react classes
Slide 58
Slide 58 text
… … … … …
Slide 59
Slide 59 text
Close Submit What Is This?Checkout NowOrder Now
Slide 60
Slide 60 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 61
Slide 61 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 62
Slide 62 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 63
Slide 63 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 64
Slide 64 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 65
Slide 65 text
> document.getElementById('id').class < undefined > document.getElementById('id').className < “my-class"
Slide 66
Slide 66 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 67
Slide 67 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 68
Slide 68 text
React.PropTypes Baked In Validation Throws errors when used incorrectly
Slide 69
Slide 69 text
React.PropTypes Uses JavaScript data types eg. string, number, object, array, bool
Slide 70
Slide 70 text
React.PropTypes Acts as documentation
Slide 71
Slide 71 text
React.PropTypes JSX syntax similar to HTML attributes
Slide 72
Slide 72 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 73
Slide 73 text
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render: function() { return ( {this.props.children} ) } })
Slide 74
Slide 74 text
Close Submit What Is This?Checkout NowOrder Now
Slide 75
Slide 75 text
JedWatson/classnames
Slide 76
Slide 76 text
Submit Submit
Slide 77
Slide 77 text
Submit Submit
Slide 78
Slide 78 text
propTypes: { // sizes small: React.PropTypes.bool, large: React.PropTypes.bool, // colors primary: React.PropTypes.bool, danger: React.PropTypes.bool }
Slide 79
Slide 79 text
import classNames from ‘class-names’ classNames({ ‘btn’: true, ‘btn-small’: this.props.small, ‘btn-large’: this.props.large, ‘btn-primary’: this.props.primary, ‘btn-danger’: this.props.danger });
Slide 80
Slide 80 text
Submit “btn btn-large btn-danger"
Slide 81
Slide 81 text
Styling
Slide 82
Slide 82 text
global scope
Slide 83
Slide 83 text
inline styles
Slide 84
Slide 84 text
INLINE STYLES ARE SUPER BAD!!!!!111
Slide 85
Slide 85 text
Unmaintainable codebase
Slide 86
Slide 86 text
Styling with components Unmaintainable codebase
Slide 87
Slide 87 text
Updating styling throughout DOM is tough
Slide 88
Slide 88 text
React handles DOM manipulation efficiently Updating styling throughout DOM is tough
Slide 89
Slide 89 text
var anchorCSS = { color: ‘#333’, textDecoration: ‘none’ }
Slide 90
Slide 90 text
JavaScript can’t do everything CSS Can
Slide 91
Slide 91 text
Not future proof
Slide 92
Slide 92 text
modular css
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
import styles from ‘./components/button.css’ Hi
Slide 95
Slide 95 text
“components_button__base__37495f”
Slide 96
Slide 96 text
.base { /* default styling */ } .error { composes: base; /* extra styling for error */ }
Slide 97
Slide 97 text
import styles from ‘./components/input.css’
Slide 98
Slide 98 text
“components_input__base__37495f components_input__error__a8g3kd”
Slide 99
Slide 99 text
css-modules/css-modules
Slide 100
Slide 100 text
glenmaddern.com
Slide 101
Slide 101 text
Consistent First
Slide 102
Slide 102 text
Maintainable
Slide 103
Slide 103 text
Extensible
Slide 104
Slide 104 text
holidayextras/react-ui-workshop Give it a go…
Slide 105
Slide 105 text
facebookincubator/create-react-app Create React App
Slide 106
Slide 106 text
Thank You Twitter: @dancork Slides: speakerdeck.com/dancork