Live presentation: Understanding the latest in web compilers

Sign Up Now
Chevron Forward

Beginner's Guide to JavaScript Frameworks: Angular, React, and Vue

Learn the core concepts, advantages, and drawbacks of all three major web frameworks: Angular, React, and Vue.

Canaan Merchant
Canaan Merchant
Technical Writer and Software Engineer

Every developer hopes to see their app grow. Developers want to see more users as well as more features to make their app more useful. But that growth comes with challenges like cluttered User Interfaces (UI) or hopelessly large codebases. To combat those issues developers rely on Frameworks to help organize code and take advantage of built-in features to make application deployment easier. 

Front-End Frameworks help developers build data-rich and responsive UIs that keep a user’s attention. Seeing an app take in information and reflect changes immediately is now expected from many apps. 

For the world of Progressive Web Apps that means developers need a solid mastery of JavaScript and the Document Object Model (DOM). JavaScript is a versatile language and frameworks help developers take advantage of the power of the DOM. React, Angular, and Vue are three of the most popular frameworks for front-end development. But you only need one framework to do the job. How do you pick the best one for your app project? 

Overall, it depends on a variety of factors, including how you want to structure your projects and which features you find easiest to work with. In this article, we’ll cover the core concepts, advantages, and drawbacks of all three major web frameworks: Angular, React, and Vue.

What is Web Development?

Before we jump into the three major web frameworks, let’s define some key web technology terms and concepts.

All three frameworks require a solid understanding of web development, the work involved to create and maintain websites and apps. If you're brand new to programming and/or web development, we recommend brushing up on HTML/CSS/JavaScript before diving into Angular, React, or Vue. 

Hypertext Markup Language (HTML) is used to display and format content on a webpage. This paragraph you’re reading is displayed on this page using HTML, for example.

Cascading Style Sheets (CSS) is used to style web pages. This includes everything from font, colors, imagery, to even animations that make the page interactive and fun to look at.

JavaScript is used to add interactivity to a webpage. When you submit your information on a page, such as when ordering food or clothes, that’s JavaScript in action. The “read more” button that lets you see the rest of the article is JavaScript as well. 

What do React, Angular, and Vue have in common?

There are a few terms and concepts that are leveraged by all three frameworks.

Embracing Modern JavaScript

All three frameworks use the latest and greatest features of JavaScript. In recent years it has added lots of great new features, helping it transform from one of the most dreaded programming languages to the well-loved, robust one it is today. This includes arrow functions which provide short-hand syntax when defining functions, promises that help ensure logical steps are completed in order, and the spread operator which lets you include items in a list without having to retype everything.

Components

All three frameworks make use of components, aka the building blocks of a web application. Developers build small, reusable pieces of functionality then combine them into a complete app. They speed up the development process by allowing a developer to make tweaks or fixes in one specific area without worrying about the entire app breaking or affecting another developer’s work in progress.

Think of components like a function. A function in your code should do one thing and return a predictable response every time. Components help you break down problems into smaller, more manageable pieces.

Component-based apps took off after JavaScript introduced modules, which allow developers to use code from other files, effectively avoiding the need to reinvent the wheel. If you have leveraged functionality from a third-party library or package then you are familiar with JavaScript modules.

Command Line Interface (CLI)

All three frameworks have a Command Line Interface (CLI) tool that developers use to quickly create, manage, and scale up projects as they work. They also let developers run test servers so they can see changes in the browser in real time or debug errors as soon as they occur. If you are totally unfamiliar with using the command line then take some time to learn it since they are used in all sorts of programming environments - not just web development. Fortunately, all three frameworks’ documentation cover what you need to know extensively.

Node

Another prerequisite is NodeJS. Node is a JavaScript Runtime Environment that lets us use JavaScript outside of the web browser. It's the tool that will let us install all three frameworks and help our development through the Node Package Manager (npm). With Node we can install packages and create local test servers to see our changes update in real time. It’s not an absolute requirement (especially for Vue) but it makes life much easier for developers looking to get familiar with the typical project structure for each framework.

