Another pass over "Why React".

_posts/2013-06-03-why-react.md

@@ -4,108 +4,98 @@ layout: post
 author: Pete Hunt
 ---
 
-There are a lot of JavaScript MVC frameworks out there. Why did we
+There are a lot of JavaScript MVC frameworks out there. Why did we build React
-build React and why would you want to use it?
+and why would you want to use it?
 
 
-## React is not an MVC framework.
+## React isn't an MVC framework.
 
-React is a library for building large complex user interfaces with
+It's a library designed for building big UIs. The type where you have lots of
-many reusable components that handle events, present backend data,
+reusable components that are handling events, presenting backend data, and
-and accept user input. At the same time, React was built to integrate
+accepting user input. The type where you have to integrate with legacy code, and
-with legacy code and to support older browsers.
+support legacy browsers.
 
-In the traditional MVC pattern, React is used to build the view. React
+In the traditional MVC pattern, React is used to build the view. React lets you
-lets you decide how to manage your data and business logic, be it
+decide how to manage your data and business logic, be it outside of React
-outside of React components or within.
+components or within.
 
-## React does not use templates.
+## React doesn't use templates.
 
-Traditionally, web application user interfaces are built using
+Traditionally, web application UIs are built using templates written in
-templates written in templating languages or HTML directives. These
+templating languages or HTML directives. These templates dictate the full set of
-templates dictate the full set of abstractions that you are allowed to
+abstractions that you are allowed to use to build the user interface.
-use to build the user interface.
 
-React approaches building user interfaces differently by breaking them
+React approaches building user interfaces differently by breaking them down into
-down into smaller, composable and reusable **components**. Although
+smaller, composable and reusable **components**. Although this means we have
-this means we have JavaScript generating markup, we think this is an
+JavaScript generating markup, we think this is an advantage over templates for a
-advantage over templates for a few reasons:
+few reasons:
 
-- **JavaScript is a flexible, powerful programming language with the
+- **JavaScript is a flexible, powerful programming language with the ability to
-  ability to build abstractions.** This is incredibly important in
+  build abstractions.** This is incredibly important in large applications.
-  large applications.
+- By unifying markup and logic with a common language, applications can
-- Logic and markup are intimately tied and are both part of the
+  implement more appropriate separations of concerns.
-  presentation layer. So we are unifying the presentation layer, not
+- Large projects usually do not use WYSIWYG editors for production code, so
-  breaking separation of concerns.
+  breaking apart markup from code creates friction without any real gain.
-- Large projects usually do not use WYSIWYG editors for production
+- By baking an understanding of markup and content into JavaScript, there's
-  code, so breaking apart markup from code creates friction without
+  **no manual string concatenation** and therefore less surface area for XSS
-  any real gain.
+  vulnerabilities.
-- By baking an understanding of markup and content into JavaScript,
-  there is **no manual string concatenation** and, thus, less surface
-  area for XSS vulnerabilities.
 
-## React updates are dead simple.
+## Reactive updates are dead simple.
 
 React really shines when your data changes over time.
 
-In a traditional JavaScript application, you need to look at what data
+In a traditional JavaScript application, you need to look at what data changed
-changed and imperatively make changes to the DOM to keep it up-to-date.
+and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
-Even AngularJS, which provides a declarative interface via directives
+which provides a declarative interface via directives and data binding, requires
-and data binding, requires a linking function to manually update DOM
+a linking function to manually update DOM nodes. Remember, React components are
-nodes. (Remember, React components are flexible and expressive, much
+flexible and expressive, much like directives and less like templates in
-like directives and less like templates in AngularJS.)
+AngularJS.
 
 React takes a different approach.
 
-When your component is first initialized, the `render()` method is
+When your component is first initialized, the `render()` method is called and a
-called and a string of static HTML is inserted into the DOM. When your
+string of static HTML is inserted into the DOM. When your data changes, the
-data changes, the `render()` method is called again. We simply diff
+`render()` method is called again. We simply diff the old return value with the
-the old return value with the new one and determine the fastest way to
+new one to determine the fastest way to update the DOM. So if only a single
-update the DOM. So if only a single attribute on a single element has
+attribute on a single element changes, that's all that React updates.
-changed, that is all that React updates.
 
 We call this process **reconciliation**. Check out
-[this jsFiddle](http://jsfiddle.net/fv6RD/3/) for an example of
+[this jsFiddle](http://jsfiddle.net/fv6RD/3/) for an example of reconciliation
-reconciliation in action.
+in action.
-
+
-Reconciliation will usually be faster than handwritten code because
+Reconciliation will usually be faster than handwritten code because React knows
-React knows about the entire state of the page and can do cool tricks
+about the entire state of the page and can do cool tricks like batching reads
-like batching reads and writes and picking the fastest subset of DOM
+and writes and picking the fastest subset of DOM mutations to perform.
-mutations to perform.
+
-
+The way we're able to pull this off is by constructing a very fast, lightweight
-The way we are able to pull this off is by constructing a very fast,
+representation of the DOM which knows which parts are dirtied and which parts
-lightweight representation of the DOM which knows which parts are
+are clean. **The data returned from `render()` is neither a string nor a DOM
-dirtied and which parts are clean. **The data returned from `render()`
+node -- it's a lightweight description of what the DOM should look like.**
-is neither a string nor a DOM node -- it is a lightweight description
+
-of what the DOM should look like.**
+Because this re-render is so fast (on the order of 1ms for TodoMVC), we don't
-
+need the end user to explicitly specify data bindings. We've found this to be an
-Because this re-render is so fast (on the order of 1ms for TodoMVC),
+easier way to build apps. It's a lot like the early days of the dynamic web.
-we do not need the end user to explicitly specify data bindings. We
+Back then, you wrote simple presentational code and when your data changed, you
-have found this to be an easier way to build apps. It is a lot like
+simply refreshed the page. Today, React makes that refresh very fast and
-the early days of the dynamic web. Back then, you wrote simple
+lightweight, and only the parts of markup that need to be changed are changed.
-presentational code and when your data changed, you simply refreshed
+
-the page. Today, React makes that refresh very fast and lightweight,
+No other framework that we've seen has managed to decouple building UIs without
-and only the parts of the markup that need to be changed are changed.
+being coupled with the DOM.
-
-No other framework that we have seen does this.
 
 ## HTML is just the beginning.
 
-Since React makes very few assumptions about its environment, we can
+Since React makes very few assumptions about its environment, we can do some
-do some pretty cool things with it:
+pretty cool things with it:
 
-- Facebook has dynamic charts that render to `<canvas>` instead of
+- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
-  HTML.
 - Instagram is a "single page" web app built entirely with React and
-  `Backbone.Router`. Designers regularly contribute React code with
+  `Backbone.Router`. Designers regularly contribute React code with JSX.
-  JSX.
+- We've built an internal prototype that runs React apps in a web worker.
-- We have built an internal prototype that runs React apps in a web
-  worker.
 - You can run React
   [on the server](http://github.com/petehunt/react-server-rendering)
   for SEO, performance, code sharing and overall flexibility.
-- Events behave in a consistent, standards-compliant way in all
+- Events behave in a consistent, standards-compliant way in all browsers
-  browsers (including IE8) and automatically use
+  (including IE8) and automatically use
   [event delegation](http://davidwalsh.name/event-delegate).
 
 Head on over to