Michael

Templating

function MyButtonComponent() {
return `<button>My Button</button>`
}
MyButtonComponent()

      function MyButtonComponent() {
  return `<button>My Button</button>`
}
MyButtonComponent()
      

Result


Configuration

function MyButtonComponent({ text }) {
return `<button><em>${text}</em></button>`
}
MyButtonComponent({ text: 'My Emphasised Button' })

      function MyButtonComponent({ text }) {
  return `<button><em>${text}</em></button>`
}
MyButtonComponent({ text: 'My Emphasised Button' })
      

Result


Adaptability

function MyButtonComponent(content) {
return `<button>${content}</button>`
}
MyButtonComponent('<strong>My Strong Button</strong>')

      function MyButtonComponent(content) {
  return `<button>${content}</button>`
}
MyButtonComponent('<strong>My Strong Button</strong>')
      

Result


Inversion

Only the child component in this example knows a special algorithm to compute something, while only the parent component knows how to present the information in text.

// Child component
function MyButtonComponent(contentFunction) {
const computeLevelFromContent = (content) => content.length
const level = computeLevelFromContent(contentFunction(''))
const content = contentFunction(level)
return `<button>${content}</button>`
}

// Parent component
function Parent() {
return MyButtonComponent((level) => `My Powerful Button (level: ${level})`)
}
Parent()

      // Child component
function MyButtonComponent(contentFunction) {
  const computeLevelFromContent = (content) => content.length
  const level = computeLevelFromContent(contentFunction(''))
  const content = contentFunction(level)
  return `<button>${content}</button>`
}

// Parent component
function Parent() {
  return MyButtonComponent((level) => `My Powerful Button (level: ${level})`)
}
Parent()
      

Result


Extension

Nesting