Hey there, thanks for visiting this section. I express myself here on topics which interest me.
Top 10 UI Libraries for Vue 2022Posted on 16th January, 2022
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.
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.
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
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
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.
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.
6. Vue Bootstrap
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.
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.
8. Element UI
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.
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.
10. Vue Material
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.
Vue vs React - A quick comparison 2022Posted on 4th February, 2022
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. Learning Curve and Structure
- 2. Github and Documentation
- 3. Company Support
- 4. Integration with existing MPA
- 5. Support for Plugins and Typescript
- 6. Support for Mobile Platforms
- 7. Final Verdict
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.
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.
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
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)
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.
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.
|9||Mobile App Development||React|
|10||Multipage Website Integration||Vue|
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.
- 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.