Angular vs. React vs. Vue: A Comparison (Updated)
Tags: angular, react, vue, javascript
Published: 2019-10-04 07:53:45

<h1><strong><span style="color: #000000;">Angular Vs React vs Vue in 2018 </span></strong></h1>
There is no denying the fact that the virtual world of web development and <a href="https://cuelogic.com/custom-software-development">custom software development</a> has been on a thriving technological ride in the past decade. And when it comes to frontend, JavaScript has been at the helm of this drive.

This popularity has given rise to tons of JavaScript frameworks along the way. The aim of this guide is to take an extensive look two such widely used frameworks - Angular and Vue - and one library - React.

This is a challenging post to write, but we're sure you must have faced problems dealing with <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://cuelogic.com/blog/top-3-best-javascript-frameworks-in-2018/?s=javascript">JavaScript frameworks</a></span> in the past and chances are, you must've been confused regarding which one to use.

If you're having trouble deciding between <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://cuelogic.com/blog/what-are-the-differences-between-angular-and-react/?s=react">Angular</a></span>, <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://cuelogic.com/blog/what-are-the-differences-between-angular-and-react/?s=react">React</a> </span>or the new kid in the block, Vue, we're here to help.

This Guide is divided into the following parts -

<strong>1. About the frameworks</strong>
<strong style="font-size: 1rem;">2. Importance of the frameworks</strong>
<strong>3. Maturity of the frameworks</strong>
<strong>4. Future of the frameworks</strong>
<strong>5. Quality of the community</strong>
<strong>6. Basic Programming concepts</strong>
<strong>7. Ease of use for large</strong> <strong>applications</strong>
<strong>8. Comparing performances</strong>
<strong>9. 101 guide to get started </strong>

Alright, so let's cut to the chase and compare the three below.

https://youtu.be/Nt80wG-C9UY
<h2><span style="color: #000000;"><strong>1. About the frameworks</strong></span></h2>
<strong>Angular:</strong>

Angular is a TypeScript based JavaScript Framework that has been developed and maintained by Google. Other notable companies using Angular are: Wix, Weather.com, Forbes, Etc.

<strong>React:</strong>

Known as the ‘JavaScript Library for building user interfaces” , React is developed and maintained by Facebook. Other notable companies using React are: Uber, Twitter, Netflix, Walmart, Etc.

<strong>Vue:</strong>

Developed and released in 2014 by an ex-Google employee named Evan You. Notable companies using Vue are: Alibaba, Nintendo, GitLab, Etc.

While Angular and React have been popular products from large corporations, Vue is a one-man army that has quickly risen to vogue status because of the <strong>Model-view-view-model (MVVM)</strong> architectural pattern that it deploys.

<img class="aligncenter wp-image-6398 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/MVVM-Diagram.png" alt="Model-view-view-model (MVVM)" width="1826" height="382" />

Since MVVM facilitates the separation of the Graphical User Interface in the <a href="https://hbr.org/1996/03/getting-the-most-out-of-your-product-development-process">development process</a> from the Business Logic or Break-up End Logic, Vue is quickly becoming the <strong>go-to</strong> <strong>language</strong> for building interactive web application interfaces.
<h2><span style="color: #000000;"><strong>Importance of These Frameworks</strong></span></h2>
<strong>Angular:</strong>

<strong>Simple &amp; Quick</strong> : MVC framework that is capable of executing complex tasks and building dependency between the controller and template

<strong>DOM has Markup</strong> : In Angular, the Markup is directly positioned in the HTML records. This is what the stream looks like: HTML → &gt; DOM — -&gt;&gt; Engine

<strong>Dependencies Handling</strong> : Angular is exceptional at handling dependencies. The application can be segregated into isolated modules which may or may not have conditions on each other.

Easily readable Angular templates that majorly deploy HTML tags👇👇👇.

<img class="aligncenter wp-image-6403 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/Angular-Code.png" alt="Easily readable Angular templates" width="357" height="501" />

<strong>
React:</strong>

<strong>Unidirectional</strong> : The single-direction data flow in React ends up making the code more  stable.

