Reactivity in User Interfaces

Charles Lowell, Reactive Modeling with Ember

Changes in Application State Reflected Visually

Most Direct Example, A Spreadsheet

Two Static Properties (A,B) and a Visualized Dyamic Relationship

A more complex example, Color Wheel

Adobe Color CC

Charles Lowell, Reactive Modeling with Ember

Given Static Inputs

Visualize Dynamic Relationships

So users can play with data

Techniques

• Reactive Primitives
• Reactive Primitives in Ember
• Ember.Model
• Ember.computed

Reactive Primitives

What we're looking for

• Observable(so we can react to changes)
• Support Dynamic Relationships(between static inputs)
• Run Loop(to set everything in motion)

Reactive Primitives In Ember

• Observable -> Ember.Object
• Reactive -> Ember.computed
• Run Loop -> Ember's Runloop (via Backburner.js)

Reach Goals

For the reactive part

Primitive #1

Observable: Ember.Object

Ember.Object, Setter/Getter

// Setter and Getter Required for Observation
const human = Ember.Object.create({});
human.set('name', 'bob');
human.get('name'); // => "name"

Ember.Object, Observable Example

// app/application/route
import Ember from 'ember';

const Human = Ember.Object.extend();

export default Ember.Route.extend({
  model() {
   return Human.create({ firstName: 'bob' });
  }
});

{{! app/templates/application.hbs }}
Why, hello there {{model.firstName}}!<br>

<p>
  First Name:
  {{input value=model.firstName}}
</p>

Ember.Object Running Example

Primitive #2

Reactive: Ember.computed

• Treat a function like a property
• Define dependent keys
• Re-evaluate property if dependent key changes

Ember.Object, Computed Property Example

import Ember from 'ember';
const { computed } = Ember;

const Human = Ember.Object.extend({
  fullName: computed( 'firstName',  'lastName', function() {
      return `${this.get('firstName')} ${this.get('lastName')}`;
   })
});

export default Ember.Route.extend({
  model() {
   return Human.create({ firstName: 'bob', lastName: 'smith' });
  }
});

Why, hello there {{model.fullName}}!<br>

<p>
  First Name:
  {{input value=model.firstName}}
</p>

<p>
  <label>Last Name:</label>
  {{input value=model.lastName}}
</p>

Ember.computed Running Example

computed properties

Yey lazy evaluation! Mike North, Compose All the Things

Computed Properties: Marcos

Forming more complex reactive relationships

import Ember from 'ember';
import EmberCPM from 'ember-cpm';

const { Macros: { sum, difference, product }} = EmberCPM;

export default Ember.Component.extend({
  num1: 45,
  num2: 3.5,
  num3: 13.4,
  num4: -2,

  total: sum(
    sum('num1', 'num2', 'num3'),
    difference('num3', 'num2'),
    product(difference('num2', 'num1'), 'num4')
  )
});

Computed Properties: Testable

cibernox/ember-cpm, sum-test.js

Computed Properties: Best Practices

With great power...

• Keep your functions pure(Avoid side effects at all costs)
• Treat dependent keys like parameters(If you use it, declare it)
• Uni-directional data flow is easier(make data relationshiops more direct and easier to think about)
• Dynamic Values should Decorate Static Values(or at least that's how I like to think about it)

Practical

We'll start with a human problem

I'm tired of figuring out how much to eat.

Human Inputs

• Weight
• Height
• Age
• Sex

Need to Determine

How much to eat based on amount of activity

Setup our project

https://github.com/ryanlabouve/how-much-to-eat-example

ember new how-much-to-eat
ember install ember-cli-sass
ember install ember-paper
npm install ember-cpm --save-dev

ember generate route application
ember generate controller application
ember serve

Create our Human, and Load as Model

Build _VERY_ basic interface

I mean very basic...

Compose all the things to setup BMR

Yey browser REPL

Setup rest of properties