This is a series of posts dedicated to help devs discover and navigate the web ecosystem. Look, web development is vast and intimidating everyone could use a guide.
UI libraries are third party code that traditionally provide UI components and utility classes used by developers to create apps. Classes that affect styling & layout and resuable UI components are typically provided the library. More modern libraries may also provide syntax for creating stateful components.
The following are some popular libraries.
These days it feels like this wouldn't be a Dev.to post without mentioning tailwind. It's a highly popular library for good reason. There's so many utility classes you can tweak the smallest details of you app needing to write any CSS.
Another popular library that is usually the first for many devs is Bootstrap. It's not as flexible as tailwind but its easy to use and has tons of themes, and examples.
This is my personal pick for putting together a web app quickly. Materialize CSS is great for making an app that follows the material design specification.
This legacy library is more of an honourable mention. Around 2017-2019 it was unfathomable to build a website without jQuery. It provided easy to use APIs for cross browser DOM manipulation, AJAX and attaching event handlers.
Since then the standardization of APIs such as document.querySelector() and fetch() have somewhat replaced the common use cases for the library.
You are probably wondering why this wasn't at the top. According to the State of JS survey, ReactJS has been the most used 'Front-end Framework' since 2016. React is featured 5th in this post because it is both a library and a framework.
React allows for a gradual adoption where you can use it as a drop in library. However, it is recommended to be used more like a framework by utilizing the CLI tool for bootstrapping and compiling a project.
React is also different from the aforementioned options as it allows you to create reusable components that have state. For example you can create a new element with a custom tag such as
Counter is made up of a two buttons and a number input field such that the buttons change the field's value. The counter element can be reused multiple times and each counter's value can be easily accessed and reassigned. Instead of providing UI components, react allows you to create your own.
In my opinion React's documentation is easy to follow and the basics can be picked up fairly quickly. React also boasts a declarative coding style that allows you to write more predictable code that is easier to debug.
Vue is the third most popular 'Front-end Framework' behind Angular and then React (State of JS Survey). Unlike the other frameworks, Vue was not created within a big tech company like Facebook (react) or Google (angular). It is impressive to see how far the Vue ecosystem has come from just a community backing.
That concludes our visit to our first destination on this journey. There's 7 more stops to go! If you found this informational please consider following me on dev.to or on twitter so you won't miss the next post in this series.
What is your favourite UI Library and why?