<span style="font-size: 1rem;"><strong>Virtual Dom</strong> : Presence of a Virtual DOM helps to improve the <a href="https://cuelogic.com/blog/how-to-bring-in-the-best-user-experience-for-your-web-application/">user experience</a> and also the development rate. Code Snippet in the next page.</span>

<strong>Open Source</strong> : Developers all around the globe contribute to the framework. Features like Batching and Pruning have been community contributions.

Better Development rate with React👇👇👇

<img class="aligncenter wp-image-6401 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/React-Development-Rate-1.png" alt="Better Development rate with React" width="675" height="778" />

<strong style="font-size: 1rem;">Vue:</strong>

<strong>Syntax</strong> : The syntax deployed by Vue is supposed to be neat and smooth. For example, @keyup.enter.preven = “do Stuff” can handle any required event.

<strong>Learning Curve</strong> : It is extremely easy to introduce new developers in Vue project. The learning curve is smooth with single-file components that make it easy to scrutinize the code base.

<strong>Swift</strong> : Developers can quickly glimpse through any project by refer ring to the. Vue file that stores about the template, CSS, data-model, lifecycle hooks, mapped Vue exactions, watchers, etc.

<strong>Declarative Templates</strong> : Easy HTML templates that are readable without the knowledge of other <a href="https://cuelogic.com/blog/10-best-iot-programming-languages/">programming languages</a>. Code Snippet in the next page.

Readable HTML templates, even without the knowledge of other languages
👇👇👇

<img class="wp-image-6402 size-full aligncenter" src="https://cuelogic.com/wp-content/uploads/2018/01/Vue-Code.png" alt="Readable HTML templates" width="690" height="822" />
<h2><strong><span style="color: #000000;">Maturity of the frameworks</span></strong></h2>
Choosing the right framework is pivotal to the success of your JavaScript project. While making the decision, it is important to consider whether the system assists or complicates the addition of new elements. When we talk about the maturity of these frameworks, it can be gauged by the response from the <a href="https://github.community/">GitHub community</a>. Here are some crucial numbers* to put things in perspective:

<img class="alignnone wp-image-6404 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/Angular-Vs-React-vs-Vue-Comparison.png" alt="Github *Statistics at the time of compilation" width="1496" height="387" />

*Statistics at the time of compilation

NPM Trends provides the following graph which gives an account of the number of downloads of npm package of those respective frameworks in the past two years.

<img class="aligncenter wp-image-6405 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/npm-downloads.png" alt="npm package of frameworks in the past two years" width="1162" height="651" />

If the Github stars are plotted on the graph, an interesting trend surfaces.

<img class="aligncenter wp-image-6406 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/github-downloads.png" alt="Github stars on trend surfaces" width="842" height="569" />
<h3><strong>Other Important Factors</strong></h3>
<strong>Angular </strong>
<ul>
 	<li>One major update every 6 months</li>
 	<li>Deprecation period of 6 months for every release</li>
 	<li>Long-term support versions starting from Angular 4</li>
 	<li>Easy updating process</li>
 	<li>Full Framework with bundled offerings</li>
</ul>
<strong>React</strong>
<ul>
 	<li>Stable APIs as depicted by the design principles of Facebook</li>
 	<li>Scripts available to move from current to newer APIs. Example - react-codemod</li>
 	<li>Easy migrations</li>
 	<li>Smooth upgrades</li>
 	<li>Stable major releases Independent but fast moving libraries</li>
</ul>
<strong>Vue </strong>
<ul>
 	<li>Similar APIs during version upgradation in small apps</li>
 	<li>Assisting upgrade migration-helper-tool</li>
 	<li>Issues while migrating versions in large apps</li>
</ul>
As evident, the popularity of Vue has been skyrocketing, is already more than that of Angular, and is slated to soon surpass the traction of React. Additionally, all three frameworks are available under the MIT License. While the numbers of core developers working on React have not been officially revealed, Angular has listed 37 contributors on the team page, while Vue lists 22 core developers and 14 community partners.
<blockquote><strong><em>To reach a verdict, Angular and React are mature frameworks owing to their large scale adoption. Being a new market player, Vue is still in the development phase but is leading in popularity.</em></strong></blockquote>
<h2><span style="color: #000000;"><b>Future of the Frameworks</b></span></h2>
<h3><strong>The Outlook:</strong></h3>
To better gauge the direction in which these technologies are headed, let’s look at their present statuses. According to the <a href="https://insights.stackoverflow.com/survey/2017">Stackoverflow Survey of 2017</a>, JavaScript continues to be the most popular language among Web Developers.

