I just discovered React this year, after actively avoiding for a while whatever the new hotness was in JavaScript land. In my last job at Onswipe I had worked with jQuery and CoffeeScript first, then with Ember and finally with Aura (ugh! I hated Aura) and I got sick and almost gave up on all this front-end crap. Then I discovered React.

See, I’m not an engineer (even if that has been my title at times), I’m a designer and I like to code. And even when I make an effort to understand stuff like Isomorphism and Declarative Programming and the Virtual Dom, on the end all I care for is what feels right and what allows me to be awesome and make cool things. React just feels right.

Wait, there’s HTML in your JavaScript

I know. I was there when the Web Standards Movement was a war worth fighting. I read Zeldman’s and Dan Cederholm’s and Dave Shea’s blogs. I even gave talks about the huge importance of separating behaviour and appearance from content.

And yet here I am advocating for this abomination:

What horrible thing happened to me? Reality, that’s what happened.

I sort of discovered components while doing an Ad Builder

At Onswipe I was in charge of building our in-house Ad Builder (I know, I love ads too) and I chose Ember.js for the task. It was OK at first, I wanted a desktop-like WYSIWYG interface akin to PhotoShop or Illustrator and Ember’s data-binding was perfect for it.

This design is 4 years old but I still like it :).

While doing that, I soon realised that I needed reusable bits of UI that encapsulated behaviour, content and style in an extensible package. Ember didn’t have components back then, but kind of made it work using a combination of EmberViews which could be extended like classes and Handlebar templates. Good times.

Since I was exiled in the virtual basement of the company, I didn’t knew that the real engineers at NY were getting to the same conclusions and that the next version of the product will be component based. Alas, they were going to use Aura (Did I mention that I hate Aura. Because I do).

The thing is: the idea of components are cool. Maintaining at least three separate files for each component (one being template code, one for JavaScript and one for styles)? That was less than ideal.

Our Gruntfile was, like, half our codebase.

Enter React and JSX.

Back to that gist:

This is a silly example. But if you look past the awkwardness of having that not-quite-HTML markup inside your JavaScript code, you will appreciate the beauty of having it all integrated in one file.

I know that it took me some time to understand that this was what I have been looking for. And the concepts were so new and so foreign to me that I needed somebody to explain react to me like I was five. This was as far from jQuery spaghetti as I’ve ever been.

The real power of React, though, comes trough composing. When you start using components to isolate your app’s functionality into building block, then everything starts to make sense.

Components are like Lego™ blocks

The atomic unit of React is the component.

Components are instances of a special class of object that knows how and when to render itself and how to behave under certain circumstances. In other words, it is a neat package of markup and behaviour (and maybe style) that can both contain and be part of other components.

Composing is hard to understand at first. In my first attempts I was just attempting to replicate BackBone.View functionality using weird syntax. It took me a while to understand that components are flexible building blocks and they are better when they are small.

If I had to write the Ad Builder today, the entry file could look something like this:

Each of this components (TopBar, Inspector, etc…) would be composed of smaller components. And many of these smaller components will be reusable (I’m thinking of Button, ColorPicker, FilePicker components, etc.).

Isn’t that beautiful? I think it is. For me It’s like I finally discovered the best way to build apps.

And I‘m aware of the other benefits of using React: It’s stateless, it’s reactive, the virtual DOM etc. And maybe these are more important from an engineering standpoint, but from the perspective of a Designer Who Codes and someone who just likes to build beautiful products I’m only using React because I like it better than anything I ever used before and it just feels right.

P.S. I’m sorry for hating on Aura, it may be that it was the project using it what I actually hated.