Now that we’ve seen an overview of various pieces of web dev technology, let's dive deeper into each web framework one by one.

React

First up is React. React is the big fish in the Front-End pond. The majority of web developers have used React and thousands of companies use the framework to ship mission-critical apps. The most notable is Facebook, which employs thousands of engineers. They created React out of a need to efficiently organize its code and allow for changes to update quickly and at a global scale.

Core Concepts

Virtual DOM

Part of the reason React produces such highly performant code is the way React handles the Document Object Model (DOM). The DOM represents the structure and content of a web page. JavaScript uses the DOM to record changes in the browser window and when the DOM detects changes the page can update. Updating the DOM comes at a performance cost especially as code tries to detect what should and should not be updated. 

In response, React uses a “Virtual DOM” concept. The Virtual DOM makes a copy of the page's DOM and changes are only made inside the Virtual DOM. Next, those changes (and only those changes) are applied to the actual DOM. It seems counterintuitive to speed things up by adding an additional step, but it works because the DOM only gets updated with what has changed, instead of replacing the entire DOM all at once.

You can see this yourself by creating an app using the Create-React-App command available via npm or similar package manager (like Yarn). Just type:

create-react-app <the name of your app>

The CLI will compile the files you need in a typical folder structure. Use the CLI to enter the new app’s root folder and you can start a local server that displays the getting started page. The entire app runs from an index.js folder like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

As you see above, the ReactDOM uses a render function to write the <App> to the page. All the content, functions, and components of an app are contained within one element.  

Components

Components can either be a single function or a class in React. React components take in information known as props (short for properties) and use props to return the result you want. The beauty of React is that your entire UI is built as a collection of components that is created and managed by the Virtual DOM. Combined with JSX (explained below) you can combine your component’s functionality and UI elements into one easily managed file.

Redux

Redux is a state management tool for React. It is an external library (not a part of React) but because it makes managing things easier you will find most React projects use Redux as well.  Redux is simple to install, you just wrap your <App> component in Redux’s <Provider> Store and every item inside your <App> can be managed by Redux. With the Redux provider in place, you can help ensure that state is updated properly across the entire app and test those assumptions easily. 

Taking a cue from the way React uses the Virtual DOM, the information inside the Redux Store is never updated directly. Instead you create Actions that alert the store when changes need to be registered. The key advantage here is that Redux uses these functions to only update what it knows has changed rather than checking the state of everything available. That saves time and improves app performance. 

JSX

React Developers use JSX - JavaScript syntax eXtension - to simplify their projects even more. JSX lets you use HTML elements inside your React JavaScript files.  For experienced developers used to separating their JavaScript and HTML code, this probably seems like a step backwards. But the beauty of JSX is that you can separate your files logically without having to worry about separating your syntax as well.

This helps with maintaining clean code and debugging as well since React's "render" function with JSX cuts down on the lines of code needed to display content. Your components only need to be made up of your .jsx and .css files. 

Strengths

In essence, React projects are just a bunch of small components combined to create a cohesive web application. Developers love this approach, as it allows for reuse and modularization. They can just focus on the code and can get up to speed on a new React codebase easily.

React’s popularity is a strength all its own. Many programmers like to use React simply because it has such a large developer community. More developers mean more features and libraries to help accomplish tasks that they otherwise would have to recreate themselves.

Best of all, if you know JavaScript then you mostly know React when it comes to syntax. That gives it a very low barrier to entry for any level of JavaScript developer. 

Drawbacks

There is such a thing as too much freedom. Once you create a React app it is up to you to determine the overall project structure and information architecture. React apps do not come pre-configured with everything you need to create an app - you must pick solutions for state management, routing, and more. That can lead to complexity down the line especially as your codebase grows. You will need strict style considerations if you are working with a large team.