<img class="aligncenter wp-image-6407 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/jS1.png" alt="Most popular languages by Occupation" width="706" height="337" />

This is valid for other mentioned occupations as well.

Among JavaScript frameworks, React proves to be the leading choice for 66.9% of the developers. Comparatively, Angularjs clocks a lower approval rate of 51.7%.

<img class="wp-image-6408 size-full aligncenter" src="https://cuelogic.com/wp-content/uploads/2018/01/jS2.png" alt="Framework Compression " width="765" height="422" />
<h3><strong>Awareness &amp; Satisfaction:</strong></h3>
<img class="wp-image-6409 size-full aligncenter" src="https://cuelogic.com/wp-content/uploads/2018/01/awareness-Js.png" alt="Front-end Frameworks Survey" width="1000" height="610" />

Additionally, according to StateofJS Front-end Frameworks Survey, awareness about Vue is lower at 94%, compared to almost 100% for Angular and React. But when it comes to satisfaction, a whopping 40% of the developers who have used Angular 1 do not plan to use it again. This is in stark contrast to the readings of React and Vue.

Hence, there is no denying the fact that Angular is fast losing the popularity that it once saw as developers are finding more support in other popular frameworks. On the other hand, React seems to be the current market leader of the three, winning the trust of the community and having a bright future ahead.

But the same goes for Vue as well. Considering its nascent status, it has gained quick traction and, as far as the GitHub community is concerned, its popularity is on the verge of surpassing even that of React’s.
<blockquote><strong><em>According to trends and statistics, <a href="https://cuelogic.com/angularjs-development">Angularjs development</a> is popular and will keep growing. React is the current market leader, but with Vue's traction and popularity it will strongly be challenged.</em></strong></blockquote>

<h2><strong style="color: #000000; font-size: 1.25rem;">Quality of Community</strong></h2>
<strong>Angular</strong>

It has a huge community of users, with the downloads in the last month alone ranging between 1.5 - 2 Million. Moreover, a super active community on GitHub means that you always have someone or the other to help you sail through encountered issues. A range of solutions that are compatible with different versions of Angular can be explored, including advice from veteran developers.

<strong>React</strong>

It boasts an impressive download count of about 10 Million downloads in the past month alone. Being supported by the bigshots of Facebook, WhatsApp, and Instagram, React has no dearth of help from experienced developers. Like Angular, React too boasts of an impressive GitHub community where people are always ready to lend a helping hand. Although, it is important to note that React recommends using JSX, which is a modified version of JavaScript extended with XML Syntax. If you haven’t worked with JSX before, this might pose as a problem to begin with due to its complexity. So be ready to actively depend on the community for help.

<strong>Vue</strong>

The community of Vue is considered to be much smaller than that of React and Angular since it is the latest market player. However, things might look quite different within a year or two since Vue can very well end up being the most popular JavaScript framework.

<strong>Ease of Finding a Developer</strong>
<ul>
 	<li>When it comes to recruiting and finding the right talent, the tables turn a bit.</li>
 	<li>While being a popular choice among developers, it is not easy to find a talented developer if you are working with React because it is a challenge to find a developer who can modify JSX. However there are certain <a href="https://cuelogic.com/outsource-software-development">outsource software development</a> companies that specialize in Javascript &amp; React Development</li>
 	<li>Working with HTML templates proves to be much easier comparatively.</li>
 	<li>Hence, if you are planning to work with Angular or Vue, you can choose to hire talented HTML developers who can quickly learn about these frameworks. Directly finding a talented Angular or Vue developer is not a big deal since the learning curve is derived from HTML, which already has an abundant talent pool in the market.</li>
