My Blog

Post List

Hey there, thanks for visiting this section. I express myself here on topics which interest me.

Top 10 UI Libraries for Vue 2022

Posted on 16th January, 2022

User interface plays an important role in any web application. It's like the very first impression you have which would likely determine whether you'd consider visiting it again or not. Today, we have many libraries available in many modern Javascript libraries for creating user interfaces, layouts and handling events. The purpose of these UI libraries is to get you started quickly without the need of writing too much pure Javascript or CSS. Many of these frameworks also scale to mobile devices with their prowess in handling responsiveness.

For this list, I'd be considering Vue JS and some of the most popular and widely used user interface libraries available in it. It could be difficult to rank front-end frameworks based on design because something which could appeal to you might not appeal to someone else. But, there are however some parameters which I've keep in mind while sort of ranking these libraries. These parameters would be Number of components available, Learning curve, Responsiveness, Community support, Github Stars and contributors. Before I begin the list, I just want to confess while ranking UI libraries it is very difficult for me to not let my personal design taste influence the ranking, but would try my best nevertheless. Also, only Open Source libraries would be considered for this list.

1. Quasar

Quasar Framework

I'd start with my favorite framework in this list. It is one of the very few popular Vue UI libraries which has support for Vue 3. Also, it comes equipped with Typescript (which is optional) support and it's own CLI tool for blazing fast app development. There are multiple ways you can start your Quasar project depending on what options you pick while initiating your project through Quasar CLI. It has 20K + stars on Github.

Quasar - Home

Quasar - Github

2. Vue-Tailwind

A UI library which has Tailwind components tailored to be used in Vue. It seems there is no official logo for this package. I am a big fan of Tailwind CSS, I've used this probably the most. I like how it is configurable with relative ease. Tailwind CSS provides a lot of pseudo classes which you can use to apply aesthetic animations on Vue Tailwind Components. I hardly ever remember writing even a single line of custom CSS whenever I used this library. As of now, it is only available for Vue 2. It has 1.7K stars on Github at the time of writing this. But, in my opinion it definitely deserves more. You can find the documentation and the Github repo link for this project below.

Vue Tailwind - Official Website

Tailwind CSS

3. PrimeVue

PrimeVue

Created by PrimeFaces.org, PrimeVue also comes with rich support for Vue 3. In my opinion it has one of the best designs out of all the popular UI libraries in Vue. It seems like PrimeVue components take inspiration from Tailwind CSS in terms of design. It has a large collection of basic as well as advanced components like ScrollToTop, Charts, Terminal Component, Tags and more. It has 2K stars on Github. Please find the Github and documentation links for PrimeVue below

https://github.com/primefaces/primevue

https://www.primefaces.org/primevue/showcase/#/setup

4. Vuetify

Vuetify Logo

One of the most popular UI libraries for Vue perhaps only topped by Element UI. It has 33K+ stars on Github and it is build on top of Google's material design.

Vuetify - Home

Vuetify - Github link

5. Buefy

Buefy Logo

Library which has ready to use components made in Vue using Bulma CSS for styling. It has 9K+ stars on Github. It does rely strongly on Bulma CSS classes for creating grid and flex based containers.

Buefy - Official Docs

Buefy Github

6. Vue Bootstrap

Bootstrap Vue

Bootstrap is still the most widely used CSS framework in the development community. VueJS might not be as popular like React and Angular in enterprise level projects at the time of writing this post, but it is still the most starred frontend framework on Github. Both Vue and Bootstrap are among 15 most starred repositories on Github. This open source project contains dynamic components which are built combining Vue and Bootstrap like Modals, Tooltips, Carousel and more. It is one of the easiest to learn frameworks for beginners. On Github it has almost 14K stars.

https://github.com/bootstrap-vue/bootstrap-vue

https://bootstrap-vue.org/docs

7. Chakra

Chakra UI Logo

Chakra is one of my favourite frameworks. Originally written for 'React', there is also a version available for 'Vue'. I found it one of the easiest frameworks to configure and get started with. It has 24k stars on Github. Below are the links for the documentation for both React and Vue versions.

https://github.com/chakra-ui/chakra-ui

