• We will be Game Programmers

Big ideas:

• Purely functional UIs
• Single atom app states
• Immutability
• State container

Segmentation of the UI along these functional boundaries. Black-boxing. Predictable input and output.

Create dependency graph for your UI! To help coder to visual hierarchy also.

• AutoResponsive React
• RxJS at Modern Web UI for Netflix
• Nicolas Gallagher - Thinking beyond "Scalable CSS"
• React-UI
• Pure UI
• Managing UI complexity with React - Part 1
• Managing UI complexity with React - Part 2

class Button extends React.Component {
  render() {
    var className = cx('btn', this.props.primary && 'btn-primary');
    return <button type="button" className={className} onClick={this.props.onClick}>{this.props.children}</button>;
  }
}

• FatFileFinder

• react-container
• Belle - Configurable React Components with great UX
• MediaMath's Strand - Using Web Components
• Material Design Lite
• Learn from Web Component gallery
• Khan Academy reusable components
• Touchstone
• material-ui
• Reapp
• React Bootstrap
• Elemental UI
• MUI
• Grommet
• material-ui
• Modals in React
• React components with Material Design Lite
• react-look

• Beware of contextual styling
• Styling React components in Sass
• Using Webpack to build React components and their assets
• Atomic Components
• Modularise CSS the React Way
• CSS in JS - techniques comparison
• Responsive breakpoints in JavaScript
• Radium - inline styles on React elements
• Applying CSS transitions on initial render
• Interoperable CSS
• The debate around 'Do we even need CSS anymore?'
• The end of global CSS
• The future of CSS
• Styling React components in Sass
• ReactCSS???
• Contextual styling
• A system for structuring your React application's styles

At any point in time, you describe how you want your UI to look like.

• Decomplexifying Code with React

Human has limit. Working memory is finite.

Cyclomatic complexity can be used to look at your UI code.

Keep complexity down. Push simplicity up. Simple make easy - Closure

White-boarding a user experience - Moving from state to state from UI. As the number of interface states increase, what happen?

Your rendering target is the DOM. DOM is a way to get stuffs into your face. The DOM is a scene graph. Retained mode rendering.

Modelling the transition between states. Don't use imperative code.

if (count > 99) {
  if (!hasFire()) {
    addFire();
  }
} else {
  if (hasFire()) {
    removeFire();
  }
}
if (count == 0) {
  if (hasBadge()) {
    removeBadge();
  }
  return;
}
if (!hasBadge()) {
  addBadge();
}
var countText = count > 99 ? '99+' : count.toString();
getBadge().setText(countText);

Imperative UI coding is very hard to maintain and extend.

Declarative UI coding like React make you model the states as it is. Given the input, what the final state will look like.

Model states, not transitions!

Let React be your "immediate mode" to tell what the scene will look like over and over again.

React allow you to write your own DSL, your own components, your own HR lexicon!

<Pipeline>

</Pipeline

Think of React as a platform

Your render tree.

Don't feed any data as props to your ROOT component (if you can help it) Have your root component manage state.

A root component is a very good place to manage overall application shell's state. It is also a good place to do data caching!

Container-displayer relationship.