@markdalgleish

A State
of Change

On the future of

Object.observe

{ }

{ changed: true }

No idea it changed

Solutions?

var model = new Model();

model.set('foo', 'bar');
model.get('foo');

Dirty checking

— a.k.a. $scope.$digest( ) —

“Angular models are plain old JavaScript objects. This makes your code easy to test, maintain, reuse, and again free from boilerplate.”

Object.observe

var o = {};

Object.observe(o, function(changes) {
  console.log(changes);
});

// Add a property
o.foo = 'bar';

// Change record:
[{ name: "foo",
   object: o,
   type: "add" }]
// Update a property:
o.foo = 123;

// Change record
[{ name: "foo",
   object: o,
   oldValue: "bar",
   type: "update" }]
delete o.foo;

// Change record:
[{ name: "foo",
   object: o,
   oldValue: 123,
   type: "delete" }]
Object.freeze(o);

// Change record:
[{ object: o,
   type: "preventExtensions" }]

Array.observe

var a = [];

Array.observe(a, function(changes) {
  console.log(changes);
});
a.push(1);

// Change record:
[{ addedCount: 1,
   index: 0,
   object: a,
   removed: [],
   type: "splice" }]

Synthetic change events

Object.getNotifier(o).notify({
  type: 'update',
  name: 'foo',
  oldValue: 'bar'
});

Binding


plain old data


to the


DOM

Available now in

Chrome Stable

Seems uncontroversial enough

Dissent

— is —

brewing

“Object.observe( ) is going to be the next ‘with’ statement:
a weird language idiosyncrasy solving a problem
that wasn’t very important.”

Pete Hunt, React

“Object.observe(data, function(){
throw new Error(‘NO’) });”

Nicolas Gallagher, Twitter

“Back when Object.observe was first announced, I was so excited. Today I’d much rather have proper support for immutable data structures.”

Pascal Hartig, TodoMVC

Mutability

— vs. —

Immutability

Immutable
values

// 'hello' is immutable
var str = 'hello';

str.replace('hello', 'goodbye');
str.slice(2);
str.concat(' there');

str; // still equals 'hello'

Simple comparisons

'hello' === 'hello';

We’ve been treating

arrays

— like they’re —

immutable

// Old and scary:

var nums = [1,2,3,4,5];

for (var i = 0; i < nums.length; i++) {
  // Cube all numbers
  nums[i] = nums[i] * nums[i] * nums[i];
  
  // Remove uneven items
  if (nums[i] % 2 !== 0) {
    nums.splice(i, 1);
    i--;
  }
}

// New and simple:

var nums = [1,2,3,4,5]
  .map(x => x * x * x)
  .filter(x => x % 2 == 0);

Every map, filter

— results in a —

New array

// Unfortunately,
// not actually immutable :(

nums.push(123);

No simple comparisons

assert([1,2,3] !== [1,2,3]);

Cleaner code

— with —

Fewer bugs

Why are objects different?

What if every change

— resulted in a —

new object?

David Nolen


Mori


Via ClojureScript

// Create:
var map1 = mori.hash_map('foo', 1);

// Update:
var map2 = mori.conj(m, mori.vector('bar', 2));

// Returns a new hash map:
{ 'foo': 1, 'bar': 2 }

Lee Byron


Immutable-js


Facebook

// Create:
var map1 = Immutable.Map({ foo: 1 });

// Update:
var map2 = map1.merge({ bar: 2 });

// Returns a new map:
{ "foo": 1, "bar": 2 }

Simple comparisons!

var map1 = Immutable.Map({ foo: 'bar' });
var map2 = map1.merge({ foo: 'bar' });

assert(map1 === map2); // :D !!!

var map1 = Immutable.Map({ foo: 'bar' });
var map2 = Immutable.Map({ foo: 'bar' });

assert(Immutable.is(map1, map2));

Is this redundant

— when we have —

Stateful DOM?

React

“Simply express how your app should look at any given point in time, and React will automatically manage all UI updates”

Essentially stateless DOM

Matt Esch


virtual-dom


Inspired by React

What’s the big deal?

David Nolen


Om


React + ClojureScript

Entire UI state

— in a —

Single, immutable object

“The future

— of —

JavaScript MVCs”

“Om uses ClojureScript data structures which we know will not be changed. Because of this, we can [do] the fastest check possible - a reference equality check”

Simple comparisons

— Data has value semantics —

(=
  {:foo "bar"}
  {:foo "bar"}
)

“…immutable data allows… Om… to outperform a reasonably performant JavaScript MVC like Backbone.js”

“If you treat the browser as a remote rendering engine and stop treating it as a place to query and store crap, everything gets faster.”

Undo for free

Save entire UI state

Read the whole article

Get used to hearing

“Inspired by Om”

@raynos


Mercury


Powered by virtual-dom

So what about

Object.observe?

Simplifies binding

Mutable data

— to a —

Stateful DOM

ES7

But…

— Is Object.observe —

What we want

— rather than —

What we need?

“data binding… appeared to have enough common solutions that it could be standardized… then React came along and all of a sudden it’s not that clear anymore.”

Pascal Hartig, TodoMVC

Is the future rendering

Immutable data

— to a —

Stateless DOM?

“Just because it’s in a spec
doesn’t mean it’s The FutureTM”

Pete Hunt, React

References

Thanks

bit.ly/astateofchange