Approaches to UI Development

Getting to know frameworks. When should we use them and why?

The User Interface

User Interfaces (UI) are an important medium between users and computers and their applications to the world wide web. They have evolved exponentially over the years. Since the release of Apple Macintosh's Graphical User Interface (GUI) Computer in 1984, they have become a staple in every computing device. As computer useage has grown, so too has the importance of User Interfaces for the applications and websites we access day to day. Over 4.9 billion or 62% of the world's population use the internet, and that demand has allowed for expansion of various development tools such as web frameworks.

Frameworks are extremely good taking standard UI development practices such as creating and utilizing containers, handling spacing between different elements, or styling a web page, and creating well-organized and responsive shortcuts to fit the developers needs.
The only caviat is that these frameworks are often extensive and have a learning curve. Using cascading style sheets (CSS) and hyper-text markup language (HTML) are common place staples in web development and simple enough to learn so why do we bother using frameworks?

Pros and Cons

We can treat web development like a roadmap. Before starting our trip, we need to take into account of all the paths we can take and which one will lead us to our destination in the most efficient way possible. When weighing out the different options on whether to use a framework or not you should ask yourself:

• What are you trying to accomplish?

  Are you creating a web page that requires you to have a hand in every fine detail of the site? Will using a framework hinder this? Then it may be best to use standard CSS and HTML. Maybe you require the opposite and can get the job done using predefined functions and templates? That is where a framework can shine.

• Who are you sharing this code with?

  When working with others, it is best practice to be on the same page on what tools are being utilized for a project. It is a challenge enough to maintain and manage a project with hundreds of lines of code let alone code from team members using different frameworks. In this scenario, it may be best to use the same frameworks that everyone is familiar with. Or if the project is simple enough, not using one at all.

• Will using a framework make this project more efficient?

  When you are serving a product with a high volume of user activity and engagement, and cannot afford to waste an extra second on shutting down servers, identifying problems, and iterating over edits to clear bugs, support from a framework's team could help remdying that problem. The

Bootstrap, thus far

While it has only been a week since we began our UI design module, I have come to develop a fondness and respect for frameworks like bootstrap 5. And since beginning to use HTML and CSS the week prior, I have had to spend more time than I would like, going back and forth between my index page and style sheet, debugging seemingly minor errors. And while I’m sure that in time my abilities would improve, I don’t mind getting the extra help frameworks provide.

Being able to simplify lines of code for layouts such as containers, grids, and columns was a much welcomed relief.

  <div class="container text-center">
    <div class="row">
      <div class="col">
        Column
      </div>
      <div class="col">
        Column
      </div>
      <div class="col">
        Column
      </div>
    </div>
  </div>

I also enjoyed using the bootstrap 5 components for blocks such as navigation bars as well as the wide selection of icons you can select from. Using bootstrap 5’s predefined classes paired with the ability to copy and paste icons directly into code simplify the process of creating responsive websites.

My Recommendation

I have to admit, that while they make it as simple and intuitive as possible to utilize framework tools, it does take some time getting used to the workflow. On top worrying about design and efficiency of the site, it you must do your due diligence in scouring the bootstrap documents for guidance when working on a project. However, once you are able to recall a handful of useful tools, then the cost of time learning the framework begins to pay itself off. Overall, I am confident in my ability to learn to integrate frameworks into my projects and I do recommend being able to understand how to use them because of their ease of use and seemingly ubiquitous existence in moderm web development.