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

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

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

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.

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.