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

// 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

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

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

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

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

gmmorris

function compare(left, right){
  return left.val === right.val;
}

function render(props){
  const objVal = {
    ...props,
    setProps: (newProps) => {
      if(!compare(props, newProps)) {
        this(newProps);

gmmorris

const safeDarthVader = safe({
  name : 'Anakin',
  mother : {
    name : 'Shmi'
  }
});

function getFatherName(person) {
  return person.father.name

gmmorris

const DarthVader = {
  name : 'Anakin',
  mother : {
    name : 'Shmi'
  }
};

function deepAccessUsingString(obj, key){
  return key.split('.').reduce((nestedObject, key) => {
    if(nestedObject && key in nestedObject) {

gmmorris

const mySafeObj = safe({
  name : 'Anakin',
  mother : {
    name : 'Shmi'
  }
});

console.log(mySafeObj.name); // returns "Anakin"

gmmorris

function safe(obj) {
  return new Proxy(obj, {
    get: function(target, name){
      return hasKey(target, name) ? 
        (isObject(target[name]) ? safe(target[name]) : target[name]) : Undefined;
    }
  });
}