https://chakra-ui.com/

https://vue.chakra-ui.com/

8. Element UI

Element UI Logo

Element UI is by far the most starred user interface component library in Vue 2 with 52k + stars. There is also a version in Beta phase called Element Plus for Vue 3. It also has one of the most starred dashboard projects on Github. One of the things I appreciate in this framework is how easy it is to perform validation on frontend for form related data. As of the downsides of this, I'd say not a very big fan of the default CSS it has and it was slightly complicated to re-write those CSS for me.

Element UI homepage

Element UI Github

Element UI Dashboard

9. Vuesax

Vuesax Logo

Vuesax is one of the lesser known libraries on this list. The components in Vuesax seem to take styling inspiration from Tailwind CSS. I made a project using this long back. I had issues with responsiveness. It has 5k+ stars on Github at the time of writing this post.

https://vuesax.com/

Vuesax - Github Repo Link

10. Vue Material

Vue Material Logo

A UI library for Vue 2 created by Creative Tim. It has almost 10k stars on Github. I had the pleasure of working in this library a couple of years ago on a freelance project. It is built on top of Material UI.

https://www.creative-tim.com/vuematerial/

View

Vue vs React - A quick comparison 2022

Posted on 4th February, 2022

React and Vue are two of the most popular frontend modern frameworks/libraries in Javascript/Typescript today for developing frontend applications. They form something called the "Big 3" in the category of popular libraries/frameworks created in Javascript with "Angular" being the another member of the club. In this article I'd be sharing my experiences working with these frameworks and would draw comparisons between the two about which one you should bet on depending on your use case. Hopefully, this article would be useful to you while you are in a conflicting situation about which framework to choose while building a modern frontend application.

Note that I'd be using terms "Framework" and "Library" interchangeably here in this post but there exists subtle difference between the two. "Frameworks" in general are more customizable than "Libraries" and often force you to follow certain defined design patterns. Libraries have built in functions written which you can invoke depending on your use case. For drawing comparisons I'd be segregating this post into following six categories.

  1. 1. Learning Curve and Structure
  2. 2. Github and Documentation
  3. 3. Company Support
  4. 4. Integration with existing MPA
  5. 5. Support for Plugins and Typescript
  6. 6. Support for Mobile Platforms
  7. 7. Final Verdict

About React

React Logo

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. As far as history of React is concerned, it came into existence because of Jordan Walke, a software engineer at Facebook in 2011. It was used in Facebook and Instagram in 2012.

About Vue

Bootstrap Vue

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, a Google Engineer, and is maintained by him and the rest of the active core team members. Unlike React and Angular Vue does not have a tech giant to constantly back it up. Vue is currently in version 3, but version 2 is also very popular and is significantly different than version in certain facets like composition API and has a richer support for Typescript than it's earlier version.

Learning Curve and File Organization

It is a general consensus among the developer community that Vue and React have easier learning curves compared to Angular. Most people from the community would say Vue is easier than React especially the long term support version '2' of Vue. Vue has adopted best of both worlds approach by incorporating best features from both the rivals 'Angular' and 'React'. In my opinion Vue 3 has a slightly bumpier learning curve compared to its earlier version.

React is considered to have a generous learning curve as well. A constant exposure to working with React apps would make you a better Javascript developer in general so, with your Javascript fundamentals strong, you should have a smooth ride with React. Though, this might be opinion based in general. There might be people who would find "Angular" to be easier than "React/Vue". But, in general for a newbie, the learning curve order is something like this Angular >> React > Vue

On a high level Vue and React have significantly different file structure to organise project files. I have included the discussion of the structure of the framework in this section. Vue files are better structured in my opinion. With files ending in .vue extension you can include your view, Javascript imports and custom CSS all within a single file. React allows .jsx file extension aside from pure Javascript files. React has multiple design patters for file organization, you can have a folder based approach like in Angular where you have small reusable components housed inside a folder along with their style and test files.

Github and Documentation

In this section we would be using Github parameters like number of stars, forks and contributors. Vue has 193k stars, 32k forks and 404 contributors at the time of writing this post. React has 182k stars, 37k forks and 1538 contributors. But, React is also 2-3 years older than Vue and has been backend by Facebook ever since inception.

