@samitouri / QOS-React-2 / commits / bef3dd6760
Fork 0

The library for web and native user interfaces.

Another pass over "Why React".

yungsters committed Jun 3, 2013 at 15:54 UTC bef3dd67608951936c3c5092304a8833c330353d
1 file changed +67 -77
docs/_posts/2013-06-03-why-react.md
+67 -77
@@ -4,108 +4,98 @@ layout: post
4 author: Pete Hunt
5 ---
6
7 -There are a lot of JavaScript MVC frameworks out there. Why did we
8 -build React and why would you want to use it?
7 +There are a lot of JavaScript MVC frameworks out there. Why did we build React
8 +and why would you want to use it?
9
10
11 -## React is not an MVC framework.
11 +## React isn't an MVC framework.
12
13 -React is a library for building large complex user interfaces with
14 -many reusable components that handle events, present backend data,
15 -and accept user input. At the same time, React was built to integrate
16 -with legacy code and to support older browsers.
13 +It's a library designed for building big UIs. The type where you have lots of
14 +reusable components that are handling events, presenting backend data, and
15 +accepting user input. The type where you have to integrate with legacy code, and
16 +support legacy browsers.
17
18 -In the traditional MVC pattern, React is used to build the view. React
19 -lets you decide how to manage your data and business logic, be it
20 -outside of React components or within.
18 +In the traditional MVC pattern, React is used to build the view. React lets you
19 +decide how to manage your data and business logic, be it outside of React
20 +components or within.
21
22 -## React does not use templates.
22 +## React doesn't use templates.
23
24 -Traditionally, web application user interfaces are built using
25 -templates written in templating languages or HTML directives. These
26 -templates dictate the full set of abstractions that you are allowed to
27 -use to build the user interface.
24 +Traditionally, web application UIs are built using templates written in
25 +templating languages or HTML directives. These templates dictate the full set of
26 +abstractions that you are allowed to use to build the user interface.
27
29 -React approaches building user interfaces differently by breaking them
30 -down into smaller, composable and reusable **components**. Although
31 -this means we have JavaScript generating markup, we think this is an
32 -advantage over templates for a few reasons:
28 +React approaches building user interfaces differently by breaking them down into
29 +smaller, composable and reusable **components**. Although this means we have
30 +JavaScript generating markup, we think this is an advantage over templates for a
31 +few reasons:
32
34 -- **JavaScript is a flexible, powerful programming language with the
35 - ability to build abstractions.** This is incredibly important in
36 - large applications.
37 -- Logic and markup are intimately tied and are both part of the
38 - presentation layer. So we are unifying the presentation layer, not
39 - breaking separation of concerns.
40 -- Large projects usually do not use WYSIWYG editors for production
41 - code, so breaking apart markup from code creates friction without
42 - any real gain.
43 -- By baking an understanding of markup and content into JavaScript,
44 - there is **no manual string concatenation** and, thus, less surface
45 - area for XSS vulnerabilities.
33 +- **JavaScript is a flexible, powerful programming language with the ability to
34 + build abstractions.** This is incredibly important in large applications.
35 +- By unifying markup and logic with a common language, applications can
36 + implement more appropriate separations of concerns.
37 +- Large projects usually do not use WYSIWYG editors for production code, so
38 + breaking apart markup from code creates friction without any real gain.
39 +- By baking an understanding of markup and content into JavaScript, there's
40 + **no manual string concatenation** and therefore less surface area for XSS
41 + vulnerabilities.
42
47 -## React updates are dead simple.
43 +## Reactive updates are dead simple.
44
45 React really shines when your data changes over time.
46
51 -In a traditional JavaScript application, you need to look at what data
52 -changed and imperatively make changes to the DOM to keep it up-to-date.
53 -Even AngularJS, which provides a declarative interface via directives
54 -and data binding, requires a linking function to manually update DOM
55 -nodes. (Remember, React components are flexible and expressive, much
56 -like directives and less like templates in AngularJS.)
47 +In a traditional JavaScript application, you need to look at what data changed
48 +and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
49 +which provides a declarative interface via directives and data binding, requires
50 +a linking function to manually update DOM nodes. Remember, React components are
51 +flexible and expressive, much like directives and less like templates in
52 +AngularJS.
53
54 React takes a different approach.
55
60 -When your component is first initialized, the `render()` method is
61 -called and a string of static HTML is inserted into the DOM. When your
62 -data changes, the `render()` method is called again. We simply diff
63 -the old return value with the new one and determine the fastest way to
64 -update the DOM. So if only a single attribute on a single element has
65 -changed, that is all that React updates.
56 +When your component is first initialized, the `render()` method is called and a
57 +string of static HTML is inserted into the DOM. When your data changes, the
58 +`render()` method is called again. We simply diff the old return value with the
59 +new one to determine the fastest way to update the DOM. So if only a single
60 +attribute on a single element changes, that's all that React updates.
61
62 We call this process **reconciliation**. Check out
68 -[this jsFiddle](http://jsfiddle.net/fv6RD/3/) for an example of
69 -reconciliation in action.
70 -
71 -Reconciliation will usually be faster than handwritten code because
72 -React knows about the entire state of the page and can do cool tricks
73 -like batching reads and writes and picking the fastest subset of DOM
74 -mutations to perform.
75 -
76 -The way we are able to pull this off is by constructing a very fast,
77 -lightweight representation of the DOM which knows which parts are
78 -dirtied and which parts are clean. **The data returned from `render()`
79 -is neither a string nor a DOM node -- it is a lightweight description
80 -of what the DOM should look like.**
81 -
82 -Because this re-render is so fast (on the order of 1ms for TodoMVC),
83 -we do not need the end user to explicitly specify data bindings. We
84 -have found this to be an easier way to build apps. It is a lot like
85 -the early days of the dynamic web. Back then, you wrote simple
86 -presentational code and when your data changed, you simply refreshed
87 -the page. Today, React makes that refresh very fast and lightweight,
88 -and only the parts of the markup that need to be changed are changed.
89 -
90 -No other framework that we have seen does this.
63 +[this jsFiddle](http://jsfiddle.net/fv6RD/3/) for an example of reconciliation
64 +in action.
65 +
66 +Reconciliation will usually be faster than handwritten code because React knows
67 +about the entire state of the page and can do cool tricks like batching reads
68 +and writes and picking the fastest subset of DOM mutations to perform.
69 +
70 +The way we're able to pull this off is by constructing a very fast, lightweight
71 +representation of the DOM which knows which parts are dirtied and which parts
72 +are clean. **The data returned from `render()` is neither a string nor a DOM
73 +node -- it's a lightweight description of what the DOM should look like.**
74 +
75 +Because this re-render is so fast (on the order of 1ms for TodoMVC), we don't
76 +need the end user to explicitly specify data bindings. We've found this to be an
77 +easier way to build apps. It's a lot like the early days of the dynamic web.
78 +Back then, you wrote simple presentational code and when your data changed, you
79 +simply refreshed the page. Today, React makes that refresh very fast and
80 +lightweight, and only the parts of markup that need to be changed are changed.
81 +
82 +No other framework that we've seen has managed to decouple building UIs without
83 +being coupled with the DOM.
84
85 ## HTML is just the beginning.
86
94 -Since React makes very few assumptions about its environment, we can
95 -do some pretty cool things with it:
87 +Since React makes very few assumptions about its environment, we can do some
88 +pretty cool things with it:
89
97 -- Facebook has dynamic charts that render to `<canvas>` instead of
98 - HTML.
90 +- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
91 - Instagram is a "single page" web app built entirely with React and
100 - `Backbone.Router`. Designers regularly contribute React code with
101 - JSX.
102 -- We have built an internal prototype that runs React apps in a web
103 - worker.
92 + `Backbone.Router`. Designers regularly contribute React code with JSX.
93 +- We've built an internal prototype that runs React apps in a web worker.
94 - You can run React
95 [on the server](http://github.com/petehunt/react-server-rendering)
96 for SEO, performance, code sharing and overall flexibility.
107 -- Events behave in a consistent, standards-compliant way in all
108 - browsers (including IE8) and automatically use
97 +- Events behave in a consistent, standards-compliant way in all browsers
98 + (including IE8) and automatically use
99 [event delegation](http://davidwalsh.name/event-delegate).
100
101 Head on over to