Frontend frameworks showdown: Angular vs. React vs. Vue

Article header
Article header

Choosing the right technology stack is one of the most important steps in every development process. It influences almost everything: the speed, and therefore cost of development, the compatibility with other technologies, the speed and performance of the app itself, and so on.

The variety of technologies is enormous. That’s why we’ve decided to prepare a series of articles to compare the most popular technologies for different purposes.

We are starting with frontend frameworks since they are responsible for what users see in their browser.

Attention! This article is written based on our own experience using these JavaScript frameworks for various web development projects. Some subjective conclusions may be included, but they are all supported with real-life examples. So, let’s dive in!

A frontend framework - why would you need one?

A little bit of theory first. In web development, we always differentiate between frontend and backend.

The frontend is the part of the website that the user sees in his browser. The backend, accordingly, is the part that stays behind the scenes and is usually responsible for the business logic of the web app.

A frontend consists of three very important elements:

  • HTML
    Builds the structure of the web page;
  • CSS
    Formats the appearance of the structure elements;
  • JavaScript 
    A programming language that describes the functionality and is responsible for all the dynamic elements on the web page.

Technically, all the three elements of a frontend are just lines of code that are then rendered by the browser to display a beautiful web page. Developers spend many hours writing code to make your website look great. But there are helpers that can reduce the amount of code required and optimize the development process in general. The result is a reduction in development time and cost to bring the product to the market. These helpers are called frameworks.

According to Wikipedia, a “software framework is a universal, reusable software environment that provides particular functionality as part of a larger software platform to facilitate the development of software applications, products, and solutions. Software frameworks may include support programs, compilers, code libraries, tool sets, and application programming interfaces (APIs) that bring together all the different components to enable development of a project or system.”

A software framework (be it frontend or backend) includes standardized pre-written code, which makes the development of certain functionality easier and faster.

Selecting a frontend framework isn’t easy. There are so many things to consider, with many advantages and disadvantages to compare, and so many issues to discuss! To make your decision, we have prepared a detailed comparison of three major JavaScript frameworks. After reading this article, your choice will certainly be easier!

JavaScript frontend frameworks

Why JavaScript? This is one of the most popular programming languages worldwide and the most widespread technology for building web interfaces.

Generally, it is possible to write the frontend code in any programming language, however, this code should be converted into JavaScript as the browsers can only execute JS. Therefore, JavaScript is the optimal choice for frontend development.

There are many JavaScript frameworks which make the client-side development easier and faster. We are going to describe three of the most popular and best-performing frameworks, which we often use in our projects. Here we go!

Angular 2+

The history of Angular began in 2010 when the AngularJS framework was released by Google. In 2016 Angular 2 appeared, which was a complete rewrite of Angular JS. Together with Angular 4 and 5 released in 2017, these framework versions have become the main web development trends of the current year. And here are the reasons. 

Advantages of Angular framework

  • MVC framework
    Angular is a traditional MVC (Model-View-Controller) framework. Due to this structure, the application is divided into three interconnected components. This enables developers to write well-structured code, which is even more beneficial for complex projects.

  • Angular templates
    <form
      [formGroup]="form"
      #loginForm="ngForm"
      (submit)="login(loginForm)">
        <ion-list>
            <ion-item>
                <ion-label>
                    Email
                </ion-label>
                <ion-input
                    type="text"
                    required
                    formControlName="email"
                    placeholder="email@adress.com">
                </ion-input>
            </ion-item>
            <ion-item>
                <ion-label>
                    Password
                </ion-label>
                <ion-input
                    type="password"
                    required
                    formControlName="password"
                    placeholder="Password">
                </ion-input>
            </ion-item>
        </ion-list>
        <button ion-button type="submit" class="email-login">
            Log In
        </button>
        <button
            ion-button
            type="button"
            class="login-forgot"
            (click)="resetPassword(loginForm)">
                Forgot Password?
        </button>
    </form>​

    The templates are readable because they use mostly standard HTML tags.

  • Simple implementation of two-way data binding
    Two-way data binding means that any changes to the model affect the view, and vice versa when the view changes, the model is immediately changed as well. Angular allows simple two-way data binding, which is beneficial for simple applications. More complex apps will work faster with one-way data binding, which works only in one direction (view-to-model or model-to-view), depending on the needs of the software. This enables resources to be saved.

  • Big community
    Angular has a big community, which has been  forming since the release of AngularJS and became even stronger when version 2 was released. The framework has had over 1 million downloads in the last month on npm and over 26 thousands stars on Github. This popularity means the availability of various solutions that are compatible with different versions of Angular, as well as the possibility of receiving advice from experienced developers and users without needing to contact the official support.

