Frameworks in simple words
If you already know what frameworks are and what they’re used for, you can skip the intro and dig right into the best parts. To all the rest: bear with me for a few moments, and I’ll try to explain Angular and React in simple words.
One of my favorite metaphors used for explaining the concept of frameworks is to think of a web project of yours as of building a house: your contractor will build it from scratch using the right set of tools and materials combining them in the right order according to the architecture of a building.
But imagine what it would be like if they’d make every single piece of your new house from scratch: doors, windows, water taps, paint – whatever. First of all, that would take ages. But most importantly, why would anyone ever do that when you can just use open-source packages for free? That’s it. Simply put, frameworks are a set of libraries with pre-designed elements you can use for your project.
And that’s why ReactJS and AngularJS are being compared: both of these frameworks are best to be used for the same kind of projects.
Such design pattern for developing web products has its roots back in the desktop applications, and gained its popularity because of a successful imitation of a familiar for user environment, but this time in a browser. Some of the SPA examples you’re either using every day or, at least, well acquainted with, are:
All of the websites mentioned above, along with thousands of others, are built using one of the frameworks we’ll be comparing in this article. So, let’s learn more about both to see what is the difference between ReactJS and AngularJS and, hopefully, find out which technology should you choose for yourself.
Intro to React
Back in 2013 ReactJS was created by Facebook’s engineer Jordan Walke, and with the right timing, Instagram actually became the first app built entirely on React. Now, to clear it out of the way: even in the official tutorial React is being referred to as a «library designed for building user interfaces.»
The legitimate question that may come to your mind is «Why are we even including it in the js framework comparison article then?». Well, the simple answer is that frameworks are mainly responsible for the architecture of an app, and while React may not be an officially declared framework, it still has it’s ideology and principles of building projects of one.
In any way, while the dispute over the question whether React is a library or a framework continues to be a hot topic all over the programmers’ favorite sources, it gets things done. So, what are the pros and cons of ReactJS for business?
Advantages of ReactJS
It’s easy to learn
And though we are not looking at this question from the point of view of a developer and I’m not inspiring you to start reading a React manual, that is some good news for business. Look at it this way: a professional in a field with a lower entry-barrier will cost your company less. You can outsource them or hire a freelance developer, and use their hand on demand instead of spending a fortune on the hiring process.
This is what makes apps built on this framework so fast. A DOM (Document Object Model) is a node tree listing content and elements with their attributes as objects and properties. The DOM itself isn’t slow, but whenever it’s layout is changed, browser needs to change the CSS, calculate the new layout and adjust the page. And that takes some time.
The solution that was implemented within ReactJS is called virtual DOM. What happens differently is each time some data changes in the app, we need to update the browser’s DOM, but in React we go through three steps of this process:
- every time something happens, user interface gets re-rendered in a new Virtual DOM
- an algorithm will calculate whether there are any discrepancies between the old and new Virtual DOMs
- the real DOM gets updated, but only with those changes that actually took place
Versatility of ReactJS
Most widely used quote on React sounds like this: «Learn once, write anywhere». What you should hear: it can be used on any platform. Mobile, web, desktop – anything. It is scalable, and you won’t have any headache with this technology once your startup is booming and all of a sudden you need your web product to turn into an iPhone app. Moreover: it will be working on Android as well.
And if you ever face that scenario in real life, using this framework won’t give you any trouble in terms of design integrity. Think two words: reusable components. You’ve built a beautiful search bar? A subscription form? A call-to-action button? Great! Now use it throughout your product, combine smaller items into more complex ones and rest assured in the end you get a thought-through design for multi-platform use. Perfect for those who follow the principles of atomic design. And you know what else? React’s light of JS architecture makes it SEO-friendly too!
Disadvantages of ReactJS
Poor documentation on React
While many will continue to argue and bring up JSX (syntax extension used for combining HTML and JS) as being too complicated and redundant, or will continue to point out that it’s not a full-time framework, for me there’s one and only con. And it’s the documentation. ReactJS is just getting more and more popular, more people are contributing, and that makes this framework incredibly dynamic. And though it may sound like a good thing, sometimes it’s just impossible to keep up with the pace, especially keeping in mind that guides and tutorials are not getting much better.
Intro to AngularJS
Angular is the cool kid, who’s been around way before React moved on the block. Similar to the other story, this js framework came out of the secret underground labs of an enterprise giant. Only this time, the people behind the curtains are the Googlers.
In fact, back in 2009 when it was initially released, Angular went almost viral among the developers’ community because of two reasons:
- It was virtually the first framework for building single page applications
So, let’s take a closer look at what does Angular bring on.
Advantages of AngularJS
This is basically, a consequence of the framework’s popularity. Once again, React happened in 2013, until then the best solution for developing an SPA was Angular. Of course, Angular had some leg up on its closest competitor.
The community of developers using and improving the framework is huge. And having Google behind its back, Angular does not stand still. Only in the last 16 months it has gone through two major updates, Angular 2 and Angular 5, and rumors are, the next one is coming early summer 2018. The framework contributors are aiming at making it faster, smaller and easier to use.
According, to a StackOverflow survey, Angular is the most popular technology among professional developers:
Why it matters for business and startups founders? Well, you know how the market works: the more significant supply is, the easier it is to find what you’re looking for. The number of engineers working with AngularJS is several times bigger than any other competitors.
Two-way data binding
This is what allows the applications running on Angular to provide quick responses to user’s actions. In simple words, it means that the models inside the controller can affect the views the same way the views can affect the models. Contrary to this concept, one-way data binding MVC models do not get updated every time the data model is changed. A developer would need to write some custom code to force the model to update.
Here’s a simple visual representation of this concept:
Disadvantages of AngularJS
React vs Angular performance
One very debatable issue – we get that. But not when it comes to a massive project that processes tons of data. Because this is where’s Angular’s weak spot is. It may be not the best option for complex single page applications running through the constant updates of massive amounts of information. It can merely ruin your user’s experience and leave an impression that your product is slow and lags all the time.
Regular DOM render approach
Once you get to work with what ReactJS has to offer on this matter, you won’t wanna go back. Need I say more?
React vs Angular comparison
Of course, we named only a few things these frameworks feature. Just as any other «VS» discussion, this one is endless, and the list of pros and cons of both would vary depending on each specific project.
|Company behind framework|
|Code design||HTML to JS||JS to HTML|
Our aim here wasn’t to convince you to use use or another technology. In fact, I tried to avoid being biased as hard as I could. So, of course, drawing a line I will follow the same strategy. What’s important to for you as a person who’s trying to make a decision on which technology to use for your project, is to know the differences and use the advantages to benefit your business.
Both Angular and React, will work great for what they were made for: the single page applications. The rest of this decision relies on the specific details about your project. But, please, don’t choose a tech stack for your project because it’s trendy or your friend says everyone’s using it.
And if it’s still unclear what will do best for you, ask for a second professional opinion. CodingNinjas do not only provide vetted freelance developers who work with both frameworks, we’ll also do our best to advice on what’s best for your business. Moreover, you can always get a quote from us to estimate the cost of your project in under 24 hours. You don’t have to spend any time worrying and doubting. Don’t overthink, make things work.