</ul>
<blockquote><strong><em>In the case you already have an in-house team of developers or are more interested in an object-oriented development backdrops, Angular is the most relevant choice here.</em></strong></blockquote>
<h2><span style="color: #000000;"><strong>Basic Programming Concepts of Angular, React &amp; Vue</strong></span></h2>
<strong>Languages:</strong>
<ul>
 	<li>Each of these frameworks uses a different scripting language.</li>
 	<li>Angular makes use of TypeScript. TypeScript is a popular open-source programming language that has been developed by Microsoft. It actively involves crucial concepts like static types which provide specific capabilities including automatic refactoring, jump to definitions, etc.</li>
 	<li>Reacts has focused itself around JavaScript ECMAScript 6 (ES 6) which is a version of JavaScript, to put it simply.</li>
 	<li>Similarly, Vue makes use of JavaScript ES 5.</li>
</ul>
<strong style="font-size: 1rem;">Templates:</strong>
<ul>
 	<li>To choose the right framework you need to figure out whether you want to work with JSX or HTML.</li>
 	<li>Angular and Vue are based around standard HTML templates and components that facilitate easy structuring and code reuse. On the other hand, JSX can prove to be a huge concern with new developers.Let’s look at the pros and cons of each -<span style="text-decoration: underline;"><span style="text-decoration: underline;"><strong>JSX:</strong></span></span>
<table>
<tbody>
<tr>
<td width="308"><strong>Pros</strong></td>
<td width="308"><strong>Cons</strong></td>
</tr>
<tr>
<td width="308">JSX is better at code-completion and compile-time</td>
<td width="308">Acts as a barrier for new developers since it is a combination of JavaScript + XML + HTML</td>
</tr>
<tr>
<td width="308">Bugs arising due to typos can be easily found as React does not compile typos and prints the number of the line where the typo resides.</td>
<td width="308">Complex nature as compared to HTML Templates</td>
</tr>
<tr>
<td width="308">React puts HTML into JavaScript which is better since JS is always more powerful</td>
<td width="308">No demarcation between UI Templates and Inline JavaScript logic</td>
</tr>
</tbody>
</table>
<span style="text-decoration: underline;"><strong>HTML:</strong></span>
<table>
<tbody>
<tr>
<td width="308"><strong>Pros</strong></td>
<td width="308"><strong>Cons</strong></td>
</tr>
<tr>
<td width="308">Demarcated view layer from the rest of the framework</td>
<td width="308">More difficult debugging process compared to JSX</td>
</tr>
<tr>
<td width="308">Ability to experiment with various techniques for optimal performance</td>
<td width="308">Template based approach instead of components</td>
</tr>
<tr>
<td width="308">Clear separation between dynamic and static parts of the view</td>
<td width="308"><strong> </strong></td>
</tr>
</tbody>
</table>
</li>
</ul>
<h2><span style="color: #000000;"><strong>Ease of use for large applications</strong></span></h2>
The capabilities of the respective frameworks vary in accordance with the size of the applications that need to be developed.

Many developers opine that Angular 3 is unfit when working with large and complex applications. It proves to be perfect if complexity is low, but issues start to mount as the size of the applications scales.

For example, Gaming applications are usually large and involve DOM manipulation. Moreover, in applications that involve too much data binding, Angular 1 tends to become slow if the watches exceed 2500.

On the other hand, React proves to be the go to library if you plan to scale the app. This is validated by the fact that Facebook, WhatsApp, and Instagram all make use of React and each of them are large applications at a global scale. A maintainable architecture with server-side rendering can be easily developed with React.

Developers also consider Vue to be helpful while working with large-scale applications. The framework follows a lean methodology for the learning curve, which immediately trumps the complexity of frameworks like Angular that often prove to be difficult among new developers and large-scale app developers.

<a href="https://www.cuelogic.com/wp-content/uploads/2018/01/Performance-Benchmark-Image.png"><img class="wp-image-9421 size-full" src="https://www.cuelogic.com/wp-content/uploads/2018/01/Performance-Benchmark-Image.png" alt="Performance Benchmark Image" width="300" height="678" /></a> Source: https://www.stefankrause.net/

