How did we get to fastn?

How did we get to fastn?

How do we put something on the screen

const container = document.createElement('div')
const el1 = document.createElement('span')
el1.textContent = 'This is a test'

const el2 = document.createElement('span')
el2.textContent = 'This is another test'

container.appendChild(el1)
container.appendChild(el2)

But, this get's annoying and verbose, Let's make a helper

const container = buildElement('div')
const el1 = buildElement('span', { textContent: 'This is a test'})
const el2 = buildElement('span', { textContent: 'This is another test'})

container.appendChild(el1)
container.appendChild(el2)

But what if we could nest our elements

const ui = buildElement('div',
  buildElement('span', { textContent: 'This is a test' }),
  buildElement('span', { textContent: 'This is another test' })
)

Since textContent is acctually a child, let's put in text

const ui = buildElement('div',
  buildElement('span', 'This is a test'),
  buildElement('span', 'This is another test')
)

But I want properties

const colouredEl = buildElement('div', 'I am pretty')
colouredEl.style.backgroundColor = 'yellow'
const ui = buildElement('div',
  buildElement('span', 'This is a test'),
  buildElement('span', 'This is another test'),
  colouredEl
)

Why can't I do this inline?

const ui = buildElement('div',
  buildElement('span', 'This is a test'),
  buildElement('span', 'This is another test'),
  buildElement('div', {
    style: {
      backgroundColor: 'yellow'
    }
  }, 'I am pretty')
)

And update the UI when events happen

const ui = buildElement('div',
  buildElement('span', 'This is a test'),
  buildElement('span', 'This is another test'),
  buildElement('div', {
    style: {
      backgroundColor: 'yellow'
    }
  }, 'I am pretty')
  .on('click', function() {
    this.element.style.backgroundColor = 'blue'
  })
)

But Rather than updating directly, we should bind to state

const state = {
  backgroundColor: 'yellow'
}

const syncBackgroundColor = new EventEmitter()

const ui = buildElement('div',
  buildElement('span', 'This is a test'),
  buildElement('span', 'This is another test'),
  buildElement('div', {
    style: {
      backgroundColor: syncBackgroundColor
    }
  }, 'I am pretty')
  .on('click', () => {
    state.backgroundColor = 'yellow'
    syncBackgroundColor.emit('change', state.backgroundColor)
  })
)