Choosing the JavaScript Framework for Your Next Enterprise-Grade App

Gain insight into choosing the right JavaScript framework for your next enterprise-grade app. Learn about Angular, React, Vue, Ember and Aurelia.

Update (15 Feb, 2018): This webinar is now available as a whitepaper presenting the key criteria for choosing a JavaScript framework, from ecosystem considerations such as history, corporate support and community, to framework-specific considerations like the getting started experience, skill requirements and tooling available. [Free download]

A couple of weeks ago I had the pleasure of hosting a webinar to help give insight in to today's popular JavaScript frameworks, including Angular, React, Vue, Ember and Aurelia. During the webinar we had limited time to discuss each framework and I had to get through a lot of content. So, this blog post serves as a way to find the recorded webinar as well as a quick breakdown of each framework.

As a quick disclaimer: as you read this, keep in mind that I am not necessarily an expert in each framework. There may be more efficient ways, or just other routes, to handle the same scenario that I set up for this project. Now, with that out of the way let's go ahead and get started.

First things first, if you weren't able to join the webinar, or if you'd just like a refresher of what I covered, here's a recording of the webinar.

As for the slides, you can find them right here. It's all driven through the web so no need to download anything!

During the webinar I covered a sample application for each technology. It's a fairly simple application that covers some of the basics for each framework. The app highlights:

• How to bind a simple string (title of the page)
• Binding and rendering an unordered list with list items
• How to bind to an input element
• Responding to a click event of a button
• Adding an item to the unordered list

Here's a quick gif of the app in action.

Figure 1: Sample application showing a list of items and adding an item through the input element and a simple button

If you'd like to follow along here's the GitHub repo for the sample project. You'll be able to use the readme of the project to set up each framework's app.

Now, let's dive in to each framework!

Angular

Angular is one of the more well-known libraries that I covered during the webinar. It doesn't need a ton of introduction, but Angular continues to receive regular updates and will soon see Angular 5 (currently in beta) go mainstream. Coming from a lot of history with AngularJS 1.x and Angular 2 and 4, this framework has been re-written to ensure that it is not held back by older versions and serves the modern JS dev far better.

Here are some quick stats of the current popularity of the framework.

• 27K+ stars on GitHub
• 1.7 million NPM downloads per month
• 127,272 downloads of Augury, Developer Tools for Chrome

Angular has picked up a lot of steam within the enterprise, and for good reason. TypeScript tames JavaScript a bit by bringing in strong types, and Angular itself is very strict with how an application should be set up. TypeScript is very popular with developers coming from typed languages (for obvious reasons). There are also specific ways that components, routes, and services should be set up which means that the guidelines offered by Angular can be, and must be, adhered to. This all means that large teams have an easier time ensuring code quality and collaborating overall. Of course, smaller dev shops can benefit from this as well, but these factors tend to help Angular gain traction within larger organizations.

While it can be a bit cumbersome to work with from scratch, tooling like the Angular CLI makes it very easy to pick up and start working with Angular. It also means that taking advantage of features like Ahead of Time compilation and other features that speed up Angular applications—which we should all take advantage of—is quite easy.

React

React is the most-used library out of all the ones that I covered during the webinar. When it was initially released the idea of the Virtual DOM was pretty revolutionary. Nowadays React remains popular and has recently undergone a revamp of its core engine, dubbed React Fiber, that everyone can take advantage of since React 16. Impressively the React team managed to rewrite React without forcing huge sweeping changes or upgrade pains for their users.

Here are some quick stats of the current popularity of the framework.

• 75K+ stars on GitHub
• ~5 million NPM downloads per month
• 720,848 downloads of React Developer Tools for Chrome

One thing I should mention right away is that the biggest reason for people not choosing React used to be the license associated with it. The BSD + patent license was something that scared away a lot of devs, but earlier this year Facebook got rid of this license and went with the standard MIT license. If you go with React 16+ you'll be safe.

Many people pick React due to its flexibility, all while still having some guard rails to make sure you stick to some sort of structure throughout your project. React offers everything that you need out-of-the-box, and if there's something that's missing generally it can be picked up directly from the React team's GitHub. One thing that comes with the territory with React is JSX, or "HTML in JS" as some call it. There is some debate around whether JSX is good or bad, but this is something that teams should decide before heading in to working with React.

Components rule within React, and while you can of course create helper files and models that can be included, whatever is being rendered is going to go through a component. Each component is in charge of its own state and functions attached to it, with passing of information happening through defining "props" and passing values down, or potentially bubbling up events to change state in a parent component.

Vue

