Skip to content

Instantly share code, notes, and snippets.

@kbs5280
Last active November 6, 2016 15:36
Show Gist options
  • Save kbs5280/805929249c6ebc4952875dcd8bf2ed88 to your computer and use it in GitHub Desktop.
Save kbs5280/805929249c6ebc4952875dcd8bf2ed88 to your computer and use it in GitHub Desktop.
The Rise of React

The Rise of React

React in an Angular World

React and Angular often come up in the same conversations and there are often comparisons between the two. A shallow dive into the documentation will expose notable differences and quickly demonstrate why they might belong in separate discussions.

According to Wikipedia, Angular exists "to address many of the challenges encountered in developing single-page applications." Brad Green, a Google engineering director, says that 1.3 million developers use AngularJS and 300 thousand are already using the soon to be released Angular 2. It is a widely accepted and utilized framework. Angular has been described as an MVC Framework with two-way data binding. But with the release of Angular 2, it is described as a component based framework. Angular is open source and maintained by Google.

According to React, "React is a JavaScript library for building user interfaces." Kamil Przeorski at ReactJS.co notes the wild rise in popularity of React. React - often lumped in with JavaScript frameworks - is actually a library. And on further inspection we find that React is really just the view layer. It is a fast, dynamic way to build a single page of what is essentially just HTML. React is open source and maintained by Facebook.

Angular has a complicated recent history. Angular2 is a complete rewrite of Angular. In the months preceding its release, Przeorski noticed, developers seemed hesitant to start new projects. And though Angular2 boasts that developers can use ES5, ES6 and Dart, many in the community feel like they are bound to TypeScript, which feels restrictive. Lastly, Angular utilized two way data building, but that is not built into Angular2, and this is another area of speculation for the latest release. Two way data building is powerful, but can be slower and more difficult to reason about. But that is a discussion for another time.

With React we can create stateless components that can be used over and over. But what works really well is the Virtual DOM. The Virtual DOM is something React handles under the hood. React takes all the components we have built and assembles them on the Virtual DOM. Then it takes a look at the 'real DOM' and compares the two. Instead of replacing the 'real DOM' with the Virtual DOM, React looks at the two and compares the differences. For example: If there is a one-word difference, React will replace only that one word. This is very efficient. React is also readable, maintainable, and it follows a pattern that is not difficult to adapt.

In time we will learn more about the adoption and popularity of Angular2. Until then we will continue to watch the rise of React with it's compelling features and versatility. For now, amidst the changes in the Angular world, React finds a very popular spot. Moving forward we can keep in mind what React has to offer:

  1. Components - the ability to create reusable components appears to be where web development is going.
  2. Efficiency - the use of the Virtual DOM makes React very efficient.
  3. Versatility - React is independent and can be used on top of existing frameworks like Backbone.
  4. Writability - JSX is a readable 'HTML' style syntax that makes writing React easier.
  5. Mobile - Though different that React, React Native uses the same design patterns to develop for mobile.

For more on React & Angular checkout this post from EffectiveUI.com

@Laner12
Copy link

Laner12 commented Nov 1, 2016

That is a damn good bit of information. I have only a few suggestions but nothing major. First, you present the information in a way that is non-biased which is perfect unless you wanted to portray that you like one technology over the other. In that case I would make it more clear as to which you prefer and why. Also you mention a few concepts that may be unfamiliar to the reader (Dart, data-binding, and TypeScript). It works as is but if you wanted to add a sentence with a brief over view of the concepts I think it would only benefit. Well done!

@kbs5280
Copy link
Author

kbs5280 commented Nov 1, 2016

Made updates based on comments from @Laner12.

@Automatic365
Copy link

I think the article looks really good after the edits. I think you make a very clear and compelling case for React without voiding the potential validity of Angular2. I would just offer a little tip that the article could make use of linking to other articles to provide more information about some of the tangential things you make reference to. The reference to Typescript would be a perfect place for something like that.

@MsJennyGiraffe
Copy link

MsJennyGiraffe commented Nov 1, 2016

It seems like you italicize quotes. When referencing, I think you should use quotes instead. I believe it's more standard to do so.
"its has been described as a component based framework" -- extra "s" in it.
"And on further inspection we find that React is really just the view layer", I was always taught not to use and at the start of a sentence. You can either attach it to the end of the previous sentence or take off the and. I believe it can stand on it's own.
"So in the months preceding its release, Przeorski noticed, developers seemed hesitant to start new projects", you don't need the "So" in the beginning either.
"And though Angular2 boasts..." -- Also don't need the and.
"But's a discussion for another time" But it's, or but that's.
"If there is only a one-word difference React replaced that one word." -- I find this sentence slightly confusing. I think it would make more sense as "replaces" instead of "replaced"

Feel free to ignore anything you don't agree with. I haven't had an English class in awhile, so I may be wrong/outdated.
Overall, I really enjoy the content of the blog, and wish it went in a little more depth at times. I understand why you didn't, I think it's a very good overview. I also really like your choices with how much and where you link to in the blog. It makes it easier to understand where your mind is at when referencing things like "data binding" which I had no idea what it was. I agree with Jason about the TypeScript, as I don't know what that is.

@zackforbing
Copy link

great blog post, man! couple of things:

you mention React being maintained by facebook twice. I think you should keep the second one, as it fits the format of your comparison paragraph about Angular.

the parens aside about typescript seems a little bit of a wonky sentence. maybe try to integrate that into the sentence instead of parenthesizing it?

I only really have grammar fixes, because the info presented here seems rock solid. good work!

@kbs5280
Copy link
Author

kbs5280 commented Nov 5, 2016

Lane - Thank you. Done. (Also I should have take your advice and used Medium... editing in this gist sucks.)
Jason - Perfect. I took are of it.
Jenny - Thank you for your detailed review. There was some bad stuff in there (lol). I think I made all the changes you recommended.
Zack - excellent call on both counts.

Team work makes the dream work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment