About the hitchhikers series
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.
User Interface Libraries
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.
Tailwind CSS
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.
Bootstrap
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.
Materialize CSS
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.
jQuery
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.
However, jQuery is still used today and has spawned other projects like jQuery UI and Quint.
React JS
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></counter>.
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 JS
Vue feels is like the de facto react alternative. It argues some performance improvement over react and doesn't require you to write JSX or CSS in JavaScript.
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.
Conclusion
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?
Top comments (2)
I love this DEV site! all this information is really interesting, thanks for sharing hehe
Great overview! Looking forward to the next posts in this hitchhikers guide š