Frustrating Frameworks?
24 Feb 2022Is Semantic UI worth it?
My Experience with Semantic UI
I have been learning about Semantic UI for about a week now, but this is not my first roundabout with the framework, as I also learned about and experimented with it in my ICS 314: Software Engineering I class. When I was first learning about the framework back in 2019, I definitely had my struggles with it as it was one of my first experiences working with a framework, especially one that was used on the front-end side of software engineering. Looking back now, after going through and relearning the basics of Semantic UI for this past week, I would tell my past self to shape up because this is actually significantly easier to understand and better to use than just HTML & CSS. Semantic UI is a framework that provides a lot of helpful premade semantic components that are integrated into HTML & CSS through the class attribute. In fact, going through the process of learning Semantic UI or even relearning it is not as difficult as one may think. I would say you definitely need some time to get used to it, especially if you are new to the framework, but it is definitely worth the frustration that may come when trying to learn the framework. In my opinion, it makes the front-end code more readable especially since there are actually human readable words in the class attribute fields thus making it easier to actually understand the meaning behind specific keywords. It not only enhances the experience of coding the front-end itself, but it also enhances the visuals of the front-end making it cleaner and easier on the eyes for users to look at.
REAL:
RECREATION:
What are the benefits?
One major benefit of using a UI framework like Semantic UI is the visual enhancements it offers as opposed to just using plain HTML & CSS. In the images just above this section, I have screenshots of the front-end of a website and a “fake” version of it that I recreated using Semantic UI, and I have labeled which ones are the real deal vs the one I recreated. Although they are not exactly the same, they are quite alike when it comes to structure, and it provides a similar visual flare due to the use of Semantic UI. If I had to try to recreate the webpage front-end using only HTML & CSS, I would say its likely that it would look nowhere near as impressive as my recreation with Semantic UI. It would look significantly less enticing, and that is not to belittle HTML & CSS, but it rather serves as a reminder of how we should use all available tools at our disposal in order to produce the best product possible. It is like being stuck on a homework problem that you cannot seem to figure out, but you have classmates and also teachers to ask for help. If you have tried to figure it out and you think you have banged your head on the table for long enough, it is never a problem to ask for help from others when you need it.
Another benefit of using a UI framework like Semantic UI is the learning curve that it offers. If you are looking at Semantic UI for the first time, it may come off a bit intimidating as you could be new to the world of programming. However, once you familiarize yourself with the documentation, you will find that Semantic UI is not that hard at all to understand and to actually use in your implementations. The main reason for this is because it uses actual English words as keywords for the semantic components that it provides to developers, some examples being Container, Grid, Label, Segment, and more. With these preconfigured semantic components at our disposal, we can use them in a variety of ways to achieve the front-end that we desire to attain. In doing so, we find out that the learning curve is not as steep as we may have initially thought because of said English words that we use as the descriptors for these semantic components, thus making it more understandable as we code and much more human readable in general.
Why not HTML & CSS?
If I had to compare HTML & CSS to Semantic UI, I would say HTML & CSS is like making instant noodles while Semantic UI is like cooking your own homemade noodles. HTML & CSS gives the minimal basics and essentials for you to get by, and its quite simple as its the most basic level of front-end UI design. On the other hand, Semantic UI gives you a lot more to work with, a lot more options to choose from, more freedom in your decision making, and just generally provides more benefits than plain HTML & CSS. As mentioned above, the resulting front-end UI typically looks much cleaner with Semantic UI and the learning curve can be quite simple as well. HTML & CSS gets the job done, just like eating instant noodles does, but that is about it. It is not as beneficial in the long run as learning and integrating Semantic UI into the front-end is, just as learning and making your own noodles is more beneficial in the long run as you learn how to cook for yourself and it is typically healthier, thus providing more personal benefit for you. I am sure there are some people out there who still prefer plain HTML & CSS over Semantic UI, but by doing so, they are just limiting their scope instead of expanding their horizon of possibilities by integrating Semantic UI. The main point is that HTML & CSS can get the job done, but the real question is how well? Using Semantic UI typically increases the wellness of the job that was done, but in the end, it is ultimately up to the developer to decide what they want to use. I can personally say that I would recommend at least trying to integrate Semantic UI as opposed to just plain old HTML & CSS.