Backbone With ES6

DZone 's Guide to

Backbone With ES6

If you're using Backbone, you too can use Ecmascript 6 classes! Here's how!

· Web Dev Zone ·
Free Resource
Dan Abramov @dan_abramov

I don’t know about you but I’m amazed by how many solutions there are for writing maintainable apps these days. Remember 7 years ago.

Ah yes, Dan Abramov. How right he is! Building maintainable apps for the browser has never been easier or more fun. Life is great.

That is, if you’re Dan Abramov and you spend your days building the future of web technology. I don’t know how he built that life, but I’m impressed.

Swizec @Swizec

@dan_abramov and here I am in the real world, looking at all these solutions, and thinking "Man, 7 years from now is gonna be nice"

The real world is not like that. For us, building businesses is the important part, not building technologies. We’re building technology in the service of business innovation.

Unless it’s a weekend hack project, or a fun toy for the soul, we don’t get to throw everything away and re-engineer from scratch every 6 months when new libraries become available. We don’t even get to do it every year.

If you can’t make a business case for it, it doesn’t happen.

But we do what we can. We evolve rather than rewrite. Baby step after baby step, our tech stacks become better and more fun to use. They are driven by business needs rather than creature comforts.

We’re highly paid professionals, after all. You wouldn’t expect a race car driver to only drive cars with air conditioning, would you? (Hint: There’s no such thing as AC in race cars. It’s too heavy.)

All that to say that if you’re still using Backbone, you too can use ES6 classes!

/giphy partyhard

Here’s How You Do It

Let’s take a basic Backbone View. It renders as a div element, uses a template, and responds to user events. A click counter, for example.

In traditional Backbone, it would look like this:

var Counter = Backbone.View.extend({
tagName: 'div',
model: new Backbone.Model(),
template: Handlebars.compile('{count} <button>++</button>'),
events: {
'click button': 'buttonClick'
initialize: function () {
this.model.set({count: 0});
this.listenTo(this.model, 'change', this.render);
render: function () {
buttonClick: function () {
this.model.set({count: this.model.get('count')+1});

Cool, huh? Don’t worry if you don’t know what any of that means; you’re just not the target audience for this article.

The quick explanation is that we create a View backed by an anonymous Model. The model holds a count value, we listen for click events on the button element, and we increase the count when they happen. And we listen for change events on the model to decide when to re-render.

If this sounds similar to React, that’s because it is. Backbone was, and still is, very close to React in its core ideas. React just happens to implement them better and make it easier to better architect your app.

That same View would look like this in ES6:

class Counter extends Backbone.View {
constructor() {
this.model = new Backbone.Model({count: 0});
this.tagName = 'div';
this.template = ({ count }) => `${count} <button>++</button>`;
this.events = {
'click button': 'buttonClick'
this.listenTo(this.model, 'change', this.render);
render() {
buttonClick() {
this.model.set({count: this.model.get('count')+1});

We used constructor instead of initialize, and we moved all of the properties into that function. We also used ES6 template strings instead of Handlebars for templating, and we didn’t have to write function even once.

It’s the same amount of code, the same amount of logic, a marginal improvement in styling, and the dubious usefulness of subclassing. Big whoop.

Every other part of your codebase, new or old, can use this View the same as a traditional ES5 Backbone View. Or it can subclass. That part is easier.

But… Why Do This?

It feels good.

backbone, ecmascript, es6, javascript

Published at DZone with permission of Swizec Teller , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}