gmmorris

npm config set init.author.name "Gidi Meir Morris"
npm config set init.author.email [email protected]
npm config set init.author.url http://www.gidi.io
npm config set init.license MIT

gmmorris

The magical quest for Componentisation

I would like, if I may, to ask you an existential question.

What is the core of our job as developers today?

It probably isn't figuring out the next super cool & complex algorithm.

But rather, what our job probably is, is to take an existing abstraction and compose it with a second abstraction in order to form a third abstraction.

gmmorris

const g = () => {}
const f = () => {}

// (g ∘ f )(x) = g(f(x))
const h = (...args) => g(f(...args))

gmmorris

// We'll label g() and f() as the `parent` and `child` functions
const parent = () => {}
const child = () => {}

// we'll label the arguments for the composition as `props`
const props = [x, y, z]
// we'll add a little flexability by allowing the parent and child
// to have their own arguments, and leaving it up to the parent to decide
// what to do with the child
const childProps = [a, b, c]

gmmorris

// Specifically what might interest you is how the following JSX:

<MyButton color="blue" shadowSize={2}> <Echo value="Click Me" /> </MyButton>

// Compiles to:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  React.createElement( Echo, {value: 'Click Me'} )

gmmorris

React.createElement(
  parent,
  props,
  React.createElement( child, childProps )
)

gmmorris

/* @flow */

function Children (children : Iterable<any>) {
  this.children = Array.from(children)
  return this
}

Children.prototype = {
  toArray () : any[] {
    return this.children

gmmorris

const conditional = () => {
  let elseThen = i => i;
  const conditions = [];
  function cond (val) {
    const res = conditions
      .find(condPair => condPair.test(val));
    
    return res
      ? res.then(val)
      : elseThen(val);

gmmorris

function diffObjects (left, right) {
  const leftKeys = Object.keys(left)
  const rightKeys = Object.keys(right)
  const keyDiff =  _.intersection(leftKeys, rightKeys)
    .reduce((differentKeys, key) => {
      
      if(_.isPlainObject(left[key]) && _.isPlainObject(right[key])) {
        const diff = diffObjects(left[key], right[key])
        if(diff !== true) {
          differentKeys.push(key)

gmmorris

const romanNumeral = (char, val) => {
  return {
    char: char,
    val: val,
    isBellow: comp => comp > val,
    isAbove: comp => comp < val,
    is: comp => comp === val,
    times: repeat => {
      return (new Array(parseInt(repeat))).fill(char).join('')