14f1f8f53a · samitouri/QOS-React-2

@@ -1,5 +1,5 @@

1 ---

2 -title: Why Should You Care About React?

2 +title: Why did we build React?

3 layout: post

4 author: Pete Hunt

5 ---

@@ -7,35 +7,26 @@ author: Pete Hunt

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 -

10 ## React isn't an MVC framework.

11

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 lets you

19 -decide how to manage your data and business logic, be it outside of React

20 -components or within.

12 +React is a library for building composable user interfaces. It encourages

13 +the creation of reusable UI components which present data that changes over

14 +time.

15

16 ## React doesn't use templates.

17

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 -

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 -

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.

18 +Traditionally, web application UIs are built using templates or HTML directives.

19 +These templates dictate the full set of abstractions that you are allowed to use

20 +to build your UI.

21 +

22 +React approaches building user interfaces differently by breaking them into

23 +**components**. This means React uses JavaScript to generate markup, which we

24 +see as an advantage over templates for a few reasons:

25 +

26 +- **JavaScript is a flexible, powerful programming language** with the ability

27 + to build abstractions. This is incredibly important in large applications.

28 +- By unifying your markup with it's corresponding view logic, React can actually

29 + make views **easier to extend and maintain**.

30 - By baking an understanding of markup and content into JavaScript, there's

31 **no manual string concatenation** and therefore less surface area for XSS

32 vulnerabilities.

@@ -46,46 +37,35 @@ React really shines when your data changes over time.

37

38 In a traditional JavaScript application, you need to look at what data changed

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

40 +which provides a declarative interface via directives and data binding requires

41 +a linking function to manually update DOM nodes.

42

43 React takes a different approach.

44

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.

45 +When your component is first initialized, the `render` method is called,

46 +generating a lightweight representation of your view. From that representation,

47 +a string of markup is produced, and injected into the document. When your data

48 +changes, the `render` method is called again. In order to perform updates as

49 +efficiently as possible, we diff the return value from the previous call to

50 +`render` with the new one, and generate a minimal set of changes to be applied

51 +to the DOM.

52

62 -We call this process **reconciliation**. Check out

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.

53 +>  

54 +> The data returned from `render` is neither a string nor a DOM node -- it's a

55 +> a lightweight description of what the DOM should look like.

56

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.

57 +We call this process **reconciliation**. Check out

58 +[this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of

59 +reconciliation in action.

60

82 -No other framework that we've seen has managed to decouple building UIs without

83 -being coupled with the DOM.

61 +Because this re-render is so fast (around 1ms for TodoMVC), the developer

62 +doesn't need to explicitly specify data bindings. We've found this approach

63 +makes it easier to build apps.

64

65 ## HTML is just the beginning.

66

87 -Since React makes very few assumptions about its environment, we can do some

88 -pretty cool things with it:

67 +Because React has its own lightweight representation of the document, we can do

68 +some pretty cool things with it:

69

70 - Facebook has dynamic charts that render to `<canvas>` instead of HTML.

71 - Instagram is a "single page" web app built entirely with React and

edits from the committee