I've always been the "Work smarter, not harder" type...
In fact, one of my main motivations for delving into the world of programming was a desire to enable companies to do just that. Building tools and applications that are actually user-friendly is a super-power I'm always working to level-up in. Such interfaces allow businesses and their employees to get back to doing what brings them the most fulfillment with their work. I've experienced the difference first-hand in my pre-SWE roles so I really appreciate intuitive flow, accessibility, and overall beautiful interfaces.
With this in mind, it makes sense why, for my first development project, I sought a template to use for the frontend portion. I wanted the capability to dedicate more time to my backend for this particular project rather than spend excessive amounts of time trying to wrangle the jungle that can be HTML & CSS (especially as a beginner!). Also, why try to reinvent the wheel? It was from this research that I discovered the existence of pre-built & pre-styled component libraries.
No more hair-pulling moments trying to create buttons with ripple effects, NavBar aligning, page responsiveness, etc. These components are already freely available to give your application that professional, clean edge. Not to mention there are personalization methods that allow you to have a cohesive design with your brand. While there are many to choose from, I have a few that have become a fast-favorite.
My 3 favorite component libraries so far:
1. Material UI : https://mui.com/
Material UI is a very popular React UI library that was started in 2014 according to Google’s guidelines for creating components. It currently has 77.7K stars and is the framework of choice for top companies such as Google, Amazon, Netflix, Unity, Spotify, NASA, and Shutterstock. MUI was the library I was initially most interested in due to its popularity, its comprehensive documentation, and that it seemed to have the most components available. I also enjoyed that they advised on best design practices, such as being sure to make button text only 1 line long.
However, I will admit I needed to dedicated time to learning how to use it in the first place and as a beginner, the documentation sometimes left me without a clear understanding. YouTube was a great resource for tutorials and further breakdown, however, so I was able to take advantage of MUI for my project, making it stand out.
2. React Bootstrap: https://getbootstrap.com/
Bootstrap is another highly popular library with the most Github stars of the 3 on the list- 157K. A factor in this is that it is also the oldest- It was created by Twitter and made open-source in 2011. Companies that currently utilize Bootstrap are Twitter, Airbnb, Dropbox, Apple Music, Twitter, Coursera, and Bloomberg. Bootstrap is known to be pretty developer friendly. You can quickly and easily create your app. The one drawback of this is that a lot of Bootstrap apps tend to look the same. However, it is a widely used framework that shouldn't be skipped.
3. Chakra UI: https://chakra-ui.com/
Although this library does not have nearly as many stars as the previous two (25.4K), it is also the newest. It is quickly growing in popularity and for good reason- it is extremely beginner friendly (which can't really be said for MUI or Bootstrap). In fact, as soon as you hit that "Get Started" button on their site, you are presented a link to a free, online video course you may take to get acclimated. The course is 42 minutes long total, guiding you through building a "Checkout" UI in short chunks. The only caveat is that it uses TypeScript, rather than JavaScript, which is typically a language learned once an individual is more advanced.
In conclusion...
While MUI, Bootstrap, & Chakra UI are my current favorite frontend frameworks that you need to check out, there are multiple others. Different projects have different use-cases which call for different tools. You can also combine different frameworks within your app as needed. The internet is a plethora of books, documentation, and videos you can utilize. At the end of the day, you will be empowering yourself to work smarter, not harder.
Top comments (0)