Regarding rendering speeds and performance tests, here's a chart that lists performance <strong>benchmarks</strong> of all the three for more clarity.
<div class="blog-hubspot-form">[hubspot type=form portal=3432998 id=43c818e9-ba9d-4a5e-a027-8bf8aa4b4481]</div>
<h2><span style="color: #000000;"><strong>COMPARING PERFORMANCES</strong></span></h2>
<table>
<tbody>
<tr>
<td style="text-align: left;" width="166"><strong>Parameter</strong></td>
<td style="text-align: left;" width="154"><strong>Angular</strong></td>
<td style="text-align: left;" width="154"><strong>React </strong></td>
<td style="text-align: left;" width="154"><strong>Vue</strong></td>
</tr>
<tr>
<td width="166">Recommended Language</td>
<td width="154">TypeScript</td>
<td width="154">JS, JSX</td>
<td width="154">JS, Vue</td>
</tr>
<tr>
<td width="166">Architecture Flexibility</td>
<td width="154">No</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
</tr>
<tr>
<td width="166">Logic Separation</td>
<td width="154">Good</td>
<td width="154">Good</td>
<td width="154">Good</td>
</tr>
<tr>
<td width="166">Rendering Speed</td>
<td width="154">Slow</td>
<td width="154">Fast</td>
<td width="154">Fast</td>
</tr>
<tr>
<td width="166">Most Known Architecture</td>
<td width="154">MVC</td>
<td width="154">Flux</td>
<td width="154">Flux</td>
</tr>
</tbody>
</table>

<hr />

<table>
<tbody>
<tr>
<td style="text-align: left;" width="166"><strong>Parameter</strong></td>
<td style="text-align: left;" width="154"><strong>Angular </strong></td>
<td style="text-align: left;" width="154"><strong>React</strong></td>
<td style="text-align: left;" width="154"><strong>Vue</strong></td>
</tr>
<tr>
<td width="166">Server Side Rendering</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
</tr>
<tr>
<td width="166">CLI</td>
<td width="154">Yes</td>
<td width="154">Not Official</td>
<td width="154">Yes</td>
</tr>
<tr>
<td width="166">Debugging Tools</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
</tr>
<tr>
<td width="166">Testing</td>
<td width="154">Jasmine and Karma</td>
<td width="154">Developer’s Choice</td>
<td width="154">Karma and Mocha, Jest</td>
</tr>
<tr>
<td width="166">Data Library</td>
<td width="154">No</td>
<td width="154">No</td>
<td width="154">No</td>
</tr>
</tbody>
</table>

<hr />

<table>
<tbody>
<tr>
<td style="text-align: left;" width="166"><strong>Parameter</strong></td>
<td style="text-align: left;" width="154"><strong>Angular </strong></td>
<td style="text-align: left;" width="154"><strong>React</strong></td>
<td style="text-align: left;" width="154"><strong>Vue</strong></td>
</tr>
<tr>
<td width="166">Mobile Build</td>
<td width="154">Ionic</td>
<td width="154">React-Native</td>
<td width="154">Weex</td>
</tr>
<tr>
<td width="166">Code Reusability</td>
<td width="154">Yes</td>
<td width="154">No, Only CSS</td>
<td width="154">Yes, HTML and CSS</td>
</tr>
<tr>
<td width="166">Size</td>
<td width="154">143k</td>
<td width="154">43k</td>
<td width="154">23k</td>
</tr>
<tr>
<td width="166">Code Stability</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
</tr>
<tr>
<td width="166">Bootstrap Integration</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
<td width="154">Yes</td>
</tr>
</tbody>
</table>

<hr />

<strong>Diy - Test yourself:</strong>

If you want to carry out the tests yourself, here’s are relevant commands that you can use:
<table style="height: 505px;" width="730">
<tbody>
<tr>
<td style="text-align: left;" width="241"><strong>Angular</strong></td>
<td style="text-align: left;" width="204"><strong>React</strong></td>
<td style="text-align: left;" width="183"><strong>Vue</strong></td>
</tr>
<tr>
<td style="text-align: left;" width="241">
<ul>
 	<li>$ npm install -g @angular/cli</li>
 	<li>$ git clone https://github.com/mikpetr/angular -performance-test.git</li>
 	<li>$ cd angular-performance-test</li>
 	<li>$ npm install</li>
 	<li>$ ng build -prod</li>
 	<li>$ npm install -g http-server</li>
 	<li>$ cd dist $ http-server</li>
