React.js and How Does It Fit In With Everything Else?

Introduction

A few weeks ago I launched my book the JavaScript Framework Guide which focuses on helping developers and designers confidently choose and quickly learn the JavaScript MVC Frameworks: AngularJS, Backbone, and Ember. As part of my launch, I did a live Hangout Q&A on JavaScript MVC Frameworks and a talk at my local JavaScript user group. I always get a lot of questions about comparing and contrasting the frameworks which at this point I feel confident in answering, but by far the most popular question I got was “what about React?” I had listened to a couple different podcasts about it and done the hello world and was honestly still confused and not very excited about React, but what was I missing? To help me better understand React, I wrote down what was confusing me about React in a series of questions then wrote more code, researched and answered each in this post.

react

Is React a Template Library?

The first thing you see when you come to the React site is the statement “Lots of people use React as the V in MVC.” Oh, so my initial thought was, “it’s a template library like handlebars.js (and its new variant htmlbars), mustache.js, dust.js, and the now deprecated jquery templates. I get it.” If you read on it says “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.” My interpretation of this is they want you as a developer to try it out and don’t want to make it seem hard to get started. The phrase “lots of people” is important, because it hints that other people use it for more than the V in MVC. But is React a Template Library? No. In this Quora answer Pete Hunt, the public face and a contributor to React, clarified:

To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular’s directives instead. [Directives are Angular's way of creating custom elements].

Is React Similar to Web Components?

Is React simply an implementation of Web Components, the upcoming standard for custom HTML5 user interface elements? As mentioned before, Pete Hunt said React components should be compared to AngularJS directives. The Angular team has always clearly stated a goal of directives informing and eventually being compatible with HTML5 Web Components. So saying React is an implementation of Web Components is logical and correct, but doesn’t tell the whole story. Comparing React to Web Components is the same as comparing AngularJS Directives and Ember Components to Web Components. They are similar but not the same thing. React Components are not Web Components because React is abstracted away from browser while Web Components will be a native browser feature.

There is a lot of stuff you get for free when you build like the browser doesn’t exists and this is one thing that distinguishes React from Web Components and Polymer and that kind of thing …they’re getting closer and closer in with the browser, and we’re getting farther and farther from the browser. And I think that our technique is more sustainable in the long term. — Pete Hunt on the Code Winds Podcast

 Are the Virtual DOM and Shadow DOM the Same?

Another thing I was embarrassingly confused about was the question in my head about whether the shadow DOM feature of Web Components and the virtual DOM used by React are the same thing? The Shadow DOM feature of Web Components is not at all related to the the virtual DOM used by React.

The virtual DOM used by React is simply an internal implementation detail of the framework which powers its amazing rendering performance.

Virtual DOM

React keeps two copies of a virtual DOM (the original and updated versions). These two virtual DOM trees are passed into a React function that diffs them and a stream of DOM operations are returned (generally these operations involve setting a property on an element).

React.js Virtual DOM Infographic

Share this Image On Your Site

Shadow DOM

The Shadow DOM feature of Web Components allows us to encapsulate DOM and CSS as a single element on the page. The canonical example of this is the video element in HTML which when looked at in the Chrome web browser with its Shadow DOM feature enabled shows the complex set of HTML elements that make up the implementation of the element, not just a <video> tag.

video-element-w-shadow-dom

Can React be used with other JavaScript MVC Frameworks?

As mentioned earlier the React project’s home pages states “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.” So React can be used with other JavaScript MVC Frameworks by plugging it into a given framework’s web Component technology (Directives in AngularJS, Components in Ember, and smaller item views in Backbone).

Here are some articles that do a good job demonstrating how to use React with those frameworks.

AngularJS and React (using the ngReact directive)

AngularJS and React (using ngReact and a custom directive)

Backbone and React

Ember and React
(this Ember forum post discusses bringing them together and from what I see it should be possible, but I haven’t seen an example online)

Who Uses React.js?

Is React a Premature Optimization if you aren’t Facebook or Instagram?

The React team talks in frames per second when describing their lightning fast rendering. Examples such as this one show lists of 1500 rows taking 1.35 seconds with AngularJS versus 310ms with ReactJs. This begs questions such as, should you ever render 1500 rows (can the user process this much on screen) and is trimming fractions of a second off of load times on reasonably designed pages a premature optimization in most applications?

Here is another article with a similar performance improvement using React with AngularJS.

Can I Work with Designers?

One of the most difficult things to warm up to with React is that the markup is mixed in with the JavaScript. This can make it difficult for developers to work with designers who may be more comfortable in CSS and HTML files and shy away from code. The React team contends that most designers quickly adapt and components can be named to match layers in the PSD document so developers and designers are more easily able to collaborate.

Will React Hurt my Search Engine Optimization (SEO)?

React is significantly more SEO friendly than most JavaScript MVC frameworks because it is based on a virtual DOM you can use it on the server without needing a headless browser on the server such as Phantom.js to render pages to search engine bots.

More specifically, React has the ability to render on the server side and transparently hook up its event handlers on the client, giving you the ability to handle both easily. If you call React.renderComponentToString on the server and then in the browser call React.renderComponent() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

 Is React a Framework for Building Applications or a Library with One Feature?

Is React a Framework? In other words can I use it by itself to build an application or is it a library, smaller in scope and focused on one feature. Again, this Quora answer from React contributor Pete Hunt does compare it to AngularJS but focuses the comparison on one feature of AngularJS, directives. This to me seems to be a fair comparison, React is a library with one great feature for building high performing web components today.

React as an Alternative Architecture

React does have an innovative architecture that can be used to build much more complex applications like the commenting system shown as the tutorial on the React site . The React core is a system for mapping a view hierarchy onto some sort of rendering back end and most often it targets the browser DOM. The React team has stated they are less concerned about the JavaScript reference implementation and instead focused on the architecture of React. In other words, they care about the alternative ideas they are putting out there for building client-side applications more than their specific implementation of them in React.js.

The innovation React brings is in three main areas:

1) An alternative to event and data binding framework architectures.

The React alternative is programming like you are throwing away your entire component and re-rendering it every time because it is simpler and easier to reason about. Event-based and data binding approaches frequently run into timing problems keeping track of which callback gets called first as well as make it difficult to understand how a small change in state will affect performance.

2) Virtual DOM

As described earlier, React generates a virtual description of the DOM that we want and then diffs that description with a previous one and emits the changes. This can be done efficiently and programming becomes simpler. We don’t think about synchronizing pieces of data with bindings and don’t think about events firing. You just have a minimal set of state and paint the browser DOM with it. The performance improvements they have been able to achieve with this approach has definitely gotten other frameworks to take notice.

3) Components

If you break down your application into smaller components (main menu, footer, list, list item, datepicker, etc.) then it becomes easier to imagine building a complex application and it remaining maintainable. This is the promise of component-based architectures. Essentially it is jQuery plugins but standardized and better encapsulated so an Ember component, works with an Angular component, works with a React component and comes bundled with HTML, CSS, and JavaScript and none of it conflicts with other components on your page. This is the dream.

React doesn’t quite deliver on the HTML, CSS, and JavaScript encapsulation story like Polymer, but React does have the huge advantage of not being a native browser feature. This abstraction allows it to be a technology that can be trusted today in the browser and on the server to have great performance and is not waiting for the browsers to catch up.

Are components a better way to build an application?

React Team members say that once you get beyond the simple hello world examples (where React is more code) React scales better with complexity. Components with encapsulated behavior is how they are able to keep the complexity lower by only looking at smaller pieces. One particularly impressive feature of react is how components can be composed and reused inside other components by simply using the markup for the custom component.

For example, CommentList and CommentForm are re-used inside CommentBox by simply writing the custom element tags.

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
           <CommentForm />
      </div>
    );
  }
});

 

Can I build something complex with React?

From my research React seems to have real strengths in its support for rendering on the server and on the client (in browsers) with great performance and all this is available today. The simple programming model is refreshing, easy to learn, and reminiscent of Backbone. The concerns I have mostly center around can you build a complex line of business application with this technology? Are there enough features there to help you build a modern single-page application and have the developer be productive and the code be maintainable. Or is the React library an innovative idea for how frameworks might rethink their architectures but just one feature of a larger tool set that is needed— similar to how Knockout’s data binding evolved the landscape of JavaScript frameworks from Backbone’s simplicity to the productivity of  more recent frameworks like AngularJS and Ember.

Let me know what you think about React.js in the comments below and take the time to time to sign up for my free mini-course on JavaScript frameworks and libraries below.

21 Responses to “React.js and How Does It Fit In With Everything Else?”

  1. Rodrigo July 25, 2014 at 1:00 pm #

    Another important project that uses React now is Atom editor:
    http://blog.atom.io/2014/07/02/moving-atom-to-react.html

  2. Konstantin July 26, 2014 at 3:13 am #

    At Sberbank they use React spatially on some pages, for example on a mortgage calculator page.

    Btw, here is a nice Visual Studio template for React.js which can help to get started:

    http://visualstudiogallery.msdn.microsoft.com/d65d6b29-6dd7-4100-81b1-609e5afce356

  3. The Dude Abides July 28, 2014 at 3:07 pm #

    How about ReactJs! lol

    React is just a trendy term for SubPub which was a trendy term for the Observer Pattern. GOF anyone? And popularized in KnockoutJs by Steve Sanderson. Douglas Crockford was right – know your web history dern it! ;)

    Correction: What about Reactive Extensions – rx.codeplex.com/ ?

    We know about ReactJs from this blog. Thanks!

    • Craig McKeachie July 28, 2014 at 3:39 pm #

      Yep, looks like you confused React.js from Facebook with Rx Reactive Extensions from Microsoft. I’m sure that you will not be the last person to confuse the two. Thanks for commenting.

  4. sb August 1, 2014 at 1:25 am #

    This tutorial shows using react in an angular directive was helpful to me to understand what it is good for: https://egghead.io/lessons/integrating-components-with-d3-and-angularjs

  5. Glen Mailer August 1, 2014 at 8:36 am #

    “Is React a Premature Optimization if you aren’t Facebook or Instagram?”

    Although much has been said about the performance of React, I find that the biggest benefit is how it lets you read, write and reason about your system.

    Building a reactive rich client application becomes much more like just rendering pages from a server. The optimisations allow you to maintain performance while working in this simpler mental model, but the optimisations themselves are not the major selling point to my mind.

  6. Jérémie Grodziski August 1, 2014 at 9:04 am #

    Great article, thanks.
    A must-see framework built on top of React -> Om
    https://github.com/swannodette/om

    It’s amazing to see the power of immutability and the virtual dom.

  7. Tyrone Michael Avnit August 1, 2014 at 9:40 am #

    Phenomenal article. I think you nailed it perfectly. I was always perplexed between the difference / similarities of Web Components and React Components. The ability to render on the server and the client so seamlessly sold me a long time ago. I also prefer working with small components as opposed to one huge integration mess. This allows you to much easily share code / components between projects. Call me mad, but I also enjoy the tight coupling between CSS, JS, and HTML used in Web and React Components.

  8. Zubair Quraishi August 6, 2014 at 9:13 am #

    I also made a framework based on Facebook React. It gives you alot of sweet features like being able to replay a browser session:

    https://github.com/zubairq/coils

  9. Henry Story August 8, 2014 at 9:37 am #

    With the development of scala-js ( http://www.scala-js.org/ ) you can develop apps in Scala that compile to JavaScript. On this foundation two projects have been developed to interact with React.

    • https://github.com/japgolly/scalajs-react – a very functional programming oriented version
    https://github.com/xored/scala-js-react – a more OO version where code written resembles more closely that JS

    With immutable collections from Scala this could then be used to optimise even further the rendering…. Something to follow.

  10. Marc September 14, 2014 at 9:50 am #

    One thing where web components also seem to shine is the availability of out of the box ui components. Already that is starting to look pretty good. I haven’t been able to find much of this in the React space. One thing that always bummed me out working on YUI is that I often had to write components from scratch that had perfect implementations available in JQuery. I wonder if React is going to be the same thing?

    • Shirish December 1, 2014 at 7:35 pm #

      Marc, You may want to check out the set of react component done using material ui concept at http://material-ui.com/

  11. Konstantin Tarkus October 8, 2014 at 1:50 pm #

    By the way, there is also another good app written in React: http://feedly.com
    Promotion: https://github.com/kriasoft/react-starter-kit – React.js Starter Kit

  12. Thomas November 2, 2014 at 3:49 pm #

    Thanks for this write-up Craig, definitely cleared up quite some confusion for me.

Trackbacks/Pingbacks

  1. Dew Drop – July 24, 2014 (#1821) | Morning Dew - July 24, 2014

    […] What is React.js? Another Template Library? Like Web Components? A Framework like AngularJS? (Craig McKeachie) […]

  2. The Morning Brew - Chris Alcock » The Morning Brew #1659 - July 25, 2014

    […] What is React.js? Another Template Library? Like Web Components? A Framework like AngularJS? – Craig McKeachie takes a look at the React.js library, comparing it to other frameworks and libraries to give a feel for what it is all about. […]

  3. Links & reads for 2014 Week 31 | Martin's Weekly Curations - August 4, 2014

    […] React.js and How Does It Fit In With Everything Else? […]

  4. Desktop App Experiments in AtomShell, CoffeeScript and React | Azerothian.net - August 4, 2014

    […] http://www.funnyant.com/reactjs-what-is-it/ […]

  5. Desktop App in AtomShell, CoffeeScript and React | Azerothian.net - August 4, 2014

    […] http://www.funnyant.com/reactjs-what-is-it/ […]

  6. Experiments in AtomShell, CoffeeScript and React | Azerothian.net - August 4, 2014

    […] http://www.funnyant.com/reactjs-what-is-it/ […]

  7. Facebook ReactJS - Ressources pour bien commencer - October 23, 2014

    […] http://www.funnyant.com/reactjs-what-is-it/ […]

Leave a Reply