Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Unify The UI With React
Dan Cork
April 28, 2016
Technology
0
190
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
31
Talking Tech Jan 2016
dancork
0
47
Give CSS3 Some Love / FOWD2015
dancork
0
240
Git For Humans - Holiday Extras - 14/08/2015
dancork
0
230
Other Decks in Technology
See All in Technology
eBPF-based Container Networking
johnlin
2
1.1k
DevRel組織についての考察
taijihagino
PRO
0
120
A3-1 IBM Championが本音で語る「IBM Cloud」
kolinz
0
310
CloudWatchアラームによるサービス継続のための監視入門 / Introduction to Monitoring for Service Continuity with CloudWatch Alarms
inomasosan
1
420
Istioを活用したセキュアなマイクロサービスの実現/Secure Microservices with Istio
ido_kara_deru
3
420
金融スタートアップの上場準備で大事にしたマインドセット / 2022-08-04-the-mindset-in-preparing-for-ipo
stajima
0
320
テクニカルライティングの検定を受けてみた話 / "My Story About Taking the Technical Writing Exam
line_developers
PRO
1
210
Djangoで組織とユーザーの権限管理をやってみよう #devio2022
seiichi1101
0
390
増田亨さんによる 「設計の考え方とやり方」勉強会オープニング
tsuyok
0
210
2022 COSCUP - GKE Backend Cluster 除雷分享
brentchang
0
120
ECS on EC2 で Auto Scaling やってみる!
sayjoy
1
220
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
9
1.9k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
A Tale of Four Properties
chriscoyier
149
21k
It's Worth the Effort
3n
172
26k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Design by the Numbers
sachag
271
17k
How to Ace a Technical Interview
jacobian
266
21k
The Power of CSS Pseudo Elements
geoffreycrofte
47
4k
Typedesign – Prime Four
hannesfritz
34
1.4k
Building Adaptive Systems
keathley
25
1.2k
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