Disadvantages of Angular

  • Doesn’t use shadow DOM as a default
    Shadow DOM addresses the problem of unique names of page elements or IDs, which can give developers serious problems, especially when it comes to complex projects. A developer can change the CSS style in one file, and other files are also affected by the same change. Shadow DOM allows the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM. Shadow DOM encapsulates the styles, scripts, and content inside a custom element, so that they don’t interfere with other content in the app.

  • In the case of Angular 2+ shadow DOM is enabled in browsers that support it natively. Otherwise, the shadow DOM encapsulation is emulated.

  • Doesn’t use virtual DOM at all
    A virtual DOM is a simplified copy of the DOM. The virtual DOM allows changing any element quickly, without the need to render the whole DOM. This approach is the trend among modern web development frameworks, but, unfortunately, it isn’t supported by any Angular version yet. Instead, Angular 2 uses unidirectional data flow to detect changes to the model and updates only the parts of the DOM that are affected by changes to the model.

  • Usage of TypeScript



    Being a JS framework, Angular supports the usage of pure JavaScript. But this framework was created to be used with TypeScript, a superset of JavaScript created by Microsoft. TypeScript allows releasing the true power of Angular, but there is one disadvantage - you will have to spend some time learning the new syntax.

  • Lower render speed
    The limited usage of shadow DOM and lack of virtual DOM result in lower performance. The view render/re-render speed is slower compared to the performance shown by other JavaScript frameworks on our chart.

  • Heavyweight code
    Angular is a monolithic framework with heavyweight code, which needs to be downloaded from the server. As a result, the website speed and performance decrease. Fortunately, these problems can be solved with tree-shaking, a technique that allows to eliminate unused code in an app. Webpack 2 is a perfect environment for tree-shaking. And this is how it works: Webpack scans the code, putting all the modules in a single file, at the same time it removes all the “export” from code that isn’t being imported. After that, you have to run a minification process. As a result, the bundle gets rid of the unused code.


When to use Angular 2+?

  • Cross-platform mobile development



    Angular 2 (and newer) was created with mobile usage in mind. All the limitations mobile devices have (like navigation via touch, small screen size, mobile hardware) are considered in the newer versions. That’s why, when thinking of a mobile-first approach, think Angular.

  • Enterprise software
    Angular is good for applications with a complex architecture, for example, enterprise software.

  • Progressive web apps and hybrid mobile apps development
    Angular 2 and Ionic 2 are a perfect match for building hybrid apps, which work on various mobile platforms. The same technology stack can be used for progressive web app development. Angular 2 (and up) is generally extremely mobile friendly due to the Angular Mobile Toolkit, which enables quick and simple development of PWAs, hybrid apps, and mobile websites.

Angular in action

The apps that are known worldwide are built with AngularJS. And there are some good reasons for this.

PayPal

PayPal is among the most popular modern payment gateways. One of the reasons is an intuitive and easy checkout, which was developed using Angular. PayPal developers are also sharing the lessons they learned while working with the framework on the critical feature of the gateway.

The Guardian

The British daily newspaper, The Guardian, has implemented the UI best practices on their website with the help of AngularJS. This framework, together with RxJS extensions for example,  are responsible for infinite scrolling on the page.

And here are some of the web apps developed by Clockwise Software, which use Angular as a core frontend technology. You can click on the links to read about the development process of the apps.

