Tuesday, September 19, 2017

What was Backbone.js and why did it die?

As AngularJS (Angular 1.x), Angular (Angular 4) and React rose, Backbone.js declined. What was Backbone.js? Why did it decline?

Let's just dive in and look at some Backbone.js design and features.

Backbone.View.extend(), Backbone.Model.extend(), Backbone.Router.extend(), etc.

Backbone.js is based on a Java-style class structure with classes, objects and inheritance. It makes a conscious choice to embrace this approach, instead of JavaScript prototypical inheritance. The extend() method creates a subclass of the "class" which it is invoked upon. While other frameworks adopt this approach as well (usually by upgrading to TypeScript or ES6) for their view classes, Backbone.js is rather dogmatic about it and, as we will soon see, it requires a lot more classes and a lot more objects whereas other frameworks were more limited and less, well, so darned adamant about creating all those things.

_.bindAll() call in a Backbone.View constructor

When a new Backbone.View class is created, its constructor often contains multiple calls to _.bind() or a single call to _.bindAll(). I have written about the function of _.bind() before so I won't repeat that here. OK, OK, I'll repeat it a little. _.bind() converts a method into a standalone function call. In Backbone.js, this is often required because event handlers only work with functions, not with methods. Backbone.js uses events extensively so the _.bind() calls are necessary. Calls to _.bind() and _.bindAll() confuse many people and cause odd errors when not used so Backbone.js got a reputation as being confusing.

React requires a bind() call in some but not all circumstances but it is not designed around events in the same way that Backbone.js is. The use of _.bind() and _.bindAll() isn't a deal killer but certainly doesn't help Backbone.js' reputation.

render() method of a Backbone.View

Every Backbone.View class has a render() method, similar to React. The render() method in Backbone.js is usually a string concatenator, something like an old-fashioned version of React, before JSX was widely adopted. In Backbone.js, it is additionally encouraged to call the render() methods of child Backbone.View objects, take the returned strings and insert them in the correct position in the parent Backbone.View string. All this string concatenation feels very awkward and old-fashioned.

events property of a Backbone.View

The events property looks something like this:

events: {
 'click button#add': 'addItem'
}

It is a map with magic strings that makes nobody happy.  The “click” refers to the onclick event; the “on” prefix is dropped.  "button#add” is a jQuery selector.  “addItem” is the method to invoke on the current object.

Backbone.js is the one framework that separated event handlers from the HTML. This approach provides no benefit to the developer and is somewhat inconvenient and buggy.

Backbone.Model

Backbone.js separates views and data; Backbone.Model was the base class for data. Instead of working with plain old JSON objects like many other frameworks, Backbone.js expects JSON objects (from the server) to be deserialized into full blown Backbone.Model objects.

Backbone.js data objects support events and event handlers (as do view objects). The idea seems to be that, once JSON data is converted into full-blown Backbone.js objects, the view objects and data objects are stitched together with the right events.

The Backbone.js data objects is an alternative to AngularJS' $scope variable or React's props variable (argument). Backbone.js event mechanisms require the developer to orchestrate how data changes propagate to the view. In contrast, AngularJS' digest cycle and React's virtual DOM and diffing algorithms take care of this orchestration for the developer.

Backbone.Collection

Backbone.Collection is the Backbone.Model version of an array. Instead of using ordinary JavaScript arrays, Backbone.js requires the developer to deserialize arrays into collections so that events and event handlers can be used to monitor data changes.

Backbone.sync()

Backbone.sync is an Backbone.js specific implementation of something like GraphQL but is incompatible with GraphQL. Its API is reminiscent of server side persistence libraries like Hibernate with methods like fetch() and save(). Backbone.sync uses HTTP operations like GET, POST, PUT and DELETE to perform server CRUD operations using pre-determined URLs. A server needs to confirm to Backbone.sync's conventions in order to work with Backbone.sync.

GraphQL has attained some level of popularity due to its support from Facebook; Backbone.sync never has.

Backbone.Router

Backbone.Router supports partial views. It seems OK.

Underscore.js templates

Backbone.js supports HTML templates via Underscore.js.

An Underscore.js HTML template looks like:

<h1><%= title %></h1>
<% if (title === 'first') { %>
This is the first title <% } %>

Backbone.js also supports other libraries like Mustache but these must be downloaded and integrated separately. This presents a problem: you cannot re-use templates that were written in one library with a different library so templates were mostly not reusable.

Backbone.js does not provide any support for dynamic data in the template. In AngularJS, Angular or React, if the data changes, the template (or JSX) is automatically re-rendered whereas, with Backbone.js templates, the developer must detect the change, invoke the template directly and re-render the updated template in the right place.

Also, Backbone.js does not provide any support for (reusable) components. In AngularJS, directives allow the developer to insert a component with HTML and behavior. Similarly, JSX in React allows a developer to insert a component with HTML and behavior.

Backbone's weakness in templates and lack of component functionality is one of its biggest weakness and an important reason why it is not popular.

Overall

Backbone.js is a very awkward framework, requiring much of the developer trying to use it.

It is also a very ineffective framework, lacking popular features while providing other features that were not that useful.

Backbone.js is very imperative, manually connecting everything with events and event listeners, instead of declarative, changing JSX (in React) or changing HTML templates (in AngularJS) to invoke the event handler.

No comments:

Post a Comment