This document summarizes recent developments in front-end technologies from one year ago, including Babel, React, Redux, CSS Modules, and PostCSS. Key points include new Babel features for class properties and computed property names, useful destructuring patterns in React and Redux, and how PostCSS enables CSS custom properties and custom media queries.

1. <2015-08-27 Thu>
UI@DOCKER

2. @chrisbiscardi

3. ONE YEAR AGO
Django
Assorted scripts
Most people write Go

4. STANDARDS
babel
React
React Router
Redux
css-modules
PostCSS

5. BABEL
Stage: 0
autobinding
Property Initializers
Fat Arrows
class Thing extends Component {
myFunc = () => {
// automatically bound this
debug('a prop!', this.props.whaaaat);
}
}

6. COMPUTED KEYS
const classes = classnames({
'fa': true,
'fa-fw': fixedWidth,
'fa-inverse': invert,
[icon]: true,
[`fa-${animate}`]: _.includes(animations, animate),
[`fa-${size}`]: _.includes(sizes, size) && !stack,
[`fa-flip-${flip}`]: _.includes(flips, flip),
[`fa-rotate-${rotate}`]: _.includes(rotations, rotate),
[`fa-stack-${size}`]: _.includes(sizes, size) && stack
});

7. DESTRUCTURING
Useful for documentation
export function doStuff({ name, namespace }) {
if(namespace) {
// someone owns it!
}
}

8. REACT
Less about DOM
More about abstractions
import FA from 'common/FontAwesome';
<FA icon='fa-camera-retro'
rotate='180'
size='2x' />

9. REDUX
"flux" implementation
devtools
middleware
Redux attempts to make state mutations
predictable

10. CSS MODULES
ICSS
local by default
/* Heading.css */
.heading {
color: pink;
font-weight: 800;
}
Heading__heading__basz

11. POSTCSS
cssnext
:root {
--mainColor: #ffbbaaff;
}
@custom-media --mobile (width <= 640px);
@custom-selector --heading h1, h2, h3, h4, h5, h6;
.post-article :--heading {
color: color( var(--mainColor) blackness(+20%) );
}
@media (--mobile) {
.post-article :--heading {
margin-top: 0;
}
}

12. DUX
normalize.css
reboot
Project templates (iOS, client-app, universal-app, static-
site)
Individually packaged elements