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
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
390
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
890
S3アクセス制御の設計ポイント
tommy0124
3
190
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
230
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
710
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
Language Update: Java
skrb
2
290
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
10k
Android Audio: Beyond Winning On It
atsushieno
0
100
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
130
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Code Review Best Practice
trishagee
70
19k
Become a Pro
speakerdeck
PRO
29
5.5k
For a Future-Friendly Web
brad_frost
180
9.9k
Thoughts on Productivity
jonyablonski
70
4.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Fireside Chat
paigeccino
39
3.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
A better future with KSS
kneath
239
17k
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