Strapping - order management system

Strapping is custom software for complex inventory management. Angular was used here as a part of the MEAN stack together with MongoDB, Express.js, and Node.js.

Toddy - hybrid mobile app

Toddy is an online marketplace for parents and babysitters. To reduce the development time and cost, we were developing a cross-platform application using a combination of Ionic 2 and Angular 2.

PSS Browser - internal web application
PSS is a corporate web application built around WebView. The frontend of the app was created with Angular following the guidelines of Google Material Design. The other components of the MEAN stack were also used.

React.JS

React is actually a JavaScript library created to build user interfaces. It is supported by Facebook and Instagram, and has become a core technology in the endless feed of these two applications. As a JS library, React has quite a limited sphere of usage, but when bundled with other libraries it becomes a powerful solution, which nowadays is one of the main competitors of Angular. Very often, people ask the question what is better than a react and vue. And this is why:

Advantages of React

  • Component model
    React doesn’t use any templates. The component logic is written in JavaScript, which gives more flexibility, enables rich data to easily pass through your app, and keep state out of the DOM. Though this approach is used in all the compared frontend frameworks, React was the first one to introduce a component model.

  • Virtual DOM
    As already explained, a virtual DOM enables creating a simplified copy of the DOM. All the changes that need to be implemented are made in the virtual DOM. Later on, two DOMs are compared and when the differences are identified, the real DOM will re-render only the changed part. This is much faster and more efficient than working directly with the DOM.

  • One-way data binding
    class PostsIndex extends Component {
      ...
      renderPosts () {
        return this.props.posts.map(post => {
          return (
            <li
              onClick={() => {this.onPostClick(post.id)}}
              className="list-group-item"
              key={post.id}>
                {post.title}
            </li>
          );
        })
      }
      render () {
    	return {this.renderPosts()}
      }
    }​

    Two-way data binding was an advantage for Angular, and the one-way data binding of React may be an advantage as well. This approach makes the view react to any changes made to the model, but the view itself cannot affect the model. As a result, the data only flows in one direction, which reduces the possibility of any side effects.

  • Native mobile development framework



    React Native is an affiliate of React.js, a framework created to develop native mobile apps using JavaScript. With its help, applications include native building blocks and look exactly the same as apps built with Objective-C or Java. The big advantage is that you only need one developer to build the native application for two platforms, as only a knowledge of JavaScript is needed. When compared to hybrid mobile apps built with Angular, React Native apps show much higher performance and are almost as powerful as native apps.

  • Big community
    Being supported by the world’s two major social media companies, React has millions of users across the globe. The strong community means access to quick help from experienced developers. On Github React has gathered over 73 thousand stars, and the usage statistics on npm shows that the framework was downloaded more than 4,766 million in the last month. A very impressive score!  

Disadvantages of React

  • Need to use third-party technologies
    As already mentioned, React is a JavaScript library, not a framework. As a result, its possibilities are limited. To extend the functionality, it is necessary to use third-party modules and libraries. Reading the documentation and learning how to use these technologies may take some time.

  • Using JSX
    React recommends using JSX instead of regular JavaScript and HTML. Actually, this is JavaScript, but extended with XML syntax. The creators claim that JSX is faster, safer and easier than JS. So, to get the most from React you will need to learn this modification of JavaScript.

  • Complex app structure
    React doesn’t have any predefined structure. This means that structuring the app is fully the responsibility of the developer, and depends a lot on his knowledge and experience.

  • Steep learning curve
    React isn’t the easiest technology to learn. Besides React itself, you will need to get to know several other libraries and modules as well.

When to use React?

React is pretty universal, which means you can build nearly anything with it. However, there are some cases, where React is an absolute must. For these apps it is currently the best solution available on the market.

  • Dynamic application
    Building an app that needs to re-render quickly? React is a good choice due to the ability to quickly reflect the data changes in the view.

  • Single page apps
    Since React can display content changes without reloading the current page, it is a great solution for single page apps.

  • Native mobile apps
    React Native enables building mobile apps that are indistinguishable from native apps built with Java or Objective-C.

React in action

React was developed and supported by Facebook and Instagram, and these two social media are a classic example of React usage.

Facebook

Not surprisingly, Facebook uses its own technology in its products.  React Native, for example, is the key technology around the Ads Manager app - the mobile website and app that allows clients to manage their Facebook ads on the go. The developers claim that it is the first cross-platform React Native app, and they have even posted a story about how it was created.

Instagram

The web version of Instagram is also built entirely with React. The JavaScript library provides content updates without the need to reload the page, which is exactly how the Instagram feed works. The Instagram mobile app uses React Native. And here is the article where Instagram developers share the story of migrating to React Native.

Here at Clockwise Software we also have experience in building web applications with React.

Segment AI

For this web application which has elements of data science, we have chosen a combination of Laravel PHP for backend, and React JS as a central frontend technology. The tool Mix enabled quick installation of all the necessary plugins to enable the compatibility of these web development frameworks. As a result, we’ve built a robust and powerful application that includes the data science module written in Python.

Vue.js

Vue.js is a progressive framework for UI building. This alternative to Angular and React is now gaining popularity. It is extremely popular in China, and is now spreading to the west, which is to be expected.

Advantages of Vue.js

  • MVC framework
    Just like Angular, Vue is an MVC (or Model-View-Controller) framework. The advantage of this is obvious - the ability to write well-structured code, which is extremely important when working on complex applications.

  • Lightweight solution
    One of the significant advantages of Vue is the small size of the framework as it doesn’t include many features right “out the box”, but the functionality is easily extended with a variety of third-party solutions. It is often compared to Angular, which is a monolithic framework with a bunch of built-in features, which are unlikely to be used in your app at all. Of course, tree-shaking allows eliminating the unused code, but the size of the framework remains higher compared to what Vue offers. A full-featured Vue 2 project with Vuex + vue-router weighs ~30kb gzipped. At the same time, an out-of-the-box, AOT-compiled application generated by angular-cli has the size of ~130kb gzipped. A compact size and the ability to include third-party modules to extend the functionality make Vue.js a wiser choice for those who care about reducing the size, and therefore improving the speed of the web app.

  • Declarative templates
    <form
      ref="form"
      class="form"
      action="/action"
      method="POST">
        <label
          v-for="field in info.fields"
          v-bind:class="{'error': getError(field)}"
          class="field-wrp">
            <div class="field-label">
              {{field.name}}
            </div>
            <div class="input-wrp">
              <input
                v-if="field.type === 'text' || field.type === 'email'"
                :type="field.type"
                :name="field.name"/>
              <textarea
                v-if="field.type === 'textarea'"
                v-bind:class="{'error': getError(field)}"
                :name="field.name"
                rows="3">
              </textarea>
            </div>
        </label>
        <div
          class="submit"
          @click="submit">
            <span class="submit-title">
              {{info.submitTitle}}
            </span>
        </div>
    </form>​

    The templates in Vue.js are written in HTML, which makes them readable without the knowledge of other programming languages.

  • Virtual DOM
    Due to lighter-weight virtual DOM implementation, apps built with Vue.js have the highest performance in comparison to other frontend frameworks.

  • Two-way data binding
    Vue.js automatically syncs the whole model with the DOM.

  • Supported by Laravel “out of the box”
    Laravel is one of the best PHP backend frameworks. The support of Vue allows building web apps using two of the most progressive technologies without any additional installations.

  • Pure JavaScript
    Vue.js uses pure JavaScript, so there’s no need for the developers or testers to learn any other programming language or its variation.

  • Low learning curve
    Compared to Angular and React, Vue.js is the easiest frontend technology to learn and start working with. In addition to this, you can start adding Vue.js to your project step by step.

  • Rising popularity
    With about 658,000 downloads per month, Vue.js is showing great results. Over 63 thousand Github stars prove the rising popularity, and reflects the views of the community as well. Vue.js is now being used all over the world. This means that there will be more and more solutions compatible with this JS framework.

