Revise "Why React" content.

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

@@ -5,121 +5,113 @@ author: Pete Hunt
 ---
 
 There are a lot of JavaScript MVC frameworks out there. Why did we
-build React, and why would you want to use it?
+build React and why would you want to use it?
 
 
 ## React is not an MVC framework.
 
-It's a library designed for building big UIs. The type where you have
+React is a library for building large complex user interfaces with
-lots of reusable components that are handling events, presenting
+many reusable components that handle events, present backend data,
-backend data, and accepting user input. The type where you have to
+and accept user input. At the same time, React was built to integrate
-integrate with legacy code, and support legacy browsers.
+with legacy code and to support older browsers.
 
-In a conventional MVC application, you'd build the View with React
+In the traditional MVC pattern, React is used to build the view. React
-(and maybe the Controller too, if you'd like).
+lets you decide how to manage your data and business logic, be it
+outside of React components or within.
 
-## React doesn't use templates.
+## React does not use templates.
 
-Traditionally, you'd create a set of templates with a template
+Traditionally, web application user interfaces are built using
-language or HTML directives to make a page dynamic. It's up to the
+templates written in templating languages or HTML directives. These
-designer of the template language or the author of the directives to
+templates dictate the full set of abstractions that you are allowed to
-provide the full set of abstractions you can use to build your
+use to build the user interface.
-front-end code.
 
-React's technique is to break your view down into small, composable
+React approaches building user interfaces differently by breaking them
-and reusable **components**. These components provide a `render()`
+down into smaller, composable and reusable **components**. Although
-method which specifies how the component will generate its
+this means we have JavaScript generating markup, we think this is an
-markup. `render()` can either return normal DOM elements (like
+advantage over templates for a few reasons:
-`<div>`s) or can return other components.
-
-This means that yes, we have JavaScript generating markup. But we
-think that this is an advantage over using templates for a few
-reasons:
 
 - **JavaScript is a flexible, powerful programming language with the
   ability to build abstractions.** This is incredibly important in
   large applications.
-- "Logic" and "markup" are intimately tied, and are both part of the
+- Logic and markup are intimately tied and are both part of the
-  "presentation" layer, so we're unifying the presentation layer,
+  presentation layer. So we are unifying the presentation layer, not
-  not breaking separation of concerns.
+  breaking separation of concerns.
-- Large projects usually don't use WYSIWYG editors for production
+- Large projects usually do not use WYSIWYG editors for production
-  code, so breaking apart markup from the code that creates it usually
+  code, so breaking apart markup from code creates friction without
-  only introduces friction.
+  any real gain.
-- We've built a safe, convenient and fast way to compose markup and
+- By baking an understanding of markup and content into JavaScript,
-  components using pure JavaScript. This means **no manual string
+  there is **no manual string concatenation** and, thus, less surface
-  concatenation** and limited surface area for XSS vulnerabilities.
+  area for XSS vulnerabilities.
-
+
-## Reacting to changes
+## React 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 and imperatively make changes to the DOM to make them
+changed and imperatively make changes to the DOM to keep it up-to-date.
-consistent. Even AngularJS, which provides a declarative interface via
+Even AngularJS, which provides a declarative interface via directives
-directives and data binding, still requires a linking function to
+and data binding, requires a linking function to manually update DOM
-manually update DOM nodes (remember: React components are quite
+nodes. (Remember, React components are flexible and expressive, much
-flexible and analogous to AngularJS directives, not templates. In big
+like directives and less like templates in AngularJS.)
-apps you'll almost certainly need this level of expressive power).
 
 React takes a different approach.
 
 When your component is first initialized, the `render()` method is
 called and a string of static HTML is inserted into the DOM. When your
-data changes, the `render()` method is called again. We diff the old
+data changes, the `render()` method is called again. We simply diff
-return value from `render()` with the new one and determine the
+the old return value with the new one and determine the fastest way to
-fastest way to update the DOM. So if only a single attribute on a
+update the DOM. So if only a single attribute on a single element has
-single node has changed, that's all that React will update.
+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
 reconciliation in action.
 
-Usually reconciliation will be faster than handwritten code, as React
+Reconciliation will usually be faster than handwritten code because
-knows about the entire state of the page and can do cool tricks like
+React knows about the entire state of the page and can do cool tricks
-batching reads and writes and picking the fastest subset of DOM
+like batching reads and writes and picking the fastest subset of DOM
 mutations to perform.
 
-The way we're able to pull this off is by constructing a very fast,
+The way we are able to pull this off is by constructing a very fast,
 lightweight representation of the DOM which knows which parts are
-dirtied and which parts are clean. That is, **the data returned from
+dirtied and which parts are clean. **The data returned from `render()`
-`render()` isn't a string and isn't a real DOM node, it's just a
+is neither a string nor a DOM node -- it is a lightweight description
-lightweight description of what the DOM should look like**.
+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
+we do not need the end user to explicitly specify data bindings. We
-found that this is an easy way to build apps. It's a lot like the
+have found this to be an easier way to build apps. It is a lot like
-early days of the dynamic web. Back then you wrote simple
+the early days of the dynamic web. Back then, you wrote simple
-presentational code and when your data changed you simply refreshed
+presentational code and when your data changed, you simply refreshed
-the page. Today, React makes that "refresh" very fast and lightweight,
+the page. Today, React makes that refresh very fast and lightweight,
-and only changes the parts of the markup that need to be changed.
+and only the parts of the markup that need to be changed are changed.
 
-No other framework we've seen can support this easily, since it would
+No other framework that we have seen does this.
-have to be built from the ground up to have very little coupling with
-the DOM.
 
-## Not just for HTML components in the browser
+## HTML is just the beginning.
 
-Since React makes so few assumptions about its environment, we can do
+Since React makes very few assumptions about its environment, we can
-some pretty cool things with it:
+do some pretty cool things with it:
 
-- Facebook.com 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
   JSX.
-- We've built an internal prototype that runs React apps in a web
+- We have built an internal prototype that runs React apps in a web
-  worker
+  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
   browsers (including IE8) and automatically use
-  [event delegation](http://davidwalsh.name/event-delegate)
+  [event delegation](http://davidwalsh.name/event-delegate).
 
 Head on over to
 [facebook.github.io/react](http://facebook.github.io/react) to check
-out what we've built. Our documentation is geared towards building
+out what we have built. Our documentation is geared towards building
-apps with the framework, but if you're interested in the
+apps with the framework, but if you are interested in the
 nuts-and-bolts
 [get in touch](http://facebook.github.io/react/support.html) with us!