Choosing the Best Component-Based UI Library in 2018
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.
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.
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
- 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.
- 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.
- 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
- 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.
- 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.
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.
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
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 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.