React vs Angular: Brief comparison as of the beginning of 2018

Lately, a lot has been written about React and Angular. With the beginning of 2018 and the release of new versions of both Angular vs React, it’s worth taking another look at them.

If you have any experience in front-end development, you know that React and Angular can’t be directly compared:

• Angular is a fully-featured MV* framework.
• React is a UI library.

Nowadays, when people talk about Angular or React development, they’re referring to the different approaches to building the front-end that come with choosing one over the other.

Before diving into the technology and performance comparisons, let’s take a quick look at their popularity:

• Over the past six months, npm download statistics show that the React package is about 2.5-3 times more popular than the @angular/core package, which is essential for every Angular app.

It looks even worse for Angular if we look at BuiltWith stats for Top 10k pages. According to BuiltWith 2.9% of Top 10k pages were built using React while only 0.2% of them used Angular 2+.

So does it mean that we should forget Angular and pick React if it is so popular? Not exactly.

Framework vs library

As mentioned before, Angular is a fully-equipped framework often described as a complete solution with ‘batteries included’. This means you don’t have to analyze piles of libraries, configure, and connect them; you can simply start working.

• React:
  • In the past, React was branded as the ‘V’ in MVC. Facebook decided to change their marketing, and now, if you check React’s page, it is described as “A JavaScript library for building user interfaces.”
  • This means you have to search and add other libraries to match the features that Angular provides right out of the box.
  • This isn’t necessarily a drawback, as it gives developers flexibility in adding tools of their choice.
  • Therefore, React developers can end up with a framework as feature-rich as Angular.
  • However, this flexibility also poses the risk of ending up with a non-functional library after React updates, a concern that Angular developers don’t face as the Angular team manages everything.

In my opinion, this was best summed up in an interview for JAXenter: “In Angular, you pay for safety by sacrificing flexibility.”

Interesting fact:

• If you like React’s way of creating UI but miss some Angular features, you can combine them and use React with Angular. React will handle UI and templating, while Angular will be responsible for state management.

How do we write our code then? – templating and languages used

The ecosystems discussed here are both component-based with the principle of reusability but differ in their approach to creation and structure.

• React:
  • It is advised to write React applications using modern JavaScript (like ES6) for your logic and JSX for templates. JSX is a preprocessor for HTML-like syntax that will be compiled into JavaScript.
  • Personally, I also like this approach. Of course, you can use older ES5 without JSX, but this creates unnecessary difficulties and makes the code much less readable.
  • React can be called a JS-centric library since the business logic and templates are written in JavaScript files.
  • The difficulty of using JSX is learning some of its quirky parts, like using className instead of class in elements because ‘class’ is a reserved word in JavaScript.
• Angular:
  • Uses its own syntax and regular HTML to create templates, mostly stored in separate files.
  • Uses TypeScript, a superset of JavaScript that introduces static types.
  • TypeScript also provides first-class support for JSX, so if you want to add React to your project and like what TypeScript offers, you can easily include it in your React project.

Data Binding:

• React:
  • Uses one-way data binding, which updates the model first, then renders the updated UI.
• Angular:
  • Uses two-way data binding, which changes the model state when the UI element is updated.

Server-Side Rendering (SSR):

• React:
  • Supports SSR right out of the box and provides rendering API in their react-dom library.
• Angular:
  • Requires the Angular Universal package for SSR, which doesn’t come with the default Angular bundle. This approach is a bit more complex than React’s.

Configuration and Tooling:

• Both frameworks require robust configuration and some building/bundling libraries before starting development.
• Fortunately, Facebook and Google provide CLI tools that help with the creation and configuration of apps. This is a huge time saver.
• Both CLI-generated configs can be ejected and customized, allowing for custom configurations.

Learning Curve:

• Angular:
  • Might seem more complicated and time-consuming to learn due to its comprehensive nature.
  • Requires learning TypeScript and getting used to its features before diving into Angular.
  • It’s also beneficial to know a bit of RxJS, which Angular heavily uses.
• React:
  • Easier to pick up and start with. You can quickly learn the basics and build simple applications.
  • As you get more familiar with React, you might need to add state management libraries like Redux or Mobx, and routing with the react-router package.
  • Ultimately, the effort required to learn React with its supporting libraries may equate to the effort needed to learn Angular.

Considering these points, in the short term, React might be easier to pick up and start with. However, when you factor in the additional libraries and potential issues, it might be worth investing the time to learn Angular from the beginning.

Performance:

• Performance and size are key factors for many developers.
• React, even with Redux, is smaller than Angular, which is predictable.
• Performance tests with js-framework-benchmark show interesting results, with both frameworks performing almost equally well.

With standalone React as fastest(no surprise) followed by Angular, even surpassing React in some cases.

Summary

Both React and Angular are great ecosystems. Right now in JavaScript environment there is a lot of hype on React and it is forced like the only right way to write web in 2018. I can’t agree with that as my personal pick is React vs. Angular with it’s pristine and defined ecosystem thus I can also appreciate React’s flexibility. If you are developer just give a try to both of them and see what better suits you. Because at this point when the performance is almost tide up, the choice depends mostly in what you feel better.

Our mission is to support startups in achieving success. Feel free to reach out with any inquiries, and visit our blog for additional tips. Tune in to our podcast to glean insights from successful startup CEOs navigating their ventures.