October 11, 2019

Choosing a Javascript Framework

By Garrett DeMeyer

It seems that everyone and their mother has a JavaScript framework these days. It is near impossible to build a respectable web application without one, but which to choose? If you’re a product owner, what direction do you nudge the team in? If you’re a developer, what’s going to let you do what you need to do? With so many options, we can be left with decision paralysis. So, before you start building in momJS, let’s take a look at what should be considered when picking a framework and weigh three popular options (React, Angular, and Vue).

We’ll take a primarily high-level view, exploring what might be relevant to a stakeholder or product owner (though the devs on your team should find it helpful). By the end, we hope to have an understanding of how these three frameworks compare to each other and how we might weigh other frameworks that crop up.

The Basics

JavaScript is the standard for manipulating the DOM (Document Object Model) of a website. This DOM can be thought of as what you see in your web browser, the structure of elements making up the page. However, JS on its own requires a significant amount of work to make the DOM changes necessary for a modern application. Enter JavaScript frameworks. They provide functionality that modern users expect so developers can focus more of their time on app-specific code.

There are a few basic considerations to make when picking a framework. First, do you need a full front-end architecture or just a UI? Second, what experience will your team be walking in with? Third, how complicated will this application be? Our goal in asking these questions is to pick the right tool for the job. Let’s take these each in stride, using React, Angular, and Vue as samples.

Project Needs

Let’s be honest. “Framework” is a pretty vague term. What does it even mean? What are you guaranteed to receive from a project calling itself a “JavaScript framework”? Software frameworks provide commonly reused ideas and code so developers do not have to write everything from scratch each time they start a new project. Essentially, you are only promised some predefined functionality outside of vanilla JS. This means frameworks will span a wide range from only UI (user interface) to full front-end architectures. What does your project require?

React and Vue are best suited to provide UI solutions. These frameworks are meant for building the components that flesh out what your users interact with. The core logic, or “business logic,” of the application should live elsewhere, like the server. While you certainly can use them for fully fledged, logic-rich code, there are frameworks better suited for this.

For instance, Angular historically provides a full architecture, supplying the space to write logic and UI. Here, it is more likely your server only serves up data for your Angular app to consume. Again, it is possible to only use Angular for the UI. However, it seems with the larger size of the framework and all of the features it provides, you may be buying an SUV with 4-wheel drive and touchscreen display, when you only need a sensible sedan.

Do you need a full front-end solution? Is the app going to communicate with an existing API that only serves data? Turn to Angular.

Does your team have the core logic covered in some other backend? Are you providing a facelift or new access point to an existing app? Scope out Vue or React.

Team Experience

Every technology has some learning curve. When picking a JS framework, you should know what kind of background your team is coming from. Are they seasoned object-oriented vets, maybe with .Net experience? Have they been living on the cutting edge, picking up new technologies with each project? Or maybe they are primarily juniors needing somewhere to cut their teeth? Figuring out what your team can pick up in a reasonable time and what fits their preferred styles is crucial in project success.

For example, Angular uses an extension of JavaScript called TypeScript. (Note: if you’re familiar with the first iteration of Angular, AngularJS, Typescript was introduced in Angular 2, when the framework became quite a different beast.) TypeScript may feel more comfortable to the .Net loyalists, as it provides more structure to your code. However, if your team is well-versed in JS, they may find the transition restrictive and “opinionated.” While you can use TypeScript with React (and Vue is planning to shift to it), they use standard JavaScript and present a smaller curve for your JS comfortable team.

Vue is an up-and-coming framework created by an ex-Google engineer, Evan You. It is gaining popularity with the open source community, but it does not have the backing of a major corporation as Angular and React do (from Google and Facebook, respectively). Both Vue and React have less opinions, or expected implementations, than Angular and are more fitting for teams who like “hack,” or sit down and work without extensive planning sessions.

In context of our three example frameworks, I’d lay it out this way:

Does your team like structure? Maybe they’re coming from a .Net background? Do they have TypeScript experience or the time to learn it? Lean toward Angular.

Is your team itching to try something new? Do they want to be on the next trendy framework? Do they have the expertise to figure something out when StackOverflow fails them? Look at Vue.

Does your project need to get rolling quickly? Does the team prefer “hacking” instead of architecturing a solution? Do they want a wealth of resources at their fingertips? Feel out React.

Level of Complexity

Just as frameworks can run the spectrum of provided functionality, not every project is equal. Are you looking to build a robust, complex app for daily use in your company? What about something small and lightweight for customers to check the status of an order? You’ll need to consider the “weight” (or size) of the framework and how much structure it expects from your code. If users might access your application over slow networks, you don’t want your framework choice to provide a poor experience. There’s a lot to be said about how long a user will wait for a site to load before deciding to go elsewhere.

Angular is the largest framework (about 500kb). It also promotes a more intense structure and, therefore, more code. This will increase the data served to your users and, potentially, slowdown their experience on initial loads. React and Vue are a fraction of the size (100kb and 80kb, respectively) and, as we discussed earlier, only serve UIs to your users. When building a small raft, do you need a four stroke motor? If your application is a few pages that will be accessed only a few times per user, you do not need to add extra weight or opinions.

One more time, let’s think through which of our proposed frameworks might be best:

Is your application going to be accessed only occasionally? Is it possible your users are on slow networks? Is it limited to a handful of views or basic interactivity? Hit up React or Vue.

Is this application going to have regular users, maybe internal users at a workplace? Are you planning out a large, more complex application? Skew toward Angular.

Wrapping Up

There’s a misconception that there is a “best” framework. Folks may even insist there should be a winning framework as all the others die out. This is a narrow and limiting mindset. Each framework has its own strengths and weaknesses. They will need to be weighed according to the planned application and team building it.

I hope that this has you thinking through where your next project is headed. Even if Angular, React, or Vue are ruled out, these types of questions may help choose the right tool for your job.


Garrett DeMeyer - Software Consultant

About Garrett DeMeyer

Garrett is a full-stack software consultant who loves helping people solve problems. He is passionate about communicating in a way anyone can understand so the world of software can be open to all levels of developers, and even non-developers interested in learning more.