How I Learned to Stop Worrying and Love React

You could say JavaScript frontend development advances at a rapid pace. Every few months new technologies are introduced. One of the perhaps most interesting recent ones is React.js. It is a library developed by Facebook that focuses on rendering views.

Most importantly it bridges the gap between frontend and backend. It is possible to render the markup on backend and have frontend pick it up seamlessly. It is blazing fast thanks to its DOM diffing algorithm. It is so performant that even Atom, an editor developed by GitHub, is moving to use it.

I see solutions such as React as a natural next step. Backbone, Angular, Ember and such will still have their place. You can even mix React with existing technology to enjoy some of the benefits.

Web Components can be seen as a competing approach. polymer.js, a project established by Google developers, would be the library check if you want to learn more. Maybe Web Components are the way of the future.

Getting Started with React

Time to react by
Ian Nolan(CC BY-SA)

There is not that much to learn in React. It is more about understanding some basic concepts. When coding in React you'll split up your view into smaller components that may contain others. They can contain some internal state and properties which may be passed to the component to render. You can also deal with events at these components and then manipulate the state.

The fastest way to understand the way it works is to check out the official Fiddle and then try out some tricks available in the documentation. The Fiddle I linked to relies on something known as JSX. It is an XML like syntax designed to make it easier to write templates. There are tools available that can render it to regular JS. You can also write the JS directly although it's more cumbersome.

The biggest gotcha with using JSX is that it gets more difficult to use tools like jshint since they won't recognize the custom syntax. EDIT: It is possible to use a wrapper such as jsxhint to lint JSX code. (Thanks Esa-Matti.)

Invoicing Demo - Combining React with JSON Schema

I wrote a small invoicing application as my first React exercise. Try filling some fields. You can get an invoice simply by printing out a pdf.

Technically it is somewhat simple. Initially I wanted to use Angular and some form library that supports JSON Schema well. The idea was to generate a form based on schema and then use that to control model that is tied with the preview you can see at the demo. Unfortunately I was unable to find a library that supported nested properties (ie. objects inside array).

As I didn't feel like hacking some existing library and React has been on my list of technologies to learn and adopt for a while, I started looking into a JSON Schema based library. I managed to find one in form of plexus-form. After fiddling with their demo for a while I realized I should go with it. Even though it wasn't aesthetically most pleasing the core worked very well. After some iteration with the author the library we made it fit my purposes perfectly.

Besides React and plexus-form I adopted Gulp in this project. It is a streaming build tool that avoids some of the complexity of Grunt. Apparently it is faster and best of all given all the configuration is in code it's easy to maintain and develop using it.

The final bit of new tooling I adopted was Tincr. It is a Chrome plugin that allows bidirectional editing of CSS. I like to fiddle with CSS in Chrome Inspector and then move the changes to actual CSS. This plugin allows me to skip that latter part and makes it much faster to do tweaks.

If you study invoicing app source, you'll notice I've split it up within components and a form schema. The components are fairly self-contained. I could for instance reuse Form pretty much as is in some other project. I also love the fact that if I want to add a new field and hook it up with the preview, I need to modify just the schema and preview template.

You can also see that I used something know as LocalStorageMixin in my form. Adding that little line of code there allowed me to persist the component data within localStorage so it's available when you reload the page. How neat is that?

The build is based on browserify and various other tools (BrowserSync, reactify etc.). Browserify allows you to use the same module scheme you have gotten used with Node.js. This workflow also enables server side rendering with minimal effort as an example by mhart illustrates!

Weather Demo - Combining React with FRP

Even though React works great as is dealing with events could get hairy. Functional Reactive Programming (FRP) provides a solution for this problem. It allows you to control events on the level of streams. You can modify these streams for your purposes and then pipe them to your components. As it happens React and bacon.js, a FRP library, fit very well together.

To make things easier there is a BaconMixin that provides the sort of functionality that makes this type of work simple. I still don't understand every details of it but to get started I forked the original GitHub based example of the library. I modified it to fetch weather information from OpenWeatherMap API. It is not very aesthetic in its current form but it was more about piping.

As FRP is still quite a new topic and not that well understood I recommend checking out André Staltz's excellent introduction. It is one of those abstractions that might change frontend development as we know it.

Conclusion

You could say I have been quite impressed by React so far. It simplifies development a lot. Having stellar performance doesn't hurt. Compared to something like Angular there is far less to learn. Of course it's a different beast. Apples and oranges.

To scale up from just doing cool little things with views, you could look into rrouter, a routing library, and Fluxxor. Latter provides tools that allow you to implement something known as Flux architecture.

If you need to implement small interactive views I would say React can be a very good fit. There are some gotchas of course (ie. dealing with Bootstrap plugins) but overall the experience has been very positive.