@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?