I've put together a quick page that allows you to see the rendering time difference between the three frameworks, plus the raw DOM manipulation.
It's what I've been using to figure out how long each framework takes to render large lists, as seen in the results table below.
Take a look here. This is by no means a scientific test as to how well each framework performs. That said, though, I tried to make it equal across all frameworks, so to that end, I'm going to walk through how I wrote each framework's test below.
Basically, I generate a list of 1000 items that get rendered into a ul tag, and then measure how long it takes by measuring dates before and after a render.
React.js vs. Angular: Brief Overview
The user is able to select an item in the list, too, so it's not just a straight html render; there are events bound. It's not a perfect test by any stretch, but it gets the point across. Note: If you're interested in this section at all, you're going to need at least a passing understanding as to how to build something in each of the frameworks.
Tutorials on React, Angular and Knockout are outside the scope of this article. So as a quick run down, when the user initiates a run, I build up a new list of 1000 items, make a note of the current time, render the React class, and then measure how long it took and write that time to the page.
The class itself is straightforward, with a quick loop in the render function to push all of the created li tags into an array, and then rendering that array into a containing div.
There's an onClick binding set on the li to select it, too. The whole performance page is marked as an Angular app, so building up the module is pretty straightforward.
Of note here is the $$postDigest hook, which is an internal Angular construct.
It allows us to specify a callback to fire after a digest cycle has completed. Here, we're using an anonymous template for the Knockout bindings. We set up a click, text and css binding for indicating which item is selected, and a foreach loop in the Knockout html to actually do the rendering. I added raw DOM manipulation to give a baseline as to how to run the same test without any fancypants framework. For the raw section, I'm grabbing the template from a script tag (marked with type text/html) and replace some key words wrapped in double curly braces with the appropriate text.
Click events are hooked up via jquery. I ran all the tests in in Chrome 39.0.2171.95, Firefox 34.0.5 and Safari 7.0.2 by opening the test page and clicking the run button for each framework ten times.
If you're interested in the raw data, I've made it available here. There are some fancy charts below which show the results. On average, React is the fastest at rendering a list of 1000 items. It's a surprising result, because I would have expected raw DOM manipulation to be the fastest, as there's nothing too hook up and so on.
Angular vs. React.js: Tech Side
There's an interesting outlier in the Chrome test in that the second run of the React test takes a very long time to run: almost 600ms.
It happens every time the second test is run in Chrome after a fresh reload and I'm not sure why.
Raw DOM manipulation comes in second, which doesn't surprise me, as it's obviously much lighter than either Angular or Knockout, with nothing else to hook up or take care of behind the scenes.
Angular comes in third, and Knockout comes in last. Knockout takes an especially long time in Firefox (~420ms). On a related note, Safari is the best browser across the board for all of the tested frameworks, but slowest for the raw test.
If performance is your primary motivation, React is a good choice for a framework, especially if you're showing large amounts of data. I understand that this example is relatively contrived, as nobody in their right mind is going to be showing 1000 items all at once, but I feel it's indicative as to which framework performs better as a whole.
Enjoy this post? Give Chris Harrington a like if it's helpful. Discover and read more posts from Chris Harrington.
Leave a like and comment for Chris. We are Cleveroad. Founded in 2011, we’ve been providing full-cycle mobile and web development services to clients from various industries.
React vs. Angular: Popularity
Programming Language Ranking. Why Pick Python for FinTech App. How to Hire Angular Developer.
CleveroadBlogTechReact vs Angular. Updated 25 Apr 2022. Angular – which to choose for web development? Our developers work extensively with both the tools, so we’ve decided to shed some light on ‘React or Angular?’ question.
Which Is Better: Angular or React?
Let's get started. But first, let’s figure out what both Angular and React actually are. First, not to mix everything up: I’m talking about Angular 2, not AngularJS (which is a different and older framework.).
Right now Angular 2 is used as an umbrella term for all the versions of Angular released after AngularJS. They are Angular 2, 4, 5, 6, 7, 8, and 9 (released on Feb 6, 2020). What is Angular 2 exactly? It’s an open-source framework mainly used for creating web apps, single-page web apps, and hybrid apps.
Angular is built on TypeScript, developed and maintained by Google. Angular is a full-fledged toolkit that has everything developers need to build large-scale apps. No wonder it gains popularity: leading businesses, like Xbox, Forbes, BMW, and many more choose Angular over React for front-end development.
Projects built with Angular:. Samsung Forward.
Microsoft Office Home. BMW Driveaway Price Calculator.
React uses a declarative style of programming to describe the UI state. React allows programmers to figure out how their app is going to look for users and how they would interact with it.
We’re going to review them later on. Facebook used React over Angular in production for years, along with Instagram, Netflix, and other tech giants.
But it works for small projects too. Here are some of the small ones to give you an idea:.
Radix Converter. Course Learn Page. As well as Angular, React is an open-source project. This means anyone can download and modify it's source for free. React libraries range from collections of individual UI features to complete React.js templates that help build UI's from the ground up.
So, no matter what specific UI function a developer is going to address with React, there's a library for their needs.
Care about the tech side, but don't forget about looks.
We deliver UI/UX web design services making apps look great. Now, let's compare React.js vs. Angular 2 in terms of their performance.
Actually, both React and Angular are great for front-end development. And they do equally well when it comes to building large-scale apps.
But there’s one big difference between Angular and React. React.js uses virtual DOM (Document Object Model – allows accessing and changing document contents, layout, and even structure). While Angular 2 operates on real DOM.
Imagine you want to update user profile details, let’s say, their last name. Real DOM, instead of changing just that bit of info, updates the entire tree structure of HTML tables until it reaches the needed data.
In our case, it's the last name.
Can become complex once the application grows large
While virtual DOM allows us to update the changes without rewriting the entire HTML doc virtually.
This renders updates much faster and ensures fast performance – no matter of the apps' size. React performance tests. Data binding is about synchronizing data between business logic and UI. The difference between Angular and React.js is that Angular 2 uses both one- and two-way data binding: changing data impacts view and changing view triggers changes in data.
React uses one-way binding: when designing a React app developers often nest child components within higher-order parent components.
What Is React?
One-way binding makes the code more stable, and also makes debugging an app build with React versus Angular app much easier.
Still, the one/two-way binding of Angular is simpler to work with and makes the framework more flexible.
Difference between React and Angular: data binding.
React approaches building UIs by breaking them into components.
Here's how it works: you build components that manage their own state and structure them together into more complex UIs.
Still, if the project architecture is based on React, you’ll need multiple integrations and supporting tools.
Some of them are:.
Redux (a state container which speeds up the work of React in large apps).
Webpack (a standard module bundler). Unlike React, Angular is a pure full-fledged framework which comes with many out-of-the-box features like:.
RxJS introduces the concept of reactive programming to JS.
Angular CLI is a powerful command-line interface. Angular Universal used for server-side rendering. Generally, both Angular and React.js come with robust ecosystems. React is easier to grasp, but it requires multiple integrations like Redux to use it's potential fully.
By the way, since React is a library, you can integrate it into any project, even if the project itself is written in Angular.
(Why do this is a different debate though but such an opportunity exists). Why does size matter? The smaller is the file, the faster it loads. The faster it loads, the higher is the ranking – and, ultimately, the conversion rate (and margin).
Angular solves this problem by not including the entire bundle of Angular framework in the user's app.
What Is Angular?
As part of the build process, it gets rid of:. Development utilities. Then, minification and compression take place allowing the framework to perform extra optimizations. As for ReactJS, it's the use of webpack (splits your code into smaller parts), tree shaking, and dynamic imports that reduce the bundle size.
Tree shaking (or dead-code elimination) means that unused modules won't be included in the bundle during the build process. With dynamic imports, the app loads the code needed initially--and load the rest on demand.
Picking a tech stack seems tough? No worries: we got your back (and front) covered in 'How to Choose a Tech Stack for Web Apps?' The possibility to update architecture to add new modules and libraries is important for every developer. The diff between Angular and React is that it’s impossible to jump from Angular 2.0 to 7.0.