Vue has one of the best documentation available among all the popular frontend and backend frameworks. Documentation is easily one of the best resources for a newbie learning Vue. I can't claim the same for React as there are loop-holes in the doc for a beginner. I often had to refer other Youtube videos, tutorials and blog posts to wrap my head around some of the concepts in React like React-hooks. But, that could just be me. But, yes to sum it up Vue has a better documentation than React.

Company Support

Both of these frameworks are used by a lot of big companies in building their enterprise level applications which have millions of users. But, personally I'd recommend choosing React if you believe your application could become humongous in future handling a large pull of users. Reason is that React has already built in and maintainable third-party packages included which would serve various functional requirements in your ever so increasing scalable app, more on this would be discussed in "plugins" section. For now, I'd quickly list some of the big companies which are using React and Vue in their applications.

According to Stackshare, there are around 10K+ companies using React in building their applications. Some of the corporate giants using React are Facebook, Shopify, Amazon, Uber, Udemy, Netflix, Instagram, Airbnb and more

Vue is the new player around 3-4 years younger than React and does not have tech giant backing it in development and maintenance process. Still, it has penetrated significantly into the market and compelled tech giants to use it in building their applications. Some of these companies which use Vue are Apple, Nintendo, Alibaba, BMW, Behance, Dribbble and more

Plugin Support

Most of the frameworks and programming languages have a huge collection of third-party packages which are used to extend the functionality of your application. Many of these packages have been proven to effectively solve an identified generic problem. They encourage "do not re-invent the wheel" principle in Software development. Most of these packages are rigorously tested and provide customization options for your use case. For instance, there are packages for implementing cross-browser compatible aesthetic user interface designs in your application, there are packages to integrate different modes of payment in your full stack application. Most of these packages are open sourced for others to use and contribute in development. Most of the times developers would feel reusing these plugins in their applications compared to write their own from scratch.

React and Vue have significant number of packages written for various use cases which you can use with slight modification in your existing apps. One such use case could be to implement drag and drop functionality for which you have Vuedraggable in Vue and React DnD in ReactJS. React has a larger collection of packages compared to Vue since it is older and has a large community base actively maintaining third-party packages and resolving bugs/issues. Having a better "community support" is one of the reasons I mentioned earlier that I'd prefer React over Vue for and enterprise level application likely to serve millions of customers in future.

Since React has been in existence for 3-4 years when compared to Vue, in most cases libraries for a specific use case are first implemented in React before the corresponding Vue version is developed. This is not a rule but general observation but exceptions do exist. One example is this library called "react-query" which is used to handle API data with caching on browser side. "React-query" has been in existence for quite some time now, but recently a version for this has been in development for Vue 3. React libraries are likely to have less issues in general and are being updated regularly. In general popular plugins for both React and Vue are mostly error free, but for some lesser known packages might have bigger community support for extended duration of time in React.

Support for Mobile Platforms

React has a clear edge in this segment because of React Native and the extend with which this has been used in the industry for a while now. Though there are alternatives in Vue for making native mobile friendly applications like Vue Native, Ionic and others. Their share in app development market is considerably lesser than React Native.

Integration with existing MPA (Multi page applications)

Multi-page applications are traditional applications which have multiple pages and routes written in server side programming language. Before 2010 almost all the websites were traditional multi-page applications which extensively used Jquery or Vanilla Javascript for integrating scripts on specific pages. That might still be requirement in some cases though these days modern applications are bundled as SPA (Single page applications) which serve optimized bundled assets in form of Javascript and CSS files.

Both React and Vue can be integrated with multi-page applications. Vue is comparatively easier to integrate and is preferred because of it's smaller bundle size which is around 80KB almost 20KB smaller than React. Vue has replaced Jquery in many of such applications. Probably the easiest way to integrate is to use a content delivery network (CDN) and include the path for Vue/React in the header section of the HTML page you want to integrate with.

Final Verdict

To conclude I think it's safe to assume that there is no Clear Winner in this face-off. It would totally depend on what kind of app you're building, your personal taste, people you're working with, future app requirements and more. The result of the key-points discussed in the above section is concisely described in the table below.

