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
57
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
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.2k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
1
250
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
410
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
13k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
320
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
360
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
ビギナーであり続ける/beginning
ikuodanaka
3
690
Operating Operator
shhnjk
0
430
PO初心者が考えた ”POらしさ”
nb_rady
0
190
一体いつからSRE NEXTがSREだけのカンファレンスだと錯覚していた? / When did you ever get the idea that SRE NEXT was a conference just for SREs?
vtryo
1
140
AI導入の理想と現実~コストと浸透〜
oprstchn
0
180
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Producing Creativity
orderedlist
PRO
346
40k
The Invisible Side of Design
smashingmag
301
51k
Fireside Chat
paigeccino
37
3.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cult of Friendly URLs
andyhume
79
6.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
How STYLIGHT went responsive
nonsquared
100
5.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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