Framework-Choices
Oct 17 2018 05:42pm | | Share

Choosing the Best Component-Based UI Library in 2018

By Michael Thai

If you’ve recently struggled with deciding which library to incorporate into your project,  my goal here is to  narrow things down for you by touching on some unique and new features from some of the most popular ones, and hopefully give you some new information that you can use in your decision-making process.

 

The Main Contenders

 

Let’s take a dive into a select handful of the leading JS libraries/frameworks in use today. I’m going to focus primarily on Vue, React and contrast them to Angular; and at the end of the article I’ll touch on some other interesting libraries that I’ve learned about recently and am very excited about.

 

I decided to focus on Vue, Angular and React because they’re the most popular and used JavaScript UI libraries/frameworks today by quite a few measures.

 

 

UI Choice Screen Shot 1

 

Google Trends – Comparing the number of worldwide searches for top JS UI libraries/frameworks in 2018. On average, Angular has been the most searched with React in a close second, and Vue has consistently held third place.

 

 

UI Choice Screen Shot 2

 

The number of package downloads of React, Vue and Angular over the past two years. As you can see, the number of React downloads has been trumping Vue and Angular by quite a large margin. It’s also been growing at a significantly faster pace.

 

Angular vs React and Vue

 

The first and most significant fact to point out when drawing comparisons between Angular, React and Vue is that the latter two only make up the view, the V in MVC – the “Model-View-Controller”, in case you need a refresher.

 

While React and Vue are very powerful tools that use a Virtual DOM to create fast-loading, component-based, data-driven views, their core APIs (on their own) are restricted to building  the user interface – essentially elements on the DOM.

 

Angular’s core API, on the other hand, offers a full framework that embraces the entire MVC architecture and enforces structured organization of your app’s business logic, centered around components with modules, services and model classes injecting into them. The Angular team offers a huge number of packages out-of-the-box that can be used to cover basically every need in a modern web application.

 

If you decide to go with a framework like Angular, you won’t have the option to simply change your mind after significant progress has been made. When starting down a path with a UI library, you certainly have the option of swapping one out for another if you feel you didn’t make the best choice.

 

By virtue of their design, React and Vue are simply incapable of ever providing all the development possibilities that Angular does. But the beauty of using them is that you can incorporate them into any existing stack that you’d like and have their components rendering in your site or app with a relatively tiny amount of effort. It should be noted that Vue doesn’t make a clear distinction between whether it’s a 100% framework or library – instead, it describes itself as a “progressive framework [that’s] “incrementally adoptable, and can easily scale between a library and a framework”.

 

React and Vue’s respective CLIs make it very easy for developers to create full front-end applications in a much more robust way that cannot be achieved using the core libraries on their own. Using the create-react-app or vue-cli command-line tools, you can have a new app prototyped, up and running in a matter of minutes, with a number of different configurations, module bundlers and build tools to choose from to best suit your needs. Angular CLI is a very powerful too, as it has capability to generate modules, components right from terminal with automatic dependency injection.

 

Continuing on, I will only focus on comparing the the specifics between React and Vue since they are most alike in terms of their intended use-cases, philosophies and core APIs.

 

Key advantages of Vue

 

  1. More syntax options for templates
  • While React and Vue both encapsulate their data, business logic and templates in their components, React only allows you to use JSX and React.createElement methods in templates. Whereas with Vue, the default syntax used by Vue is plain HTML and you also have the option of using JSX and createElement(). HTML is always going to be the easiest and most familiar way to write markup for the most people, designers included. With the many easy-to-understand directives that Vue comes with (such as v-if/else, v-for), make it easier for people to jump quickly into Vue without being overwhelmed in comparison to React’s JSX combined with ternary expressions and array maps.

 

  1. Form-creation simplicity
  • React uses controlled components to handle form elements while Vue uses its v-model directive to set up a direct, two-way data-binding with the data object that lives inside the Vue component. Take a look at the two side-by-side and see which looks more intuitive to you.

 

  1. State Management - Vuex vs Redux
  • State management isn’t a part of React or Vue’s core API, though they each have go-to companion libraries that take care of this problem, which can get quite complex in large applications. There are some tasks that cause headaches with Redux that are much more straightforward with Vuex - Redux is often paired with libraries like redux-thunk and redux-saga to handle data fetching and some hairy side-effects of state management, whereas Vuex covers these situations right out of the box.

 

