danny-andrews

module A
  def msg
    'hello'
  end
end

module B
  def msg
    'hi'
  end

danny-andrews

Level 1 (Loops) - (map, reduce, filter, more).

Level 2 (Callbacks/Async) - Use Promises (or better yet, Futures).*.

Level 3 (Assignment) - pipe or compose functions together to avoid unnecessary intermediate variable declarations.

A wild monad appears! Monet Olé!

Level 4 (null/undefined) - Use Maybe monad.*.

danny-andrews

const { Component } = React;
const { render } = ReactDOM;

const MyMug = ({ drink, verb = 'Drinking' }) =>
  <div>{verb} an {drink}.</div>;

class Caffeinate extends Component {
  state = { coffee: 'Americano' };

  render() {

danny-andrews

const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;

// There's no general way to curry named parameters, so we have to do it
//   manually.
const AppBody = ({ message }) => ({ number }) => <div>{message}: {number}!</div>;

const App = ({ message }) => <LuckyNumber component={AppBody({ message })} />;

danny-andrews

const LuckyNumber = ({ component: Component, componentProps }) => <Component number={Math.random()} {...componentProps} />;

const AppBody = ({ message, number }) => <div>{message}: {number}!</div>;

const App = ({ message }) => <LuckyNumber componentProps={{ message }} component={AppBody} />;

danny-andrews

const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;

const AppBody = ({number}) => <div>{message}: {number}!</div>;

// How do I get the message prop to AppBody? 🤔🤔🤔
const App = () => <LuckyNumber component={AppBody} />;

danny-andrews

const LuckyNumber = ({ render }) => render({ number: Math.random() });

const App = ({ message }) => (
  <LuckyNumber
    render={({number}) => <div>{message}: {number}!</div>}
  />
);

danny-andrews

const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;

const AppBody = ({ number }) => <div>Your number is: {number}!</div>;

const App = () => <LuckyNumber component={AppBody} />;

danny-andrews

const LuckyNumber = ({ render }) => render({ number: Math.random() });

const App = () => (
  <LuckyNumber
    render={({number}) => <div>Your number is: {number}!</div>}
  />
);

danny-andrews

const LuckyNumber = ({ children }) => children({ number: Math.random() });

const App = () => (
  <LuckyNumber>
    {({number}) => <div>Your number is: {number}!</div>}
  </LuckyNumber>
);