Vue.js is the youngest of the libraries I highlighted, but is the fastest-growing out of all of them. Dubbed "The Progressive Framework" Vue starts off with the core library and developers add supplemental libraries to their project to expand coverage where needed. Developers love Vue for how easy it is to pick up and add in to any existing project while still remaining extremely powerful.

Like the other libraries, here are some stats for Vue.

• 67K+ stars on GitHub
• 680+ thousand NPM downloads per month
• 258,207 downloads of Vue Developer Tools for Chrome

As mentioned, Vue has gained a ton of popularity since its original creation. One of the biggest reasons teams pick up Vue is because of how easy it is to get started. Just including Vue.js as a single JavaScript file on your page allows you to work with Vue without the need of complicated loaders or anything like that. This means that Vue works very well for teams trying to migrate existing applications to something more modern. Also, the entire page doesn't need to be Vue-specific either, you can add Vue-ified HTML and components as is needed rather than convert everything right away.

Vue also has an advantage with how minimalistic it starts, while having a very wide breadth of supporting framework libraries like loaders, the router, the CLI and many more. It supports standards-based templates (just using simple HTML templates) or even JSX (depending on what you've added to the project) so it's also easy for devs coming from other frameworks to keep their favored way of writing the view. All of this means developers get to pick and choose exactly what they want and build up the complexity of their projects as needed. Hence why it is referred to as the Progressive Framework.

Ember

Ember is the oldest of the frameworks that I covered during the webinar. A true MVVM framework, it originally was released during a time where the strict MVVM pattern was preferred for frontend frameworks. The Ember team has done a great job with keeping up with the latest ideas brought to us by Angular and the like, so with the 2.0 revamp there are features like components that help with modern JavaScript development.

Here are the stats for Ember.

• 18K+ stars on GitHub
• 340+ thousand NPM downloads per month
• 69,383 downloads of Ember Developer Tools for Chrome

Ember has a lot of benefits that makes it a great fit for larger teams and enterprise companies. It's fairly strict with how an application should be structured and ensures that you stay within its guard rails so you're not being inefficient. Some may not like it, but for teams that have varying skill levels and have the need to follow stricter guidelines it's a perfect setup. It also follows the MVVM pattern closely which is a very popular methodology for structuring applications across web, desktop and even mobile.

Using the Ember CLI, we build out our application by defining routes, and each route has a data model. This model can then be used within the ViewModel of the View accompanying the route, and the models have a defined way that they can be queried and interacted with through CRUD operations. People that feel like dynamically adding fields etc., should not be done on the underlying data will love Ember's models since they are defined and cannot be changed outside the model.

Ember also has a pretty well-defined architecture out-of-the-box which means that we do not have to worry about looking up specific style guides. The Ember CLI takes care of all of this for us and there's no question of where to go to find a template, component or model.

Aurelia

Aurelia probably has one of the most passionate communities compared to the other frameworks that I approached here. No matter where you go you have passionate Aurelia fans that advocate for the library. The biggest point of attraction is the standardized approach that the framework takes. Everything you do in HTML and JS follows the latest standards, making the library very non-invasive.

Here are Aurelia's stats:

• 10K+ stars on GitHub
• 25+ thousand NPM downloads per month
• 1,641 downloads of Aurelia Inspector for Chrome

Why should a team pick up and start using Aurelia? First off, the structure of an Aurelia application follows the MVVM pattern, with a tie between the View and ViewModel creating the idea of a component. This gives us a nice pattern to work with, something that desktop developers (from WPF mainly) as well as JavaScript developers that have been around for some time can enjoy.

Aurelia aims to not be a monolithic library, so it's super easy to drop it in an application and start kicking things off from there. There's no need to set up and work with a loader like Webpack (although you can if you'd like) and working with Aurelia can be as simple as adding in a reference to a single JS file.

As already mentioned, Aurelia is standards-based. You're not learning some unique flavor of JavaScript or HTML. Aurelia uses ESNext or TypeScript when writing all of its modules, which means we can use the ${ ... } syntax for interpolation within template tags when setting up all of our views for binding.

It's not easy having to pick between all of these frameworks, but hopefully what I covered in this blog post along with the sample projects can provide some assistance when evaluating which framework to pick with your future projects. Feel free to refer to each of the sample apps that my GitHub projects provide and play around with them to take each of them for a spin!

JavaScript Developer Tools

Whether you build applications in jQuery and JavaScript or use AngularJS, Angular, React or Vue, you can count on our complete JavaScript UI component library, Kendo UI. It allows you to quickly build eye-catching, high-quality, high-performance responsive web apps using your framework of choice. Download your free 30-day trial today to see how quickly you can build your next frontend project.