Speaking of style, some developers really do not like combining their HTML with JavaScript a la JSX. It can be confusing to developers who prefer a strict separation of concerns. That is fine since you’re not required to use JSX with React but it may reduce the overall utility of the framework if you decide JSX is not worth the effort.

Ionic React

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript. Web developers looking to get more from their React skills should take a look at Ionic React, the native React version of Ionic Framework. Not only can React developers build great apps for web and desktop, but mobile (iOS, Android) as well. 

The best part of Ionic React? It’s just React: standard React development patterns, the standard react-dom library, and the huge ecosystem around the web platform. Ionic Framework uses React Router and the Virtual DOM just as regular React apps do, so you can use the same libraries and tools you know and love.

Ionic Framework also provides over 100+ prebuilt components that let you quickly build mobile-optimized UIs without having to reinvent the wheel. Getting started is easy:

npm install @ionic/cli 
ionic start myApp --type=react
cd myApp
ionic serve

From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.

Bottom Line

Strengths: 

  • Large ecosystem and adoption
  • Virtual DOM and one way data flow enable highly performant applications
  • JSX makes it easy to make components with the UI and functionality combined

Drawbacks:

  • No “batteries included”: developers must pick from a wide variety of tools to build a complete app
  • Some developers do not like combining HTML and JavaScript with JSX

React is good for developers who: 

  • Want a lot of resources for support
  • Want to create apps/components quickly
  • Pure JavaScript lovers 

Angular  

Next up is Angular. It’s widely used in the enterprise with over half of JavaScript developers familiar with it. Angular touts its ability to be used to create both mobile and desktop apps.

Maintained by Google, Angular was originally created in 2009 to address challenges encountered in developing single page applications. Dubbed “AngularJS” (aka Angular 1), it embraced client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architecture. Several years later, Google redesigned it from the ground up, renaming it simply as “Angular” (for versions 2 and above).

Core Concepts

TypeScript

While React uses JSX to let developers pair user interfaces with business logic, Angular uses HTML and CSS along with TypeScript to write out its business logic, a superset of JavaScript. You write the code in TypeScript (ending with a ‘.ts’ file extension) and then your computer transforms that code into JavaScript when the program runs. Some of the benefits include easier debugging and testing but the biggest advantage is from strongly defined types. In TypeScript you have to specify if data is a string, number, or other data type (unlike JavaScript, which has no types - a bit like the Wild West!). Not only does this help developers catch bugs long before they make it into production, large organizations enjoy the extra safety that occurs when a large code base needs to be tested or refactored. That stability is attractive to big companies with large codebases.   

Components

Angular uses components just like React and are the main building block for Angular applications. Each component consists of an HTML template that declares what renders on the page, a Typescript class that defines behavior, a CSS selector that defines how the component is used in a template, and optionally, CSS styles applied to the template. Components are grouped under a module that lets you order components by function, process, or business domain. 

The Angular CLI makes it easy to create new components by typing “ng generate component <name of component>”. That creates a folder in your workspace with the new component’s files. Using the CLI to create components also updates your project’s modules.

Directives and Templates

Within HTML files you can use Angular’s built-in directives to introduce additional functionality. Directives are similar to attributes in regular HTML elements in that they listen to and modify the behavior of other HTML elements, attributes, properties, and components. For example, NgClass which adds or removes a set of CSS classes or NgStyle for HTML styles. 

Angular templates render a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality. For example, using “ng-” in an element tag can introduce JavaScript expressions allowing for powerful templating. A common expression is “ng-if”, used to create conditional statements that return whatever content that follows if the expression evaluates true:

<div *ngIf="condition">
Content to render when condition is true.
</div>

That’s just the tip of the iceberg - there are all sorts of templating options available.

Strengths

Angular's fans sing its praises specifically because of its “batteries included” approach. Some developers love React for the freedom it gives them, but others love Angular for providing everything they need out of the box. This approach reduces cognitive overload and ensures maximum productivity as Angular developers simply focus on building applications quickly. New Angular projects include everything you need to build a great app, including routing/navigation, forms, internationalization support, animations, and progressive web app features.

