Object.observe() is still unofficial; it’s so far only incorporated into Chrome, which means developers who use it can’t count on it working their apps working in others browsers such as Firefox or Apple’s Safari. And it’s not clear when—or even whether—other browser makers will jump on the Object.observe() bandwagon.
What Is Object.observe()?
I asked Rafael Weinstein, a software engineer at Google who played a big role in Object.observe() and Chrome integration, to explain what it is and what it does.
The main advance Object.observe() offers is a feature called two-way data binding. Translated from codespeak, that means it ensures that changes in a program’s underlying data are reflected in the browser display.
“In the [Model View Controller] pattern, you have the model [i.e., underlying app data] that describes the problem you want to solve and then you have this view that renders it,” Masad told me. “It turns out that translating the model logic [i.e., the app’s data structures] to the user interface is a really hard problem to solve as well as the place in the code where most of the bugs occur.”
“When you have true data binding, it reflects automatically in the user interface without you putting in any ‘glue’ code in the middle,” Masad continued. “You simply describe your view and every time the model changes it reflects the view. This is why it’s desirable.”
It’s 2014. Where’s My Object.observe()?
TC39 members include developers from Google, Mozilla, Microsoft, and Apple. Weinstein, who submitted the Object.observe() proposal, said that since developers from these companies approved of adding it to ECMAscript, he’s optimistic that they’ll also want to add Object.observe functionality to their companies’ own browsers.
For example, Weinstein is also at the head of a project called Polymer or observe-js, a library that uses Object.observe() if it’s available, and alternate methods if it isn’t. That way, developers can harness Object.observe() whenever possible, although they still have to be prepared in case their program runs somewhere it’s not supported.
This Is Your Code On Object.observe()
For example, if you are a developer who builds a lot of contact forms for websites, you might have a library of software functions that shortcut the process of inserting a contact form in a website. So when the Object.observe() API is released, libraries will be built to make two-way data binding something developers can do as easily as inserting a library in their code.
The Angular framework uses something called “dirty checking.” Every time you add to your code, Angular checks to see what changed. It checks even if the view hasn’t changed at all. This continues once the app is deployed; every time the user inputs a change into the app while using it, the dirty checking code checks if it needs to refresh the display in response. This adds load time to every screen of your app.
Goodbye, Cruel Wrappers And Dirty Checking
Igor Minar, lead developer on the AngularJS framework, said developers who use Angular won’t have to work with Object.observe directly.
“Object.observe() is a low level API, which is kind of awkward or inconvenient to use directly,” he told me.” That’s good because by providing such low level API the platform enables us to built on top the API and create higher layers with more opinions.” Object.observe() is already slated for addition as a feature in AngularJS 2.0.
Early versions of Object.observe() have already given Angular a performance boost. In a test, dirty checking took 40 milliseconds compared to Object.observe()’s 1 to 2 milliseconds. In other words, Angular became 20 to 40 times faster while using Object.observe.
“Object.observe() is a low level feature that framework authors will use,” said Masad. “Developers using those frameworks won’t notice a different except for higher performance programs.”
Screenshot of Google engineer Addy Osmani introducing Object.observe() at JSConf EU