Composable and contextual components

@jakubniechcial

  What is component driven development?

Don't think about controllers

Make your templates minimal

Reuse what's possible

  Why is it valuable?

Stay DRY

Be ready for future

Write better code

Be deterministic

  What is component?

  What is composable component?

Monolith vs light component

{{select
    content=pizzas
    value=favouritePizza
    placeholder="Choose your pizza"
    allowClear=true
    optionLabelPath="id"
    optionDescriptionPath="text"
    cssClass="custom-class"
    optionClassName="my-option"
    noOptionPlaceholder="No options here"
    (...)
}}

Monolith

Monolith vs light component

{{select
    content=pizzas
    value=favouritePizza
    placeholder="Choose your pizza"
    allowClear=true    
    cssClass="custom-class"
    optionComponent="my-option-component"
    noOptionsComponent="my-no-options-component"
    (...)
}}

Light option 1

ember-select-guru

Monolith vs light component

{{#select options=users selected=foo as |user|}}
  {{user.name}}
{{else}}
  <p>No matching results</p>
{{/select}}

Light option 2

You can yield with else

ember-power-select

Example of composable component

Don't bind - pass

{{ember-select-guru
  value=values
  options=options
  onSelect=(action "onSelectEvent")
  multiple=true}}

Example of composable component

Pass parents to children if necessary

<div class="wrapper-component">
    {{yield (action "myAPIAction")}}
</div>

{{#wrapper-component as |myAction|}}
    <div class="inner-content" onclick={{action "handleClick" myAction}}>
{{/wrapper-component}}

handleClick(api) {
    // do what you want
    api(); // execute something on PARENT component
    // do what you want
}

Example of composable component

Pass parents to children if necessary

<div class="wrapper-component">
    {{yield (hash 
        firstAction=(action "first") 
        secondAction=(action "second") 
        evenSomeProperty=property)}}
</div>

Contextual components

Yield your components and leave them private

{{! app/templates/components/alert-box.hbs }}
<div class="alert-box">
  {{yield (hash
    close-button=(component 'alert-box-button' onclick=(action 'close'))
  )}}
</div>

{{! app/templates/index.hbs }}
{{#alert-box as |box|}}
  Danger, Will Robinson!
  <div style="float:right">
    {{#box.close-button}}
      It's just a plain old meteorite.
    {{/box.close-button}}
  </div>
{{/alert-box}}

Summary

Use components and make them core of your app

Reuse even across projects

Constantly refactor to be more elastic

Thanks

@jakubniechcial