Slide 1
Slide 1 text
st
yle
d
component
s
THE ROAD TO
AND THE ROAD AHEAD
Slide 2
Slide 2 text
"
Slide 3
Slide 3 text
@glenmaddern
# Melbourne
Slide 4
Slide 4 text
FRONT END
C E N T E R
https://frontend.center
Slide 5
Slide 5 text
@glenmaddern
https:/
/github.com/css-modules/css-modules https://styled-components.com https://github.com/geelen/react-snapshot
react
snapshot
Slide 6
Slide 6 text
@glenmaddern
Slide 7
Slide 7 text
@glenmaddern
✨
Slide 8
Slide 8 text
@glenmaddern
CSS-IN-JS
Slide 9
Slide 9 text
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
Slide 10
Slide 10 text
• Scoped styles
• Critical CSS
• Smarter optimisations
• Package management
• Non-browser styling
BENEFITS OF CSS-IN-JS
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 @markdalgleish
Slide 11
Slide 11 text
@glenmaddern
THE ROAD TO
STYLED COMPONENTS
Slide 12
Slide 12 text
@glenmaddern
WHY BUILD A CSS-IN-JS LIBRARY
WHAT DO YOU PUT IN IT
&
Slide 13
Slide 13 text
@glenmaddern
DESIGN GOAL #1
CODIFY BEST PRACTICES
Slide 14
Slide 14 text
@glenmaddern
IDEA
TECHNIQUE ✏
TECHNOLOGY
Slide 15
Slide 15 text
https://speakerdeck.com/didoo/let-there-be-peace-on-css @areaweb
Separation of Concerns Separation of Concerns
(only, from a different point of view)
JS
CSS
HTML
BUTTON
DATE PICKER
MODAL
LIST
LIST-ITEM
MEDIA
Slide 16
Slide 16 text
@glenmaddern
components/
submit-button/
submit-button.js
submit-button.scss
nav-bar/
nav-bar.js
nav-bar.scss
nav-icon.svg
signup-form/
signup-form.js
signup-form.scss
form-backdrop.jpg
Slide 17
Slide 17 text
@glenmaddern
Slide 18
Slide 18 text
@glenmaddern
/* styles.css */
.Headline {
padding: 4em;
background: papayawhip;
}
.Headline_Text {
font-size: 1.5em;
text-align: center;
color: palevioletred;
}
My Page Title
/* src/components/Headline.css */ .Headline { padding: 4em; background: papayawhip; } .Headline_Text { font-size: 1.5em; text-align: center; color: palevioletred; } /* src/components/Headline.js */ import './Headline.css' export default ({ text }) => ({ text }
) REACT & WEBPACKSlide 19
Slide 19 text
@glenmaddern
Slide 20
Slide 20 text
@glenmaddern
/* src/components/Headline.css */
.Headline {
padding: 4em;
background: papayawhip;
}
.Headline_Text {
font-size: 1.5em;
text-align: center;
color: palevioletred;
}
/* src/components/Headline.js */
import './Headline.css'
export default ({ text }) => (
{ text }
) /* src/components/Headline.js */ import styles from './Headline.css' export default ({ text }) => ({ text }
) /* src/components/Headline.module.css */ .wrapper { padding: 4em; background: papayawhip; } .text { font-size: 1.5em; text-align: center; color: palevioletred; } CSS MODULESSlide 21
Slide 21 text
@glenmaddern
https:/
/styled-components.com/ https:/
/styled-components.com/docs
Slide 22
Slide 22 text
@glenmaddern
/* src/components/Headline.js */
import styled from 'styled-components'
const Wrapper = styled.header`
padding: 4em;
background: papayawhip;
`;
const Text = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
export default ({ text }) => (
{ text }
)
/* src/components/Headline.js */
import styles from './Headline.css'
export default ({ text }) => (
{ text }
) /* src/components/Headline.module.css */ .wrapper { padding: 4em; background: papayawhip; } .text { font-size: 1.5em; text-align: center; color: palevioletred; } STYLED COMPONENTSSlide 23
Slide 23 text
@glenmaddern
DESIGN GOAL #1
CODIFY BEST PRACTICES
• Component encapsulation
• Semantic naming
• Style co-location
Slide 24
Slide 24 text
@glenmaddern
DESIGN GOALS #2
BRING PEOPLE ALONG
Slide 25
Slide 25 text
@glenmaddern
/* EqualDivider.scss */
.EqualDivider {
display: flex;
margin: 0.5rem;
padding: 1rem;
background: papayawhip;
> * {
flex: 1;
&:not(:first-child) {
margin-left: 1rem;
}
}
}
.Box {
padding: 0.25rem 0.5rem;
background: palevioletred;
}
/* EqualDivider.sass */
.EqualDivider
display: flex
margin: 0.5rem
padding: 1rem
background: papayawhip
> *
flex: 1
&:not(:first-child)
margin-left: 1rem
.Box
padding: 0.25rem 0.5rem
background: palevioletred
Slide 26
Slide 26 text
@glenmaddern
/* EqualDivider.css.js */
const equalDivider = {
display: 'flex',
margin: '0.5rem',
padding: '1rem',
background: 'papayawhip',
'> *': {
flex: 1,
'&:not(:first-child)': {
marginLeft: '1rem'
}
}
}
const box = {
padding: '0.25rem 0.5rem',
background: 'palevioletred'
}
/* EqualDivider.js */
const EqualDivider = styled.div`
display: flex;
margin: 0.5rem;
padding: 1rem;
background: papayawhip;
> * {
flex: 1;
&:not(:first-child) {
margin-left: 1rem;
}
}
`
const Box = styled.div`
padding: 0.25rem 0.5rem;
background: palevioletred;
`
Slide 27
Slide 27 text
@glenmaddern
DESIGN GOALS #2
BRING PEOPLE ALONG
INCREASE THE NUMBER OF PEOPLE
WHO CAN GET VALUE FROM YOUR IDEA
STRAIGHT AWAY
Slide 28
Slide 28 text
@glenmaddern
DESIGN GOALS #3
FOLLOW THE PATH OF LEAST
RESISTANCE
Slide 29
Slide 29 text
@glenmaddern
Option A
Option B
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
background: palevioletred;
color: white;
${props => props.primary && css`
background: white;
color: palevioletred;
`}
`
Option A
Option B
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
background: palevioletred;
color: white;
&.primary {
background: white;
color: palevioletred;
}
`
Slide 30
Slide 30 text
@glenmaddern
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
background: palevioletred;
color: white;
${props => props.primary && css`
background: white;
color: palevioletred;
`}
`
Option A
Option B
const vars = {
primary: 'palevioletred',
secondary: 'white'
}
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
background: ${ vars.primary };
color: ${ vars.secondary };
${props => props.primary && css`
background: ${ vars.secondary };
color: ${ vars.primary };
`}
`
Slide 31
Slide 31 text
REACT NATIVE
Slide 32
Slide 32 text
@glenmaddern
import styled from 'styled-components/native'
const Wrapper = styled.View`
background-color: papayawhip;
flex: 1;
justify-content: center;
align-items: center;
`
const Title = styled.Text`
font-size: 20px;
text-align: center;
margin: 10px;
color: palevioletred;
font-weight: bold;
`
Slide 33
Slide 33 text
@glenmaddern
class StyledComponentsNative extends React.Component {
render() {
return (
Hello World, this is my first native styled component!
)
}
}
Slide 34
Slide 34 text
https://microsoft.github.io/reactxp/
Slide 35
Slide 35 text
https://github.com/airbnb/react-sketchapp @jongold
Slide 36
Slide 36 text
@glenmaddern
DESIGN GOALS #3
FOLLOW THE PLATFORM
Slide 37
Slide 37 text
@glenmaddern
DESIGN GOAL #4
ZERO CONFIGURATION
Slide 38
Slide 38 text
@glenmaddern
Slide 39
Slide 39 text
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
Slide 40
Slide 40 text
@glenmaddern
STYLED COMPONENTS
• 100% JavaScript
• No Webpack/Babel changes needed
• babel-plugin-styled-components
• Improves dev tooling
• Makes server-rendering deterministic
• Better performance (v3 onwards)
Slide 41
Slide 41 text
@glenmaddern
✅ CODIFY BEST PRACTICES
✅ BRING PEOPLE ALONG
✅ FOLLOW THE PLATFORM
✅ ZERO CONFIGURATION
Slide 42
Slide 42 text
STYLED COMPONENTS
• CSS-in-JS for React (and Preact)
• ~400K downloads/month
• ~10K stars on GitHub
• 142 contributors but core team:
@_philpl @mxstbr @glenmaddern
Slide 43
Slide 43 text
@glenmaddern
DESIGN GOALS #5
DON'T MAKE THINGS WORSE
Slide 44
Slide 44 text
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
@addyosmani
Parse times for 1MB JavaScript file
Slide 45
Slide 45 text
@glenmaddern
BET ON JS IF YOU LIKE, BUT
ALWAYS SERVE HTML
Slide 46
Slide 46 text
pithy.af · Kurt Vonnegut Jr. · Slaughterhouse-Five (1969)
About
Submit a quote
CONTENT
BROWSER METADATA
RESOURCE REFERENCES
SHARING METADATA
About
Submit a quote
And I asked myself about the present: how wide
it was, how deep it was, how much was mine to keep.
Kurt Vonnegut Jr.
Slaughterhouse-Five (1969)
Slide 47
Slide 47 text
@glenmaddern
https://github.com/gatsbyjs/gatsby https://learnnextjs.com https://github.com/geelen/react-snapshot
react
snapshot
Slide 48
Slide 48 text
@glenmaddern
User
Local machine
SNAPSHOT RENDERING
File Storage
GET index.html
*renders React code*
GET bundle.js, logo.svg, etc.
*boots up App*
*renders static page*
PUT index.html
GET index.html
BUILD & DEPLOY
PRODUCTION
Slide 49
Slide 49 text
@glenmaddern
DESIGN GOALS #5
NO DOWNSIDES
Slide 50
Slide 50 text
@glenmaddern
THE ROAD
AHEAD
Slide 51
Slide 51 text
@glenmaddern
WEB PAGE WEB APP
Slide 52
Slide 52 text
@glenmaddern
WEB PAGE WEB APP
• Static HTML & CSS
• Unobtrusive or no JavaScript
• Meta tags designed for SEO
and social sharing
• Simple build step if any
• Performance-sensitive
• Fully client-rendered
• Built using a JS framework
• No extraneous metadata
• Complex, all-inclusive build &
optimisation process
• Development-speed-
sensitive
VS
Sharing assets/knowledge difficult or impossible
Slide 53
Slide 53 text
WEB PAGE WEB APP
• Built with the same JS framework
• Interactive components built the same
way as static ones
• Shared build process & optimisations
• Real HTML & CSS served to all users
• Components, assets, knowledge &
workflow now shareable
&
Slide 54
Slide 54 text
@glenmaddern
UNIFICATION OF SKILLS
&
UNIFICATION OF PLATFORM
Slide 55
Slide 55 text
@glenmaddern
THE ROAD AHEAD:
A UNIFIED UI LANGUAGE
• It codifies best practices
• It brings people along
• It's expressive & powerful
• It's universally usable
Slide 56
Slide 56 text
t
hank you!
@glenmaddern
https://frontend.center