import React from 'react';
import {AppRegistry, Pano, Text, View} from 'react-vr';
class WelcomeToVR extends React.Component {
render() {
// Displays "hello" text on top of a loaded 360 panorama image.
// Text is 0.8 meters in size and is centered three meters in front
of you.
return (
hello
);
}
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
Design systems shared between
designers and developers!
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Wait! But…
Myths & misconceptions about CSS-in-JS
Slide 103
Slide 103 text
“CSS-in-JS is slow”
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
1. CSS-in-JS ≠ inline styles!
Slide 106
Slide 106 text
import { css } from 'glamor'
const title = css({
fontSize: '1.8em',
fontFamily: 'Comic Sans MS',
color: 'blue'
})
console.log(title)
// → 'css-1pyvz'
https://meiert.com/en/blog/20170531/70-percent-css-repetition/
“In CSS, we repeat ourselves too much.
While it’s absolutely, practically possible
to limit declaration repetition to 10–
20%, reality averages 72% (median
66%).”
Slide 117
Slide 117 text
Functional CSS?
Slide 118
Slide 118 text
http://tachyons.io
Slide 119
Slide 119 text
Tachyons
Title
Lorem ipsum dolor sit amet.
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
Manual work
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
Enables CSS optimisations
Slide 125
Slide 125 text
…but uses very simple API
import {styled} from 'styletron-react';
const Panel = styled('div', (props) => ({
backgroundColor: props.alert ? 'orange' : 'lightblue',
fontSize: '12px'
}));
Danger!
Slide 126
Slide 126 text
airbnb.com CSS output size
Slide 127
Slide 127 text
Use functional CSS
Slide 128
Slide 128 text
Generate functional CSS
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
“It’s not real CSS!”
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
SASS has variables, mixins, etc.
Slide 134
Slide 134 text
JavaScript has variables, functions
Slide 135
Slide 135 text
https://una.im/sass-es2015/#
Slide 136
Slide 136 text
Variables
let color = "red";
$color: "red";
Slide 137
Slide 137 text
Lists
const colorArray = ["red", "yellow", "green"];
for (let color of colorArray) {
console.log(color);
}
$colorList: "red", "yellow", "green";
@each $color in $colorList {
@debug $color;
}
https://adactio.com/journal/12571
“It is simple in the sense of “not complex”,
but that doesn’t mean it’s easy. Mistaking
“simple” for “easy” will only lead to
heartache.”
Slide 154
Slide 154 text
How many of you know how to
extract critical CSS or doing that?
✋
Slide 155
Slide 155 text
Critical CSS with <>
import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'
const sheet = new ServerStyleSheet()
const html = renderToString(sheet.collectStyles())
const css = sheet.getStyleTags()
Slide 156
Slide 156 text
https://medium.com/seek-blog/a-unified-styling-language-
d0c208de2660
“If you build your app with progressive
enhancement in mind, despite being
written entirely in JavaScript, it might not
require JavaScript on the client at all.”
Slide 157
Slide 157 text
Takeaways
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
“CSS-in-JS enforces the best practices
trough technology and shared knowledge.”
Slide 160
Slide 160 text
It’s still CSS and you still
have to learn it!
Slide 161
Slide 161 text
It’s not about how fast you can write code,
it’s about how fast you can read it.