Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

JavaScript Bake-Off: Angular, React, and Vue

DZone 's Guide to

JavaScript Bake-Off: Angular, React, and Vue

You probably know about these three JavaScript framework heavyweights, but which one is the right one to use? Try looking at the same app built with each framework and make your own evaluation.

· Web Dev Zone ·
Free Resource

In this post, we present an open source reference application developed three times using three different frameworks: React, Vue & Angular.

As Keyhole consultants, we are exposed to a plethora of technology stacks and implementations from client project to client project. Particularly with our enterprise clients, great care must go into selecting the best technologies for the company's technical needs and current landscape. After all, they don't want to be re-writing the same application in just a couple of years due to lackluster choices and shortage of developers to add functionality.

We believe it is important to utilize a formal MV* JavaScript framework when implementing a JavaScript Single Page Application (SPA) user interface. That might seem obvious, but we have rescued many projects that attempted to write applications using jQuery, which is possible but results in large JavaScript source files. They are difficult to maintain and break down in a team development environment.

When it comes to JavaScript MV* frameworks, the options are plentiful. Arguably, the current most popular frameworks are ReactJS, Angular, and Vue. All of them have pros and cons, but you will be successful using any of these frameworks to write SPAs. The question becomes: how do you evaluate and determine the best technical choices for you?

A common way organizations will make this decision is to have a "bake-off" competition. To do this, a reference application is implemented in one or more frameworks to see it in action. By seeing the code in action and implementing a solution, it can help determine the type of JavaScript framework that will fit best into your organization.

So without further ado, let me introduce our "bake-off" JavaScript SPA application.

Now-Playing Application

In this "bake-off," the application in question is Now-Playing. It displays movies currently at the theater and allows users to view, search, and rank motion pictures. It is robust enough to give good insight into many features that enterprise-level teams would need.

The three free open source implementations are available on GitHub at the following repositories:

Angular: https://github.com/in-the-keyhole/khs-angular2-now-playing

React: https://github.com/in-the-keyhole/khs-react-now-playing

Vue: https://github.com/in-the-keyhole/khs-vue-now-playing

Instructions

Simply follow the ReadMe instructions listed on each repository.

The applications will each implement "Now-Playing" with near pixel-perfect fidelity. You can then study each framework's JavaScript implementation. Keep an eye out for which approach best fits your organization's culture, abilities, and style.

Final Mentions

All of the frameworks being evaluated have been deployed to production by some very well known companies. React has been used by Facebook, Netflix, Uber, and Airbnb. Vue has been used by Alibaba, Nintendo, and Expedia. Angular has been used by Barnes & Noble, Wix, Healthcare.gov, Forbes, and The Guardian, among others.

We hope that you found this side-by-side comparison helpful in making your own distinctions. The truth of the matter is that you can build a quality application with any of these libraries. Most of the differences come down to personal preferences and what matters most to your organization. Keep an eye out for an upcoming white paper going more in-depth on these topics.

Topics:
angular ,spa ,vue ,react ,javascript ,web design and web development ,frameworks ,comparison ,code

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}