Tweet
Tweet

Slide 1

Slide 1 text

st yle d component s AND THE ROAD TO UNIFICATION

Slide 2

Slide 2 text

@glenmaddern

Slide 3

Slide 3 text

FRONT END C E N T E R https://frontend.center

Slide 4

Slide 4 text

@glenmaddern https:/ /github.com/css-modules/css-modules https://styled-components.com https://github.com/geelen/react-snapshot react snapshot

Slide 5

Slide 5 text

@glenmaddern

Slide 6

Slide 6 text

@glenmaddern STYLED COMPONENTS AND THE ROAD TO UNIFICATION

Slide 7

Slide 7 text

@glenmaddern CSS-IN-JS

Slide 8

Slide 8 text

https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660

Slide 9

Slide 9 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 10

Slide 10 text

https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 @markdalgleish “WE’VE ALREADY GONE THROUGH A SIMILAR CHANGE WITH HTML... WE ALMOST NEVER SHARE RAW HTML DIRECTLY— WE SHARE HTML-IN-JS.”

Slide 11

Slide 11 text

@glenmaddern EVERYTHING-IN-JS

Slide 12

Slide 12 text

@glenmaddern ✨

Slide 13

Slide 13 text

@glenmaddern UNIFICATION OF SKILLS & UNIFICATION OF PLATFORM

Slide 14

Slide 14 text

@glenmaddern UNIFICATION OF SKILLS CODIFY BEST PRACTICES

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

Slide 19

Slide 19 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 }

)

Slide 20

Slide 20 text

@glenmaddern

Slide 21

Slide 21 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; }

Slide 22

Slide 22 text

@glenmaddern https:/ /styled-components.com/docs https:/ /github.com/styled-components/styled-components

Slide 23

Slide 23 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; }

Slide 24

Slide 24 text

@glenmaddern UNIFICATION OF SKILLS 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; }

Slide 26

Slide 26 text

@glenmaddern /* 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 27

Slide 27 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; }

Slide 28

Slide 28 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' }

Slide 29

Slide 29 text

@glenmaddern /* 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 30

Slide 30 text

@glenmaddern UNIFICATION OF PLATFORM FOLLOW THE PATH OF LEAST RESISTANCE

Slide 31

Slide 31 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

Slide 32

Slide 32 text

@glenmaddern 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 33

Slide 33 text

REACT NATIVE

Slide 34

Slide 34 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 35

Slide 35 text

@glenmaddern class StyledComponentsNative extends React.Component { render() { return ( Hello World, this is my first native styled component! ) } }

Slide 36

Slide 36 text

https://microsoft.github.io/reactxp/

Slide 37

Slide 37 text

https://github.com/airbnb/react-sketchapp @jongold

Slide 38

Slide 38 text

@glenmaddern UNIFICATION OF PLATFORM DON’T ADD BAGGAGE

Slide 39

Slide 39 text

@glenmaddern BET ON JS IF YOU LIKE, BUT ALWAYS SERVE HTML

Slide 40

Slide 40 text

https://medium.com/reloading/javascript-start-up-performance-69200f43b201 @addyosmani Parse times for 1MB JavaScript file

Slide 41

Slide 41 text

@glenmaddern PASTE LINK INTO SLACK Static HTML page Client-rendered JS app

Slide 42

Slide 42 text

@glenmaddern LANDING 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 difficult or impossible

Slide 43

Slide 43 text

@glenmaddern https://github.com/gatsbyjs/gatsby https://learnnextjs.com https://github.com/geelen/react-snapshot react snapshot

Slide 44

Slide 44 text

@glenmaddern PROPERTIES OF THE MYTHICAL UNIFIED UI LANGUAGE • It codifies best practices • It brings people along • It's expressive & powerful • It's universally usable

Slide 45

Slide 45 text

t hank you! @glenmaddern https://frontend.center