Choosing the Right JavaScript Framework for 2018

2018 will be an exciting year for web development. The momentum behind single page web apps (SPA) has fueled the development of robust client-side frameworks for the javaScript community. These libraries/frameworks have revolutionized the way javaScript works with HTML and CSS to render views, both in the browser and now on native platforms (Android, iOS).

As the plethora of libraries/frameworks continues overwhelming the development community, a few have emerged as the leaders heading into the new year. Specifically, Angular, React, and Vue.js have emerged as the most 'bleeding-edge' popular options for 2018. This article explores these different options and why you should use one over the other moving forward.

Which one should I use in 2018?

The truth is all three are good options. While Angular 2 has addressed everything wrong with Angular 1, Angular 1 is still widely used and popular. React and Vue are just as suitable, and whether one is better than the other is laregly based on personal preference. All three have proven performant and all have very active communities backing them. Rather than elaborate on which framework is best, we explore each one individually. We'll examine their strengths and what types of projects they are ideal for in 2018.

Angular

Angular is one of the most popular client side libraries of 2016. While Angular 1 has been used since 2010, Angular 2 was just released this year. The two are vastly different, as Angular 2 is a complete rewrite of Angular 1. Angular 2 is gaining momentum, but Angular 1 will still be used in 2018.

When should I use Angular 1?

Use Angular 1 if you are buildling out a light-weight SPA. Angular uses two-way data binding to eliminate boiler plate code and easily connect views directly with the data models they represent. Angular 1 also uses dependency injection (DI) to force an MVC like pattern. This makes for a steeper learning curve but also forces good practice.

Don't use Angular 1 if you are working with larger data sets. Angular 1 has a digest cycle that constantly checks for changes in watchers or scope variables. This keeps the view in sync with the model, but gets expensive when using things like ng-repeat with larger data sets.

When should I use Angular 2?

Angular 2 addresses these performance issues with Angular 1. It takes a component based approach to rendering, making it ideal for cross-platform development. This same approach aids in change detection, as the digest cycle is avoided and components are only updated as needed. It uses its own version of the shadow DOM to create a strict separation between content and presentation. For more on the shadow DOM, see The Shadow DOM: A Quick Explanaton. Use Angular 2 if you highly value cross-platform development or performance.

Angular in general

Angular 1 and Angular 2 are considered 'one Angular framework' by Google. Although Angular 2 was a complete rewrite of Angular 1, both frameworks are valued for the organization they enforce client side. Use Angular if your application is enterprise based, or if you work in a strict development environement where code readability is crucial.

React

Unlike Angular, React is more of a library than a framework. It relies heavily on a virtual DOM to render HTML components as needed. This gives it a huge performance boost over Angular 1. Angular 2 does make use of the aformentioned shadow DOM, but React remains a formidable opponent. React is also great for server side page rendering, allowing web crawlers to easily read your content.

React does have more of a learning curve. It reinvents how HTML and CSS are rendered with JSX. While this has its advantages, it takes some getting used to (even if your a seasoned javaScript developer). React is best used for SPAs with higher performance requirements or content publishers who emphasize strong SEO.

Vue

Vue.js is a light-weight framework that takes the best of both worlds. It's two way data binding is more intuitive (like Angular 1), however it still incorporates server side rendering capabilities seen with React and Angular 2. You can use JSX with Vue, however it also allows for the more traditional layouts separating HTML from CSS, etc.

Vue has proven faster and more light-weight than both Angular 2 and React. Use Vue if you care less about app structure and code organization and more about performance.

Conclusion

Vue may seem like the most performant option, but Angular and React are just as acceptable depending on your needs. The Angular framework(s) is better suited for enterprise level development where an emphasis is put on organization and consistency. While React is a clear improvement over Angular 1, Angular 2 has caught up with React's advancements and remains ideal for larger enterprise applications.

React and Vue are better for quickly generating cross platform solutions. Vue has addressed the steep learning curve issues seen with React, as it's syntax aligns more with Angular 1. This doesn't mean React should be ignored, as a strict divide between Angular and React will continue fueling improvements for React and its supporting libraries.

Your thoughts?