Disadvantages of Vue.js

  • Small community
    Vue is less popular when compared to Angular and React, both of which have an impressive number of users. However, you can still count on support from other community members.

  • Fewer libraries for Vue.js
    Since there are fewer users of the framework, they share fewer solutions to extend the framework functionality.

  • Chinese roots
    This framework was created by Evan You a former Angular developer. He knew exactly the weak points of Angular and started to work on an alternative, while keeping all its advantages. The new framework quickly became extremely popular in his native country China. As a result, documentation for some of the third-party libraries may be available only in Chinese.

When to use Vue.js?

Vue can be used for many different types of applications. Due to its compatibility with other JavaScript libraries and ability to add more complex logic to the existing apps, it can provide a perfect solution for nearly any type of project. But you should consider Vue.js as a primary option for the following requirements:

  • Dynamic high-performance applications
    Similar to React, Vue.js is a good choice for dynamic applications, however thanks to virtual DOM it offers higher performance, which is beneficial for complex apps.

  • Single page apps
    Vue.js allows changing the content quickly without reloading the page, which makes this framework perfect for SPAs.

Vue.js in action

Even though Vue is a relatively new technology, it is already being used in several large-scale projects mostly in China.

The websites of Alibaba, Xiaomi, Baidu, and Tencent all use Vue.js as a central frontend technology.

The Clockwise Software website was built using Vue.js together with Nuxt.js - a framework for creating Universal Vue.js Applications. VueJS has allowed us to create simple and well-structured components and pages and Nuxt.js enables us to perform static generation of website pages. The statically generated pages are good for SEO and also extremely fast because the server does not need to perform rendering.

Conclusion

The family of JavaScript frameworks is huge. They are built to solve different tasks, their functionality can be extended by using various third party solutions, which require different levels of expertise. They are all different.

Angular, React and Vue are the top players among JavaScript frameworks for frontend development. They can all be used for literally any requirement, however each framework offers something it is extremely good at.

You don’t need React to build a static blog, but this technology will make a dynamic website work flawless. Its sibling, React Native, even enables building native mobile apps using JavaScript!

Angular will be helpful for building apps with extensive structure. This framework will  impress mobile users with first-class progressive web apps and hybrid mobile apps.

Vue combines the best features of Angular and React, and is expanding its positions in the world of web development. With its performance benefits, Vue is already beating its competitors.

JavaScript frameworks perform magic in building user interfaces. They offer solutions for quick and robust development, enabling you to build more sophisticated interfaces, and extend the possibilities of the client side of the web application.


Liked this article? Sign up to be notified of new blog posts.

You might also like

Web Development Trends in 2018

How to achieve maximum benefits with a minimum viable product

How to make a prototype? The first step towards a successful product

Web development trends are changing rapidly. Yesterday the multi-page websites were popular, today the trend for simplicity brought single-page apps back on the top. Read about other tendencies in web development for 2018.
MVP is one of your first steps towards the successful business, and you should make this step wisely. Don’t overestimate your budget and hire expensive developers from the very beginning. Read this simple advice and build the product the customers really like and appreciate.
What is the first step from a great idea to a successful project? We believe it is thorough prototyping. How to make a prototype that will result in an application everybody loves? Find the answers in our article!

Web Development Trends in 2018

Web development trends are changing rapidly. Yesterday the multi-page websites were popular, today the trend for simplicity brought single-page apps back on the top. Read about other tendencies in web development for 2018.

How to achieve maximum benefits with a minimum viable product

MVP is one of your first steps towards the successful business, and you should make this step wisely. Don’t overestimate your budget and hire expensive developers from the very beginning. Read this simple advice and build the product the customers really like and appreciate.

How to make a prototype? The first step towards a successful product

What is the first step from a great idea to a successful project? We believe it is thorough prototyping. How to make a prototype that will result in an application everybody loves? Find the answers in our article!