</ul>
</td>
<td style="text-align: left;" width="204">
<ul>
 	<li>$ git clone https://github.com/mikpetr/r eact-performance-test.git cd react-performance-test npm install npm run dev Browse to http://localhost:8080</li>
</ul>
</td>
<td width="183">
<ul>
 	<li style="text-align: left;">$ git clone https://github.com/mikpetr/v ue-performance-test.git</li>
 	<li style="text-align: left;">$ cd vue-performance-test</li>
 	<li style="text-align: left;">$ npm install</li>
 	<li style="text-align: left;">$ npm run build</li>
 	<li style="text-align: left;">$ cd dist</li>
 	<li style="text-align: left;">$ npm install -g http-server</li>
 	<li style="text-align: left;">$ http-server</li>
</ul>
</td>
</tr>
</tbody>
</table>
<em>As compiled by ITNext, the performance of these tests are carried out with the help of Google Chrome performance tool for calculating the time, which starts when the button is clicked and ends when the rendering process does. Here are the results of the tests*.</em>

<img class="wp-image-6410 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/Vue-time.png" alt="Performance Testing - Vue rendering time 1191ms" width="1920" height="947" /> Performance Testing - Vue rendering time 1191ms

<img class="wp-image-6411 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/Angular-time.png" alt="Performance Testing – Angular rendering time 931 ms" width="1920" height="946" /> Performance Testing – Angular rendering time 931 ms

<img class="wp-image-6412 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/react-time.png" alt="Performance Testing - React rendering time 1819 ms" width="1921" height="945" /> Performance Testing - React rendering time 1819 ms
<ul>
 	<li>
<blockquote><em><strong>Angular 5 Framework in quite bloated in size.</strong></em></blockquote>
</li>
 	<li>
<blockquote><em><strong>React and Vue have Virtual DOMs which provide a boost to the performance.</strong></em></blockquote>
</li>
 	<li>
<blockquote><em><strong>Vue has the deepest memory allocation.</strong></em></blockquote>
</li>
</ul>
<h2><span style="color: #000000;"><strong>101 Guide to get started on the chosen framework </strong></span></h2>
<h3><strong><span style="color: #000000;">Angular: Steps to begin development</span></strong></h3>
&nbsp;
<ul>
 	<li><strong> Setting up the development environment </strong></li>
 	<li>Install Node.js and NPM on your local machine</li>
 	<li>Now globally install the Angular CLI</li>
</ul>

<hr />

<ul>
 	<li><strong> Create a new project </strong></li>
 	<li>Launch the terminal</li>
 	<li>Generate a new project by running the following command</li>
</ul>
ng new my-app

<hr />

<ul>
 	<li><strong> Serve the Application </strong></li>
 	<li>Launch the server by navigating to the project directory cd my-app ng serve --open</li>
 	<li>This will launch the App

<hr />

</li>
 	<li><strong>Editing your First Angular Component</strong></li>
 	<li>The first Angular Component would have been created by the CLI. This is the root component.
It can be found in the location ./src/app/app.component.ts and it is named app-root</li>
 	<li><span style="font-size: 1rem;">You can now open the Component file and change the title by editing the title property to the name of your choice. export class AppComponent</span></li>
</ul>
{

title = 'My First Angular App!';

}
<ul>
 	<li>Style the component by opening src/app/app.component.css</li>
</ul>
h1 {

color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;

}

<hr />

Continue to develop you app accordingly. Everything that make up your app, including all components, templates, styles, images, etc. of your app reside in the src folder.

<img class="size-full wp-image-6413 aligncenter" src="https://cuelogic.com/wp-content/uploads/2018/01/Angular-get-started.png" alt="" width="422" height="502" />
<h3><span style="color: #000000;"><strong>Setting up a React project:</strong></span></h3>
&nbsp;
<ul>
 	<li><strong>Install the Sample Application</strong></li>
 	<li>Clone the es6-tutorial react repository with the following command git clone <a href="https://github.com/ccoenraets/es6-tutorial-react">https://github.com/ccoenraets/es6-tutorial-react</a></li>
 	<li>Next examine the React implementation of the mortgage calculator application