Key advantages of React

 

  1. Mobile Development
  • If you know how to write React code, you will have a much easier time picking up React Native and becoming a cross-platform mobile developer. I suspect a big reason why React has been a much more popular choice with companies is that they’re able to cover the whole gamut of device types with a team of dedicated React developers and a lot of shared code between the platforms. The Vue team has yet to come up with an equivalent native Vue mobile dev experience, though I’ve heard great things about Nativescript + Vue.

 

  1. Popularity, community, support-base
  • React being more popular results in much more support being available when development issues arise. It has a larger user base, larger community, more open source projects, more jobs, more testing being done in production, more stack overflow posts, and a large team of Facebook engineers dedicated to improving the ecosystem. This one isn’t a technical advantage but is a very important factor when it comes to deciding which to invest time in learning.

 

  1. React is more flexible and is preferable for JavaScript pros
  • There’s a solid argument that React is more productive and flexible than Vue, due to its templates being HTML in JavaScript (JSX) and not the other way around – JavaScript in HTML via directives or special attributes. The latter makes creating component templates simpler in many ways, especially to those who don’t come from the strong JS background, but I can understand why so many JS pros feel such a preference for it over Vue. If you’re already very familiar with ES6 features, array maps, arrow functions and the more difficult parts of JS in general, JSX is very intuitive and natural to manipulate. Since Vue is somewhat of a framework, you need to learn the “vue-way” if you want to start building applications.

 

Other Notable JS Libraries in 2018:

 

There are a few other libraries and frameworks that have been making great strides in 2018. I don’t personally have experience developing with them, but I was certainly excited after stumbling across them and I feel compelled to spread the word.

 

Polymer

 

A library created by members of the Google Chrome team – it has a strong focus on web components, lightweight solutions for Progressive Web Apps, and strongly advocates a platform-centric approach to building web apps

 

Slim.js

 

A very fast and lightweight (3.4kb) library or “micro-framework” that creates powerful custom elements only utilizing ES6 native class inheritance and DOM native API. Slim is extensible and plays well with other libraries and frameworks

 

Glimmer.js

 

Glimmer is an interesting and relatively new open-source UI component library created by the Ember team. Its virtual-machine-like architecture and the fact that it compiles an application’s HTML templates into low-level, compact bytecode that’s executed in the browser. This architecture will allow Glimmer to shine even brighter in the future when WebAssembly becomes more prominent than it is today. Glimmer is one of the fastest DOM rendering engines out there right now and has been shown in a rigorous controlled experiment by the LinkedIn engineering team to benchmark neck-and-neck against Preact, the Virtual DOM library that’s essentially a very slimmed down variant of React (1/10th the size) and is regarded by many developers to be the best library when it comes to creating speedy sites. Considering that Preact is a measly 3kb gzipped and Glimmer is around seven times Preact’s size, their comparable performance is truly a testament to Glimmer’s unique architecture. As an added bonus, since Glimmer powers Ember’s components, dropping a Glimmer component into an existing Ember app is an extremely quick and easy task.

 

Conclusion

 

In conclusion, the state of JavaScript frameworks in the tail-end of 2018 is exciting and filled with promise. At the same time, it‘s undeniably chaotic with the level of noise and strong opinions flying around from all directions about what the best tools are to use. This topic has certainly triggered analysis-paralysis in myself at times, along with a huge number of front-end developers in my network. In an ideal world, we would have the opportunity to test out every option available to figure out what works best for our workflows and our project’s requirements. But the reality is that oftentimes, us developers don’t have much time outside our regular work to deep-dive into new technologies that are as involved as these big frameworks and UI libraries - and using company time to experiment is often an expensive decision, though it’s always great having that opportunity.

 

I’m hoping that this article has been effective in helping you gain clarity about some of the advantages and disadvantages between the top JavaScript UI libraries and frameworks and pointing you towards some new ones that you haven’t heard about or had a chance to explore yet. I’m very excited to observe the evolution of these projects as we close off the year and head into 2019!