Angular is a good option for JavaScript developers looking to adopt their first advanced framework, especially those experienced in object oriented programming languages. The strict types and style of code produced by TypeScript classes will be familiar to those used to backend languages like Java or C#. That makes Angular a popular front-end for projects built with a .NET back-end.

Given Google’s continued investment (shipping new major versions every six months) as well as improved community communication via the public roadmap, Angular remains a strong option, especially in the enterprise, with no signs of slowing down.

Drawbacks

TypeScript, while increasingly adopted by more projects every day, might be a hurdle for more junior developers. If you are totally new to TypeScript but need to start contributing to an Angular project immediately, then allow yourself some time to get up to speed.

Another challenge is Angular’s complexity, which can be a barrier to learning it quickly. There are lots of tools and concepts to learn, including dependency injection, observables and RxJS, and reactive or template-driven forms. Fortunately, it’s easy to get started, with many great tutorials available.

Ionic Angular

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript. Web developers looking to get more from their Angular skills should take a look at Ionic Angular, the native Angular version of Ionic Framework. Not only can Angular developers build great apps for web and desktop, but mobile (iOS, Android) as well. 

The best part of Ionic Angular? It’s just Angular: standard Angular development patterns tightly integrated with standard Angular libraries, and the huge ecosystem around the web platform. Ionic Framework uses the built-in Angular routing and CLI just as regular Angular apps do, so you’ll immediately feel comfortable building Ionic Angular apps using the same libraries and tools you know and love.

Ionic Framework also provides over 100+ prebuilt components that let you quickly build mobile-optimized UIs without having to reinvent the wheel. Getting started is easy:

npm install @ionic/cli
ionic start myApp --type=angular
cd myApp
ionic serve

From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.

Bottom Line

Strengths:

  • Robust CLI making it easy to automate new components.
  • Strong types keep things organized for large codebases.
  • “Batteries included” approach helps developers focus on building apps

Drawbacks:

  • Unfamiliarity with Typescript can be a barrier.
  • Opinionated technology choices may be a turn off for some.

Angular is good for developers who:

  • Come from an object-oriented programming or enterprise background
  • Want to focus on app building rather than tooling

Vue

Finally, we have Vue. Vue is explicit that it is a framework only focused on the view layer. Its extensive reliance on templating and use of more traditional HTML/CSS/JavaScript techniques make it a good introduction for anyone still learning the basics of web development. 

That also gives Vue one of its biggest advantages over React or Angular. Vue can easily be inserted into an existing project using a simple <script> tag. Vue acts more like a library (like jQuery) that way instead of a framework which makes Vue easier to integrate into existing projects or migrate them entirely.

Overall, developers who have used Vue are very happy with it and as a result, its popularity is growing rapidly.

Core Concepts

Templates

Vue’s biggest difference from the other two frameworks is its reliance on templating. Angular and React deliver content in programmatic ways while Vue uses the power of the Template to do the same job. You can use the templating syntax with or as a replacement for your HTML files. That lets you update your content from wherever and display it on the browser without having to change anything on the front-end. The following example shows how the template can read information from the ‘{{name}}’ property and displays the name “John Smith” in the browser. 

<div id="counter">
Counter: {{ counter }}
</div>

const Counter = {
data() {
return {
counter: 0
}
}
}

Vue.createApp(Counter).mount('#counter');

You can also use Vue’s directives (using “v-”) to introduce logic into HTML tags similar to Angular’s “ng-” based directives. So with “v-for” you can loop through items in an array to display them in a list on your webpage. “v-if” can be used for conditional statements inside your HTML. 

Virtual DOM

Vue uses the Virtual DOM like React to improve performance. Combined with Vue’s templating that means changes to an app’s state are detected and displayed rapidly. That combines one advantage of React but without the complicated information architecture that can accompany a React App. 

Composition API

