神刀安全网

React vs. Angular2 Comparison: A Heavyweight Bout for the JavaScript Title

React took the spotlight in 2015 as being the most popular web technology for front-end application development but Angular2 has recently stepped on the scene and is ready to contend! Let’s delve into the good, the bad, and the ugly of both sides. It’s React vs. Angular2 and it’s on.

Can we even compare Facebook’s library, React, with Google’s comprehensive framework, Angular2? Well, do they do the same thing? Technically, no. But when you create a React application you will most likely be using libraries such as Redux, react-router, Immutable, and more. I would say that this whole collection of libraries puts React on an even playing field with the framework of Angular2 as they both are different means to the same end. This alone sets the stage for where these technologies start to differ.

(How great is this image above, right? Makes me laugh all the time)

In the blue corner: React JS

Given thatReact is a collection of multiple libraries that leaves more room for inconsistency in development practices and tutorials as opposed to Angular2’s basically enforced consistency which is displayed directly by the core Angular team’s embrace of Typescript . This is the root cause of the overwhelming amount of inconsistent React starter kits written in plain ES5 JS as well as Babel while some use JSX and other don’t. Angular2 definitely makes it a lot easier than React to bridge new hires into a development team for this reason. Granted, Angular2 doesn’t take advantage of the flexibility of JSX at all.

A smart screenshot taking and visual feedback tool for all front-end projects–Take a look

JSX is a syntax similar to HTML that compiles into JavaScript. The syntax allows you to assemble a component’s template from other components and HTML elements. Templates are declared inline using the render method of the component class. These templates become a part of Reacts virtual DOM where all components are first built in memory creating a virtual representation of the DOM tree. The real DOM tree is then created by React and sent to the screen. As the DOM reacts to any UI changes it re-renders based off of what the virtual DOM tree and the real one comparatively show. This makes this method very efficient. The beauty of working with this is that your markup and code are within the same file meaning code completion helps you out as you type reference to your component’s functions and variables.

In the red corner: Angular2

Angular2, on the contrary uses string-based HTML templates limiting you from code coloring, and full code completion support. These templates are all in separate HTML files. Every UI change in Angular is made just by DOM manipulations. Which brings up the methods of data-binding.

Data binding is not the same as DOM manipulation. DOM deals with elements whereas data binding deals with values. Line 2 of the following snippet shows an example of two-way databinding accredited to the [(ngModal)] attribute allowing the input property to be change the “ fruit ”. Line 3 in the following snippet shows an example of one-way databinding whereas the value is bound to the div element and can only be viewed, not modified.

  • <h1>Fruit Basket Madness</h1>
  • <input type=”text” [(ngModal)]=”fruit” id=”new-fruit” />
  • <div>{{fruit}}</div>

Battle of Javascript: #ReactJS vs. #Angular2 Comparison #javascript #webdev #coding

As opposed to data binding, how does React get the same job done? Very simply. Taking a look at the snippet below we bind to the fruit property of the state object. The render method is re-invoked every time the value of the property changes, with the setState method. This prompts the change of the Virtual DOM which is then checked against the real DOM, altering it if changes are present.

  • render() {
  •        return (
  •                        <div className=”container”>
  •                                        <p>{this.state.fruit}</p>
  •                        </div>
  •        );
  • }

In this case, React requires more code because the state must be changed manually whereas the data binding in Angular2 is slightly less code but more confusing with templates full of strange custom attributes.

Track bugs visually and manage your front-end development workflow–Here’s how

React vs. Angular2: Size Matters

One of the biggest differences between Angular2 and React is size. This is mostly because React comes “bare bones” until you beef it up with some libraries while Angular2 comes with more to work with off the bat. Even with suggested libraries React is still almost 4 times smaller than Angular2.

As shown by Restuta Angular2’s minified version has a size of 566K while the size of React with add-ons, minified version is at 144K.

Final Thoughts – React vs. Angular2

When comparing the two it is like deciding whether to buy a computer off the shelf or building a computer with off the shelf parts. Angular2 is committed to HTML-centric design making it complex compared to React’s more simple JavaScript focused approach. With Angular2, you can do fancy things with less code but in contrast you can use React to write plain JavaScript keeping things less complex.

Overall, both technologies provide a robust set of tools for quality, scalable, reactive web applications. For those who prefer to code in plain old JavaScript, React may peak your interest a bit more but for those who want a more mature and complete solution, Angular2 may be your best bet as it has learned from Angular1 and React.

Which team are you on?

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React vs. Angular2 Comparison: A Heavyweight Bout for the JavaScript Title

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址