One of the things I like about React is putting the template and view code in the same file (without string concatenation). Is there a way to do something similar in Backbone? So:

var MyView = Backbone.View.extend({
  render() {
    return (
      <div>blah blah</div>
    );
  }
});

One of the things I like about React is putting the template and view code in the same file (without string concatenation). Is there a way to do something similar in Backbone? So:

var MyView = Backbone.View.extend({
  render() {
    return (
      <div>blah blah</div>
    );
  }
});

• javascript
• backbone.js
• reactjs

3 Answers 3

With Babel you can specify a @jsx pragma pointing to any function with the signature function(type, props, ...children){}.

Here's a minimal self contained example (don't use this in production, it doesn't escape children).

// jsx.js
// don't ask why it's all weird looking...
function stringJsxThingy(function(tag,props){return"<"+tag+"\x20"+Object['keys'](props||{})['map'](function(key){return(key+'="'+props[key]['replace'](/"/,'&quot;')+'"')})['join']('\x20')+'>'+[]['slice']['call'](arguments,2)['join']('')+'</'+tag+'>';});

And assuming you include that on your page, and include the following:

// MyView.js

/** @jsx stringJsxThingy */
var MyView = Backbone.View.extend({
  render() {
    this.$el.html(
      <div class="hello">hey</div>
    );
  }
});

Which when run through babel gives:

/** @jsx stringJsxThingy */
"use strict";

var MyView = Backbone.View.extend({
  render: function render() {
    this.$el.html(stringJsxThingy(
      "div",
      { "class": "hello" },
      "hey"
    ));
  }
});

There are some real libraries out there, but I don't know which interop with jsx well.

That was the direct answer, but why not just use React with backbone? The view system in backbone is so minimal that no serious applications ^{[citation needed]} use it alone.

React's JSX transpiler used to require the use of a pragma ment to specify on object containing tag-named functions to transpile JSX tags to function calls. This made it possible to provide your own backend and use it instead of React.DOM - one of the core developers made a DOM backend as a an example: JSXDOM.

Things have changed a bit since then - the pragma ment is no longer required and React's JSX transpiler assumes you're using React and transpiles to React.createElement() calls. Given that, another option is to simply copy React's JSX transpiling code and tweak it to output something else - for an example of doing this, I did this with MSX, which allows you to use JSX with Mithril.

Babel also has an implementation of a JSX transpiler for React. Babel supports plugins, too. It would be ideal if you could use JSX anywhere and tell Babel what you want it to transpile to with a plugin, but last time I looked, I couldn't see an easy way to reuse the guts of Babel's JSX transpiler and just tweak the output.

You could also keep the template in the view by using a regular DOM building library in your render() method. creationix/dombuilder used to be a favourite of mine when I was working with Backbone, but there are dozens of DOM building libraries in JSON-ML and function call flavours.

The thing about JSX is that it is transpiled to a tree structure so it can be used to create DOM or virtual DOM. If you are using string-based templating you don't really need that. For example, you can use ES6 string template literals:

var MyView = Backbone.View.extend({
  render() {
    const name = this.model.get('name');
    this.$el.html(`
      <div class="hello">hello, ${name}!</div>
    `);
  }
});