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
210
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
34
Talking Tech Jan 2016
dancork
0
54
Give CSS3 Some Love / FOWD2015
dancork
0
250
Git For Humans - Holiday Extras - 14/08/2015
dancork
0
240
Other Decks in Technology
See All in Technology
AWS CLIの起動が重くてつらいので aws-sdk-client-go を書いた / kamakura.go#6
fujiwara3
5
2.5k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
1.7k
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
2
150
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
380
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
Google Cloud Next '24 Recap in ZOZO AIにより変わる開発 運用/Development and operation changed by AI
gachimuchiengineer
0
190
OPENLOGI Company Profile
hr01
0
45k
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
8
8.2k
【TSkaigi】2024/05/11 当日スライド
kimitashoichi
14
3.9k
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
1.2k
From here to resilience - a travel guide
ufried
1
160
NewSQL Landscape
oracle4engineer
PRO
5
3.2k
Featured
See All Featured
Statistics for Hackers
jakevdp
790
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Music & Morning Musume
bryan
41
5.6k
We Have a Design System, Now What?
morganepeng
43
6.8k
Building Adaptive Systems
keathley
32
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4.1k
Product Roadmaps are Hard
iamctodd
45
9.8k
Optimizing for Happiness
mojombo
370
69k
Building an army of robots
kneath
300
41k
Robots, Beer and Maslow
schacon
PRO
155
8k
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