Why You Should and Shouldn’t Learn UI Frameworks

06 Oct 2022

Introduction

Should you learn a user interface (UI) framework? I have been learning UI Frameworks, specifically, the Bootstrap framework, for around a week now, and I have learned that using UI frameworks has its ups and downs. I consider myself an intermediate when it comes to pure HTML and CSS, and in my short experience with Bootstrap thus far, it isn’t necessary to learn UI frameworks but is very helpful if you aren’t going to do much of your customizations (styling, icons, etc).

Pros

UI frameworks have many benefits that mainly help with creating simple code quicker. Some of the benefits I’ve encountered so far are quick setup, fast UI creation, responsiveness, and readability. Setting up a project to use Bootstrap is surprisingly simple. All you need to do is add a few lines of code. Additionally, creating the UI of a web page is much quicker because you are provided things like default styles, such as already styled buttons, and nice icons that you can use and find quickly in the documentation. Another benefit of using Bootstrap is that you can quickly and simply make your web page responsive to all devices depending on their size. Lastly, another major benefit of Bootstrap or other UI frameworks is readability. When using Bootstrap and the defaults given (such as using the default, styled buttons), the CSS code is drastically shorter than it would’ve been just using HTML and CSS. I didn’t have to style the buttons in the CSS because it was already styled, and I used CSS Grid or FlexBox (rows, columns) within the HTML itself.

Cons

UI frameworks have their pros, but it also has their cons. Some of the cons I’ve encountered so far are that it’s another thing to learn on top of the HTML and CSS that you still need to learn thoroughly, and a bit of redundancy when using your own elements (buttons, icons, etc.). Sometimes you can get away without not knowing much HTML and CSS when using a UI framework, but sometimes you still need to know HTML and CSS well, For example, when you have to create many grid cells (like creating many grid cells for an etch-a-sketch website), you still need to know how CSS Grid works when you are working with the JavaScript code to create those cells. You can’t just create many grid cells in the HTML because it would be too long. Also, the defaults provided by the framework is both a pro and con depending on if you’re going to do your customizations. For example, if you’re going to code your styled buttons, you are no longer saving time using the framework.

Conclusion

I’m still learning UI frameworks, but in my experience, so far, It isn’t a MUST to learn, but it is very helpful in quickly and simply creating some web pages. Its pros consist of an easy setup, fast creation of UIs, simple implementation of responsiveness, and drastically improved readability. Its cons consist of redundancy (if defaults aren’t used), added learning, and the need to learn HTML and CSS well still.