This week I rolled out a React compiler for Mimosa. To show off how well the Mimosa and React play together, and how easy it is to get started, I put a demo Todo app together, because, lets face it, its not a thing unless there's a Todo app.

The demo Todo app is a Backbone project that uses React for views, Require.js for module loading and Bower for dependency management. That is all managed by Mimosa, the build tool, which also kicks in server support, live reload, JSX compiling, JSHinting, concatenation and minification.

Backing up, React

I was in attendance at JSConf 2013 when React was introduced. It was immediately ripped apart by the folks in the room. Twitter was red with the blood of a fresh new UI framework victim. The critiques can be boiled down to "Is that... XML embedded within JavaScript? OMG, die".

Since then, React has not gone away. It's gathered together over 5000 stargazers on GitHub and the buzz has increased.

So, why? Facebook threw up a blog post on "why react", and one of the key reasons is...

Speed, Baby, Speed

Rather than screw up an explanation, here's the important part from the "why react" blog post.

When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced, and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM.

It's the diff that is the win. And at least until HTMLBars comes out, it seems to be the big speed winner.

And its just the View

Again, quoting React:

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

React blends nicely with your existing stack as the View, especially if your UI stack doesn't place a hard dependency on its View layer. Like, for instance, if you are using...

Backbone

Backbone needs no introduction, but unlike some of the other leading client-side frameworks, Backbone places no limitation on your templating language. Underscore, Dust, Handlebars, whatever.

What you lose is tight integration and data-binding for free (unless you are using, say, Ractive for your templating solution).

Backbone's loose coupling and React play together nicely. Instagram is, for instance, "a 'single page' web app built entirely with React and Backbone.Router."

The popular TodoMVC site has a great example of using Backbone and React together.

XML in your JS

One of the chief concerns with React is all the XML in your JavaScript. Facebook calls it JSX.

var HelloMessage = React.createClass({  
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

Yeah, so, maybe count me in the group of folks who is sort of put off by that. I just spent the better part of a decade hammering home to junior developers that markup in your JavaScript is bad. But its probably something I can get used to, probably.

Anyone looking at that might also realize that every JavaScript runtime they know of will not be happy with that.

So, as you probably would expect, that code needs to be compiled/transpiled.

Compiling JSX

In the Backbone/React Todo example a library loaded in the browser performs the compiling. But we all know that's not a good idea. It works great for demos, but it won't for your app.

Facebook created react-tools which can, among other things, be used to compile JSX on the server.

mimosa-react

I created the JSX/React compiler for Mimosa specifically to wrap react-tools and allow Mimosa devs to compile .jsx on the fly. As with all the other Mimosa compilers, when you are running mimosa watch Mimosa will recompile your .jsx and if you are using live-reload, refresh your page immediately.

Mimosa React Todo App

To show the compiler off, but also to show React working within a larger, more fully-featured Mimosa application I started with the TodoMVC example and made the MimosaReactBackboneTodo demo app.

Here's the config for the Todo app. No other config is needed.

  "modules": [
    "copy",
    "server",
    "jshint",
    "require",
    "minify-js",
    "minify-css",
    "minify-img",
    "live-reload",
    "bower",
    "react"
  ]

This gives you...

• React compiling
• jshinting of compiled JavaScript
• concatenation via r.js
• minification of JavaScript, CSS and images
• bower support
• require.js support like path verification
• live-reload
• hooks into the node server that comes with the project.

Give it a try!

1. npm install -g mimosa
2. git clone https://github.com/dbashford/MimosaReactBackboneTodoList react
3. cd react
4. mimosa watch --server or mimosa watch -s
5. Open localhost:3000

Enjoy! Any questions, just ask!