Facebook's React, and the signal:noise ratio

A (very) brief history of web development

The last few years of website development have seen a significant shift from the server to the client, giving rise to the concept of a web application, and the Single Page Application. The space has been most recently dominated by AngularJS, along with alternatives like EmberJS, Meteor, BackboneJS, KnockoutJS and others.

With the recent rise in prominence of Facebook’s React, we often hear it mentioned in the same breath as these frameworks. However, React by itself is not a framework: it is different in scope, and in its approach to building user interfaces.

So where does it fit in?

Many developers use React as the View layer of a conventional MVC pattern for UI development. It is essentially a library, so it’s not a comprehensive tool for building a web application – it needs to be used in conjunction with other libraries.

So in order to build a fully-functional web application, we need to choose what architecture to use (MVC? MVVM? Flux? Redux?), and then choose complementary libraries and frameworks. This provides us with the flexibility to choose which architecture to implement, and which libraries to use.

You can, for example, use React to build an MVC application in tandem with AngularJS, Backbone, Meteor (and many others), or standalone as part of your existing application. Or you might like to use one of the more recent architectures and libraries that have been built to work with React, such as Flux (eg, Alt) or Redux. There are also react bindings for popular server-side frameworks such as Rails or Django.

What else is there to know?

It’s important to recognise that there will be some challenges:

learning the React way of doing things
choosing – and learning – other architectural components to use alongside React
changing your current stack – the risk of losing the investment made in current frameworks and tools

However:

React is fast: use of a “virtual-DOM” make page updates incredibly fast
the React ecosystem has a low barrier to entry: it’s just Javascript
it allows us to leverage recent Javascript advances like ES6 (classes, modules, and much more for Javascript) and JSX (XML/HTML syntax in Javascript)
it provides programming paradigms that address the requirements of a modern web application (declarative user interfaces, separated UI state management)

So who would use React?

React is no longer the plaything of the hipster: along with Facebook and Instagram, many major players have invested in React: Automattic, Atlassian, Uber, TheTrainline, Khan Academy, WhatsApp, WordPress, Yahoo… It has been used in production to serve millions of users, so if you are considering a move to React, you will be in good company.

React also brings some major advantages to the technical leader and the front-line developer:

leverage your existing Javascript skillset without having to learn framework-specific syntax (for example, Angular’s ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id")
write maintainable code: React addresses a small part of a web application, and does it extremely well; complementary libraries do the same
build web applications that are fast: performant websites attract and retain visitors

And who wouldn’t?

Although React has clearly moved beyond the bleeding edge, it still has a fair way to go before gaining widespread acceptance. This means that if the nature of your business is to be risk-averse, then React is unlikely to be your tool of choice at this point in time.

And if you already have a heavy investment in other technologies, the cost of moving your codebase over to React may prove greater than the resulting benefit. (But it’s also worth noting that it is a simple matter to progressively introduce React into an existing web application).

Conclusion

These are exciting times for web application development in general, and React in particular. The latter has come a long way in a short time, and its ecosystem is a hive of activity.

With so much processing being shifted from the server to the browser, performance and maintainability of your web application is only going to become more important. Embracing React is a smart way of being prepared for the future.

So whether you are keen to jump right in, or are not yet ready to take the plunge, keep an eye on React – it’s going places.