Miguel Camba

@miguelcamba

@cibernox

miguelcamba.com

LET'S USE THE INTERNET!

Addon selection

• Browse emberobserver.com

• Gather ~5 alternatives

• Stars counting

• Feature comparison

• Maintenance tie-break

re·use

To use again, especially after salvaging or special treatment or processing.

(rē-yo͞oz′)

tr.v.

Cost of construction > Cost of reuse

Coeficient of reusability

‎(ﾉಥ益ಥ）ﾉ ┻━┻

L

M

A

O

We know better

• Bindings

• Actions

• Blocks

• Components

Think in the community first

Think in the API second

Before writing any code

Start with the minimum

DDAU: Prefer actions over bindings

Pretend every option costs you £50

2x if mandatory

Seek familiarity

OOP principles apply just as well to components as they do to code

Favor composition over Inheritance

1. Identify responsability
2. Divide
3. Compose

Single responsability principle

Identify

• The list of options that bypasses overflow rules

What do all selects have in common?

• Using the trigger toggles the list of options

• Clicking anywhere else hides the list

• Clicking an option selects it

• Navigate with keyboard, highlight on hover, ect...

Divide

<div class="trigger" onclick={{action "toggle"}}>
  {{yield selected}}
</div>
{{#if opened}}
  <div class="dropdown-content">
    {{yield}}
  </div>
{{/if}}

{{ember-basic-dropdown}}

actions: {
  toggle() {
    this.get('opened') ? this.close() : this.open();
  }
},

open() {
  this.set('opened', true);
  this.addClickHandlerToBody();
},

close() {
  this.set('opened', false);
  this.removeClickHandlerFromBody();
}

{{ember-basic-dropdown}}

Compose

{{#dropdown}}
  {{#each options as |option|}}
    {{yield option}}
  {{else}}
    {{yield to="inverse"}}
  {{/each}}
{{else}}
  {{yield selected}}
{{/dropdown}}

{{ember-power-select}}

{{#select options=list selected=selected as |opt|}}
  {{option}}
{{else}}
  <p>No results</p>
{{/select}}

Your app

Repeat

<div class="trigger" onclick={{action "toggle"}}>
  {{yield selected}}
</div>
{{#if opened}}
  {{#ember-wormhole to=destinationElmnt}}
    <div class="dropdown-content">
      {{yield}}
    </div>
  {{/ember-wormhole}}
{{/if}}

{{ember-basic-dropdown}}

actions: {
  toggle() { }
},

open() {
  // ...
  this.listenToResizeScrollAndOrientationEvents();
  run.schedule('afterRender', this, this.reposition);
},

reposition() {
  // Calculate coordinates
}

{{ember-basic-dropdown}}

contentFor: function(type) {
  if (type === 'body-footer') {
    return '<div id="dropdown-wormhole"></div>';
  }
}

{{ember-basic-dropdown}}

{{#select options=list selected=selected as |opt|}}
  {{option}}
{{else}}
  <p>No results</p>
{{/select}}

Your app

{{ember-power-select}}

{{ember-basic-dropdown}}

{{ember-wormhole}}

{{#dropdown}}
  <ul class="select-options">
    {{#each results as |opt|}}
      <li class="select-option {{selected}} {{highlighted}}" 
          onclick={{action "select" opt}} 
          onmouseover={{action "highlight" opt}}>

        {{yield opt}}

      </li>
    {{/each}}
  </ul>
{{else}}
  ...
{{/dropdown}}

Components

inter-comunication

From child to parent

{{my-foo onFoo="didFoo"}}

this.sendAction('onFoo', someArg);

From parent to child ??

<div class="trigger" onclick={{action "toggle"}}>
  {{yield selected}}
</div>
{{#if opened}}
  {{#ember-wormhole to=destinationElmnt}}
    <div class="dropdown-content">

{{ember-basic-dropdown}}

    </div>
  {{/ember-wormhole}}
{{/if}}

      {{yield}}

{{ember-power-select}}

{{#dropdown}}
  <ul class="select-options">
    {{#each results as |opt|}}
      <li class="select-option {{selected}} {{highlighted}}" 
          onclick={{action "select" opt}} 
          onmouseover={{action "highlight" opt}}>

        {{yield opt}}

      </li>
    {{/each}}
  </ul>
{{else}}
  ...
{{/dropdown}}

{{#dropdown}}

          onclick={{action "select" opt}} 

{{ember-power-select}}

export default Ember.Component.extend({
  actions: {
    select(selection, closeDropdown, evt) {
      // do stuff ...
      closeDropdown(); // ... and close :-P
    }
  }
});

    select(selection, closeDropdown, evt) {
      // do stuff ...
      closeDropdown(); // ... and close :-P
    }

💥 BOOM!

We've just inverted DDAU 😎

Bidirectional communication enables a whole new level of composability and customization

{{yield (action "close")}}

But you have to be careful

Expose only your API

// helpers/hash.js
import Ember from 'ember';

export default Ember.Helper.helper((_, hash) => hash);

{{#dropdown}}
  <ul class="select-options">
    {{#each results as |opt|}}
      <li class="select-option {{selected}} {{highlighted}}" 
          onclick={{action "select" opt}} 
          onmouseover={{action "highlight" opt}}>

        {{yield opt}}

      </li>
    {{/each}}
  </ul>
{{else}}
  ...
{{/dropdown}}

{{#dropdown}}

          onclick={{action "select" opt}} 

export default Ember.Component.extend({
  actions: {
    select(selection, dropdown, evt) {
      // ...
      dropdown.close();
    }
  }
});

You can't cover all use cases.

Face it.

Enable composition for everyone

Identify

{{ember-power-select}}

{{ember-basic-dropdown}}

{{ember-wormhole}}

{{e-p-s/selected}} + {{e-p-s/options}}

{{#dropdown as |dropdown|}}
  <ul class="select-options">
    {{#component optionsComponent
                 options=results 
                 selected=selected 
                 select=(action "select") 
                 highlight=(action "highlight") 
                 dropdown=dropdown as |opt|}}

      {{yield opt}}

    {{/component}}
  </ul>
{{else}}
  {{component selectedComponent selected=selected}}
{{/dropdown}}

    {{#component optionsComponent
                 options=results 
                 selected=selected 
                 select=(action "select") 
                 highlight=(action "highlight") 
                 dropdown=dropdown as |opt|}}

      {{yield opt}}

    {{/component}}


  {{component selectedComponent selected=selected}}

{{#select options=list 
          selected=selected as |opt|}}


  {{option}}

{{else}}
  <p>No results</p>
{{/select}}

Your app

Endless possibilities

Don't wait.

All available in 1.13+

Compose for fun and profit

Thanks