<hr />

</li>
 	<li><strong>Set-up Babel and Webpack</strong></li>
 	<li>Launch the command prompt</li>
 	<li>Navigate cd to the es6-tutorial-react directory</li>
 	<li>Create a package.json file through the following command: npm init</li>
 	<li>Now install the React and React-dom modules through the following command: npm install react react-dom --save-dev</li>
 	<li>Now install the Babel and Webpack modules with the following commands: npm install babel-core babel-loader webpack --save-dev</li>
 	<li>install the ECMAScript 2015 and React presets with the following command: npm install babel-preset-es2015 babel-preset-react --save-dev</li>
 	<li>Create a new file called webpack.config.js in the es6-tutorial-react directory and define it as follows:<img class="aligncenter wp-image-6414 size-full" src="https://cuelogic.com/wp-content/uploads/2018/01/setting-up-react.png" alt="es6-tutorial-react directory " width="662" height="432" /></li>
 	<li>Add a new script called webpack that compiles app.js by opening package.json"scripts": {"webpack": "webpack"},</li>
 	<li><span style="font-size: 1rem;">Create a build directory in the es6-tutorial-react directory to host the compiled application version.</span>

<hr />

</li>
 	<li><strong>Build &amp; Run</strong></li>
 	<li>Go to the es6-tutorial-react directory in the command line and type this command: npm run webpack</li>
 	<li>Go to your browser and launch the index.html file to test the application</li>
</ul>
<h3><span style="color: #000000;"><strong>Setting up a Vue project:</strong></span></h3>
<ul>
 	<li>Install Node.js and npm command in your system</li>
 	<li>Install Vue CLI globally with the following command $ npm install -g vue-cli</li>
 	<li>Initiate a new project with this command $ vue init webpack vueapp01</li>
 	<li>The project should be created in the folder vueapp01 You can change into the required directory with the following command: $ cd vueapp01</li>
 	<li>Install additional dependencies: $ npm install</li>
 	<li>Launch the web server in development mode: $ npm run dev</li>
 	<li>In case you want to build for production, use this command: $ npm run build</li>
</ul>
<strong>Ways to include Vue in projects</strong>
<ul>
 	<li>Use CDN - Include the &lt;script&gt; tag in the HTML File.</li>
 	<li>Use the NPM to install</li>
 	<li>Use Bower to install</li>
 	<li>Set up your project with Vue-cli</li>
</ul>
The bottom line is, the choice of your framework will depend on the type of requirement that you have coupled with the capabilities of your inhouse team. For instance, large apps can be developed with React but Object-oriented programming approach can be achieved only with Angular. Additionally, Vue is a perfect choice if you are looking for a lightweight framework.
<blockquote><strong>Whatever be the case, make sure that you weigh your options properly. Migrating to other technologies will not be an easy task once your application has been already developed!</strong>
<h2><b style="font-size: 1.25rem;">The Verdict</b></h2>
</blockquote>
For those who love massive ecosystems and more flexibility, <strong>React</strong> is the way to go.

<strong>Angular</strong> uses <span style="color: #000000;">TypeScript </span>and is ideal for programmers with a solid Object-Oriented Programming (OOP) background who need detailed guidance and structure while <strong>Vue</strong> is relatively simple to pick up and integrate for a small team of core developers.

<b>Don't forget you can download the entire blog here - </b>

<span style="font-size: 14pt;"><strong>Liked this post? Which ones are you using? Are you looking to make a switch or modernizing your existing ones? Let us know in the comments!</strong></span>
<div class="blog-hubspot-form">[hubspot type=form portal=3432998 id=43c818e9-ba9d-4a5e-a027-8bf8aa4b4481]</div>

<b>Source: <a href="https://www.cuelogic.com/blog/angular-vs-react-vs-vue-a-2018-comparison">Cuelogic Blog</a></b>