The Vue 3 Composition API is a new approach that aims to improve code flexibility and reusability. At its core, there’s no wizardry - these are just pure JavaScript functions that expose various properties:

function useCounter() {
const count = ref(0)
  
function increment () { count.value++ }

  return {
    count,
    increment
  }
}

export default {
  setup () {
    const { count, increment } = useCounter()

    return {
      count,
      increment
    }
  }
}

As shown above, it’s simple to pull in the useCounter function with minimal fuss. 

Strengths

Vue is a great choice for developers who want something more React-like but with the traditional HTML/CSS file structure. But Vue is far less complex than Angular making it easy to get started right away, especially if you want to stay away from the strict typing required in TypeScript. 

Vue fits the incremental adoption use case well: it can easily be inserted into an existing project using a simple <script> tag. Vue acts more like a library that way instead of a framework which makes Vue easier to integrate into existing projects or migrate them entirely.

Drawbacks

Vue currently has the smallest developer community out of the three major web frameworks. That may make it difficult to find the support you need, whether hiring developers who already have experience or turning to the community to debug a complicated coding issue. It also means fewer plugins and libraries to help speed up development of common workflows. 

Another drawback is if you are already working with a complex project then Vue will not help you organize your codebase like React or Angular could. 

Ionic Vue

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript. Web developers looking to get more from their Vue skills should take a look at Ionic Vue, the native Vue version of Ionic Framework. Not only can Vue developers build great apps for web and desktop, but mobile (iOS, Android) as well. 

The best part of Ionic Vue? It’s just Vue: standard Vue development patterns tightly integrated with standard Vue libraries, coupled with the huge ecosystem surrounding the web platform. Ionic Framework uses the built-in Vue router and CLI just as regular Vue apps do, so you’ll immediately feel comfortable building Ionic Vue apps using the same libraries and tools you know and love. You can seamlessly use TypeScript or JavaScript with Ionic Vue which adds to the flexibility of the framework and its overall simplicity.

Ionic Framework also provides over 100+ prebuilt components that let you quickly build mobile-optimized UIs without having to reinvent the wheel. Getting started is easy:

npm install @ionic/cli
ionic start myApp --type=vue
cd myApp
ionic serve

From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.

Bottom Line 

Strengths: 

  • Easy to learn and integrate with existing web projects
  • Templating makes it easy to display data with regular HTML
  • Very small file size helps performance

Drawbacks:

  • Smaller (but growing!) community
  • If you’re already dealing with complexity issues, then Vue may not help solve them

Vue is good for Developers who: 

  • Want to keep things as simple as possible. 
  • Only want to work on the UI and leave the underlying architecture alone

What JavaScript Framework Should I Learn?

So, now that you’ve learned all about Angular, React, and Vue: which one is the best? Which one must you adopt to stay on top of the web development world in 2021 and beyond? 

The truth is, all three frameworks are great choices. Each one comes with its strengths and weaknesses and whether or not a framework is right for your project depends on you and/or your team’s background. 

All three were built with the goal to enhance a developer’s skills and make their lives easier rather than totally replace everything anyone knows about programming. All of them follow modern web development techniques too, so you can feel confident that if you start to learn one you can pick things up with another down the line. 

Ultimately, we recommend building an app prototype using each web framework, and see which one works best for you and your team. The fastest way to compare each framework is to use Ionic’s app wizard tool. Select a color theme, choose an icon, then select either Angular, React, or Vue. Your new progressive web app is generated immediately, providing you with a great foundation to build upon.

React, Angular, and Vue. All three frameworks will take your web development journey to the next level. Happy coding everyone!

You’re in good company. Ionic powers millions of apps at some of the smartest companies in the world.

See all Customers
Arrow Forward
Community Forum
Arrow Forward

Stop by and say hello. The Forum is the best place to connect, ask a question, or help out other Ionic developers!

Explore the docs
Arrow Forward

Take a look and get coding! Our documentation covers all you need to know to get an app up and running in minutes.