The Double-Edged Sword

22 Feb 2023

Why UI Frameworks

UI framework is the user interface framework, but also the UI template. And most frameworks are pre-written code libraries. For example, Bootstrap provides a basic structure with a grid system, link styles, and backgrounds. UI framework pre-built components and templates to help developers save time and effort; while we know how tedious the page layout in HTML and CSS is, we often repeat the same steps and page elements spacing and Layout. So let’s talk more about the benefits of UI frameworks.

Faster development time: The UI framework comes with pre-built components and templates, allowing developers to not write from blank. Instead, they can use a template, a draft for editing and customization based on the template. For example, most websites need a navigation bar, body, footer, etc. However, the developer does not have to modify the page format based on the template.
Design consistency: Because the UI framework comes with templates and components can use components to standardize the page format, such as the centering of web elements and the space between elements and other tedious adjustments. This also dramatically reduces the inconsistency between web elements and other problems.
Multi-platform friendly design: UI frameworks can also be better adapted to different screen sizes and devices, ensuring that the website or application is accessible and user-friendly on any device. And the developer does not have to adjust as well as modify and reduce for different devices.

These three benefits are enough for most developers to use UI frameworks. However, the benefits of UI frameworks are not the only three points where UI frameworks can save money on development and where open source UI frameworks can provide a better community to provide development help.

Potential Drawbacks of UI Frameworks

Nothing is perfect, and UI frameworks are one of them. Among the shortcomings of UI, frameworks can lead to worse problems that can affect beginners learning to develop. And some problems can make programming less creative. So let’s understand the disadvantages of UI frameworks.

Bloated code: The code in UI frameworks may not know how to shed as much as a developer can and can be treated as a programming language. Using templates often comes with many pre-built codes that may be optional for a particular project. This can lead to code bloat and slower load times, affecting the user experience. But it also depends on what UI framework is in place; some may be optimized for template code.
Lack of flexibility: Templates and components in UI frameworks may limit the developer’s ability to be creative and flexible with the design. Because of the UI framework’s uniformity of standards, it may need to be more varied and consistent for developers to write content. This can also significantly change the developer’s perception of aesthetics: too generic.
Over-reliance on pre-built components: It is simple for programmers to rely too heavily on pre-built components, which might create unoriginal designs. This may result in websites and software that appears and feels generic. It can also significantly limit a developer’s ability to learn the language and handle different frameworks.

Personal Experience

During the week of learning Bootstrap, Bootstrap made me change my dullness towards writing HTML and CSS. As I said above, I’ve come to rely on Bootstrap; I prefer the UI framework to use raw HTML and CSS. And when it comes to the reasons, raw HTML and CSS have a lot of harmful effects on the repetitiveness of writing web pages, most of which is the mindset of writing. Because writing different pages each time is not beautiful and modern, and the challenge of formatting the pages can drive you crazy. Although my experience with Bootstrap has been good, it has been challenging to learn. First, the IDE has no code hinting or code autocompletion because I use links to refer to Bootstrap in my project. And overlaying <div> elements can be very confusing because you sometimes need to know which <div> to add the correct class. And that can affect how well you can use the component. And until now, I’m still learning Bootstrap and using it, and I’ve found some tricks and tips on how to use Bootstrap components and templates. So, I am very optimistic about Bootstrap and its future development.