Insights

Facebook’s React, and the Signal:Noise Ratio

By
Matt Calthrop
January 15, 2016
Share this post
https://opencredo.com/blog/facebooks-react-and-the-signalnoise-ratio
Copied!

So, you’ve started to hear a lot about React, the Javascript library developed by Facebook, but is it something you need to investigate? It’s time to distil the signal from the noise, position React amongst its rivals, and provide an indication of where it currently would – and would not – be a suitable fit.

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.

Further reading

For starters:

Architecture:

Resources:

  • Awesome React – A collection of awesome things regarding React ecosystem
  • Complementary Tools – development tools that complement React, from Facebook
  • js.coach – an opinionated catalog of open source JS packages
  • react.rocks – React examples, demos, code

Digging deeper:

This blog is written exclusively by the OpenCredo team. We do not accept external contributions.

Share this post
Copied!
Software Consultancy
Matt Calthrop
Consultant at OpenCredo

Looking for a hands-on software delivery partner?

Book in a quick 20 minute chat with our consultants to explore your specific project and objectives.

OpenCredo-Graphic Illustration: Brainstorm
OpenCredo-Graphic Illustration: RocketShip