Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Unify The UI With React
Search
Dan Cork
April 28, 2016
Technology
0
230
Unify The UI With React
Dan Cork
April 28, 2016
Tweet
Share
More Decks by Dan Cork
See All by Dan Cork
Paradox of Choice
dancork
0
37
Talking Tech Jan 2016
dancork
0
58
Give CSS3 Some Love / FOWD2015
dancork
0
270
Git For Humans - Holiday Extras - 14/08/2015
dancork
0
250
Other Decks in Technology
See All in Technology
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
360
Language Update: Java
skrb
2
290
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
140
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
150
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
350
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
240
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
It's Worth the Effort
3n
187
28k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Invisible Side of Design
smashingmag
301
51k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
Unify the UI with React @dancork
Dan Cork UI Engineer & Evangelist @dancork
Holiday Extras
Beginnings
max. 4095 selectors
None
cssstats.com
68 unique colors
86 unique background colors
None
None
16 Unique Font Families
min-width: 768px and min-width: 1200px
min-width: 768px and min-width: 992px
min-width: 768px and min-width: 768px
Why not Bootstrap?
Don't want to look the same
source: louderthanten.com/coax/design-machines
Configurable but can cause bloat
Grids are old news
source: www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap
flex box, grids & shapes
Requires app developers to remember classes
<button class="btn btn-primary btn-lg btn-block”> Click Me </button>
Often doesn’t fit our design systems
Not just CSS
Interactions
Events
Tracking
Why use React?
Declarative
<div> <span> </span> </div>
<Biography> <Name> </Name> </Biography>
Application Styling
Styling Interaction Events
#perfmatters
client side rendering is notoriously bad.
Render
Render Re-render
Render
Render Virtual DOM
Render Virtual DOM
Render Virtual DOM
Building A Library
atomicdesign.bradfrost.com
None
stateless functional components
function Button() { return <button /> }
function Button() { return <button /> }
MARKUP IN JAVASCRIPT?!?!
JSX XML in JavaScript
<button />
React.createElement(“button”)
React.DOM.button()
function Button() { return React.DOM.button() }
function Button() { return <button /> }
creating react classes
<button class=“rounded”>… <button class=“horrible”>… <button class=“aaargh”>… <button class=“checkout”>… <button class=“order”>…
<Button>Close</Button> <Button>Submit</Button> <Button>What Is This?</… <Button>Checkout Now</… <Button>Order Now</Button>
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
> document.getElementById('id').class < undefined > document.getElementById('id').className < “my-class"
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
React.PropTypes Baked In Validation Throws errors when used incorrectly
React.PropTypes Uses JavaScript data types eg. string, number, object, array,
bool
React.PropTypes Acts as documentation
React.PropTypes JSX syntax similar to HTML attributes
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:
function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
<Button>Close</Button> <Button>Submit</Button> <Button>What Is This?</… <Button>Checkout Now</… <Button>Order Now</Button>
JedWatson/classnames
<Button large>Submit</Button> <Button danger>Submit</Button>
<Button large={true}>Submit</Button> <Button danger={true}>Submit</Button>
propTypes: { // sizes small: React.PropTypes.bool, large: React.PropTypes.bool, // colors
primary: React.PropTypes.bool, danger: React.PropTypes.bool }
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 });
<Button large danger>Submit</Button> “btn btn-large btn-danger"
Styling
global scope
inline styles
INLINE STYLES ARE SUPER BAD!!!!!111
Unmaintainable codebase
Styling with components Unmaintainable codebase
Updating styling throughout DOM is tough
React handles DOM manipulation efficiently Updating styling throughout DOM is
tough
var anchorCSS = { color: ‘#333’, textDecoration: ‘none’ } <a
style={anchorCSS} ></a>
JavaScript can’t do everything CSS Can
Not future proof
modular css
None
import styles from ‘./components/button.css’ <Button className={styles.base}>Hi</Button>
“components_button__base__37495f”
.base { /* default styling */ } .error { composes:
base; /* extra styling for error */ }
import styles from ‘./components/input.css’ <input className={styles.error} />
“components_input__base__37495f components_input__error__a8g3kd”
css-modules/css-modules
glenmaddern.com
Consistent First
Maintainable
Extensible
holidayextras/react-ui-workshop Give it a go…
facebookincubator/create-react-app Create React App
Thank You Twitter: @dancork Slides: speakerdeck.com/dancork