# Parameter Preferred Framework
1 Learning Curve Vue
2 Community Support Vue
3 Scalability React
4 Industrial Use React
5 Company Support React
6 Github Stars/Forks Vue
7 Documentation Vue
8 Plugin Support React
9 Mobile App Development React
10 Multipage Website Integration Vue
View

Frontend vs Backend - which is easier ?

Posted on 4th March, 2022

Front-end and Back-end are two principal branches of full-stack development where you deal with developing web-based applications. Recently, I stumbled across a LinkedIn post from one of my connections which I thought was sort of a little disrespectful to frontend engineering. I decided to voice my opinion on the complexities of these two sections which fall under web development through this post.

While dealing with back-end technologies, engineers deal with mechanisms that handle data and perform various actions on it on servers that remain concealed from website visitors. We have several programming languages and frameworks available that are involved in back-end development. The most popular of these tools are Java, C#, PHP and Python. Concepts like caching data, multi-processing, and optimized searching are all concerned with back-end development. Back-end development is closely linked with cloud infrastructure and database management, though in many engineering departments, there is a separate team handling it. Some of the challenging aspects of back-end development are:-

  • Implementing caching mechanism for a large volume of data using tools like Redis.
  • Designing Monolithic or Microservice-based architecture depending on application requirements.
  • Implementation of complex search algorithms
  • The security mechanism for databases and performing optimized queries.

Frontend deals with stuff we see on the website like the like button you see on Instagram, images, buttons, forms and more. For the markup, we use simple HTML and CSS. On top of it, to inject some life into web pages we use Javascript. Sounds simple, right? Well, not so fast. Front-end has evolved a lot in the last decade. Even though, there is only Javascript involved there are quite a lot of frameworks and libraries available in it which certainly poses some challenges for developers while making a choice. Multiple Javascript frameworks exist because they do something better than others. To add to that, there are many CSS frameworks available that can be used in conjunction with the Javascript library you choose like React. The availability of these many options makes the selection choice difficult.

Back in the good old days, we used to link external javascript to the dynamic webpages created using a suitable back-end language like PHP. Later, Jquery because very popular. So much, so that at one point in time, it had more questions on Stackoverflow than Javascript. But, in recent years we have made the transition towards the development of single-page applications (SPA). Popular front-end frameworks like React, Vue, Angular or Svelte can be used to develop the front-end as SPA. These apps contain reusable components. Often we also need a centralized data store for these apps for which we use libraries like Redux. We can serve front-end code bundled as a static folder by using a popular asset bundler like Web-pack. This static folder generated gets served using the back-end framework by the server. There are also frameworks like Next JS (for React) and Nuxt JS (for Vue) for building SPA with better SEO (Search Engine Optimization) and routing support. Challenges front-end developers often confront are:-

  • Designing component-based architecture for the front-end app in React/Vue/Angular. This involves identifying reusable components, choosing a UI kit, front-end routing, placing external styles, using CSS pre-processors and more.
  • Deciding which packages to use to achieve features like form validation, API integration and more.
  • Make the website responsive on multiple devices with different sizes.
  • Integration of SEO for single-page applications.

For small and medium sized applications, I often find front-end implementation more complex and time consuming. But, as the size of the application grows and you need complex algorithms to handle caching, parallel processing and related stuff, back-end complexity is enhanced. For instance writing a simple CRUD module is very simple for back-end and more complex on the front-end side. As your application grows in size and functionality you might need to apply complex optimization algorithms on the back-end. Back-end requires more expertise in general in data structure and algorithms.

My final verdict is that it depends on various factors like size of the app, feature requirements and more, but in general it can be argued that back-end is more complex. In terms of pay scale, back-end engineers are paid slightly more on average for the similar profile compared to their front-end counterparts at least in my country.

The post which I came across seemed to promote the narrative that Back-end engineering is significantly more skillful compared to front-end development to which I strongly disagree with. It might have been the case in the past, let's say ten years ago. But, these days as I covered above, front-end engineering is also very intensive in skill demand. Then, there are full-stack engineers like me who handle both. That is it for now, if you have anything to share on this topic, please fill free to fill the comment box.

View