Recently, the idea of preventing manual syncing of state with UI have become popular. These vary from large frameworks to browser-native solutions. What problems does data-binding solve?
Updating the DOM
The main idea of web development is to get information from into a visible interface. Ways to achieve this vary, and at one poitn the norm was to deliver HTML to the browser with server-side templating. As the web evolved, richer interactive components like date-pickers and autocomplete serach boxes enhanced the static html and provided new ways to display and alter state.
With the advent of Javascript templating and the "single page static app", Javascript libraries like Jade and Handlebars are popular choices. Even though replacing contents of an element via
element.innerHTML = template()
is quick in today's browsers, replacing tons of elements frequently, such as rerendering every row in a list a table; can get slow and lead to unresponsive apps. This sometimes leads to point-updating the DOM, which is duplicated code and effort.
Real Data Binding
The future may be hear, with React, a library from Facebook. Reach offers a 'virtaul dom' that can bind to data; and updates automatically when that data changes. Better yet, the virutal DOM is designed to be lightweight and efficient (it does not have the weight and cicular references of the real DOM). It actually diffs itself during updates to minimize the changes to the real DOM (in a way doing what developer must do manually to achieve the best performance).
On the downside, one must buy into the way React treats markup, literally a node tree. A transpiler called JSX transforms HTML markup into this tree structure automatically, but this requirement still prevents the integration of React into many projects.
A Native Standard?
For such a core function of a browser, I believe we need to move towards a way to bind data that is supported and optimized by the browser. Web Components is set of standards that aims to alleviate the data binding challenge and others. It is mostly supported by Chrome and Firefox, with several projects such as Polymer offerring polyfills for Internet Explorer and older browsers.
The relavant part of the Web Components standard is HTML Templates, which provide a native way to turn data into markup, that supports data binding.
More Reading
- http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer