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.

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).

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.

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.

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?

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.

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.

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! 😉

“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.

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.

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.

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?

In my opinion, ReactJS isn’t a complete framework. With angular I have all features a webapp requires. Instead with ReactJS I should search a good library for XHR requets, websocket, cookie manager, etc.
I appreciate the idea of nested views but I think this isn’t sufficient to call this a framework.

if you don’t Support Browsers not even the browser vendors themselfes Support anymore, xhr, websocket, Cookies can be done with plain JavaScript, no frameworks needed. it’s really just a few tiny lines of code, and then it’s done.

Christ! Another damn JavaScript framework. You guys. All you have to do is learn JavaScript and the browser DOM and you can do anything you want. What the hell is so difficult about that? You wanna be a programmer? Learn to write code. You’re not going to do that by using somebody elses because that’s all it is. When you look at this stuff its the most unclean and unreadable stuff you could ever have the misfortune to come across in suppirt mode.

Hey really awesome article! So we are looking to move muzenly to a js only stack. We already use express, mongo and socket.io and also magento. we considered using angular bec its well documented. However, we realized for discovering festivals we need SEO so we considered React. React seems very intuitive but Flux does not. Hence we are confused whether only react without flux would work or we need angular plus react and if so, how do we use react to render from the server for discovery of festivals but angular for all other client side stuff. Any good references and guidance would be greatly appreciated ! Thanks for the patient read

If you have SEO needs it is possible to get it working using Angular 1.x but not easy (easy to mess up/lots of setup and maintenance).
React does support an initial server render so can be easier for SEO but you need a Router like React router which doesn’t come with just React.
React plus Flux vs React plus Angular is comparing apples and oranges. I would not do React plus Angular unless you had maybe one page where you were having Angular performance issues rendering a list and needed performance but even then if you know what you are doing with Angular you most likely won’t need React. In general the questions are you are too broad to answer in a blog post comment reply. I would be happy to help you out as a mentor if that makes sense for you: https://www.codementor.io/craig.mckeachie

This article I wrote some time ago, but it does seem to be catching on in Enterprises for line-of-business applications particularly when paired with the react-router and a data architecture such as Flux and most people seem to prefer Redux as an implementation of the Flux pattern.

[…] 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. […]

[…] 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, […]