Developing UI Components with Ember

Alex Zirbel

Welcome!

Component Libraries

Isolated parts of your app

Date picker

Select

Table

Goals

Show Addepar's Open Source components

Discuss Ember component principles

Build a personal finance tool

Open Source

Charts

Table

Widgets

ember new minipar

Pass Everything In

transactions: func() {
  get('tx').filter(
    ...);
}.property('tx'),


{{table-component
  hasFooter=false
  columns=columns
  content=transactions
}}

{{table-component
  hasFooter=false
  columns=columns
  content=transactions
  filterText=filter
}}

More Functionality?

ExtraAdvancedTableComponent =
Ember.Table.EmberTableComponent.extend({
  filterText: null
  ...
});

{{extra-advanced-table
  hasFooter=false
  columns=columns
  content=transactions
  filterText=filter
}}

Example from Addepar

Addepar.ReportHtmlTableComponent =
Ember.Table.EmberTableComponent.extend({
  render: function(buffer) {
    // Render HTML
    // We don't even use Ember Table's
    // main feature, lazy rendering!
  }
});

Two-Way Binding

{{table-component
  columns=columns
  content=transactions
  selection=selectedTransaction
}}


{{select-component
  content=categories
  selection=selectedTransaction.category
}}

Two-Way Binding

Great while your app is simple

Great for text fields

Great for forms

Two-Way Binding

Not so great when things get complex

Two-Way Binding

Example 1: Selected Row

This is internal table state

What happens when it is bound to 10 different components?

Two-Way Binding

Example 2: Invalid Input

When do you verify input?

What happens when an invalid value triggers errors elsewhere in your app?

Ask, Don't Tell

{{table

  selection=selectedRow
}}

Ask, Don't Tell

{{table

  on-change="updateSelection"
  selection=selectedRow
}}

Ask, Don't Tell

{{table

  on-change="updateSelection"
  selection=selectedRow
}}

Data Down

Ask, Don't Tell

{{table

  on-change="updateSelection"
  selection=selectedRow
}}

Data Down

Actions Up

API Consistency

{{horizontal-bar-chart
  data=content
}}

{{vertical-bar-chart
  data=content
}}

{{pie-chart
  data=content
}}

API Consistency

{{horizontal-bar-chart
  data=content
}}

{{vertical-bar-chart
  data=content
}}

{{pie-chart
  data=content
}}

{{bar-chart
  data=content
  orientation="h.."
}}

// OR

{{grouped-chart
  data=content
  type="pie"
}}

Thanks!

We're hiring

careers@addepar.com

Contact & Info

azirbel@addepar.com

@alexzirbel

This presentation

github.com/azirbel/minipar

slides.com/azirbel/addepar-components

Addepar