Lets Take The Easy Way
10 Oct 2019
Throughout my education, the routine when learning something new is to first learn the concept, then the shortcuts. Learning about developing UI is like learning about calculating the area under a curve. In calculus, when learning how to calculate the area under a curve, we first learned about Riemann sums, then about integrals. Calculating a Riemann sum is basically dividing the curve into a bunch of rectangles and summing the area of rectangles. The more rectangles there are, the more accurate your approximation is. All of that work, just for an approximation. When we got the hang of it, we learned about integrals. We did have to memorize the integrals of basic functions, but at least we didn’t have to make a bunch of rectangles and calculate the area for each of them and we got the actual area under the curve. Riemann sums were important, because it taught us the concept of what is happening when we take the integral of an equation.
When developing UI, you have to first learn simple things like various elements and how to manipulate them. Once you completely understand it and are somewhat adept in it, you can start to use short cuts, or UI frameworks. Just like how we never used Riemann sums again after learning integrals, raw html and css should be avoided once you learn frameworks for the sake of time, accuracy, and consistency.
Semantic UI
I’ve only recently learned about implementing user interphases. To be honest, raw html and css is a pain. Imagine wanting to make an image on the center of the screen. When using raw html and css, you would have to guess the padding for the top and the left of the image. Of course your guess would be wrong and you would have to slowly add padding until it finally looks like it’s in the center. Unfortunately, when you change the size of the page, your image is no longer in the middle and all the work and time you put into this has been wasted. If only you could just say that the object is in the middle.
Well, with the Semantic UI framework, you can. With Semantic UI, you no longer have to guess measurements, manually adjust everything, or even build everything. Need an image to be centered? Just add a UI class “centered”. Want an input object that is connected to a button? Use the semantic class “ui icon input”. Want a tab that provides a user with multiple options when they click on it? Use the semantic class “ui dropdown”. In fact, you can go on the Semantic website and see the exact code used to implement elements, views, modules, etc. You can copy and paste these codes into yours and just input your information. Semantic UI is not hard to learn at all. In my opinion, the best thing about Semantic is that its classes are descriptive and thus easy to remember. Also, when you read your code, you know exactly whats going on.
Should you use a UI framework?
There are a lot of pros and cons of using a UI framework. Frameworks are essentially made to be shortcuts. Building something that you will use a lot and in multiple projects, every time you use it, takes too much work and time. Frameworks eliminate that. They are efficient and they provide developers with a consistent UI design. In some cases the framework you are using wont have exactly what you need, so you will have to spend time adjusting and overriding some things and it may take the same amount of time you saved by using a framework. Unfortunately, they may not be the best for beginning developers. Learning frameworks, but not the code behind it will cause problems when you run into complex challenges.
While I am just implementing simple recreation projects where I recreate or create a simple webpage, UI frameworks are a god send. I am able to use objects just by using a framework class instead of actually creating them by scratch. Overall, if you are an experienced developer and you understand the underlying technology and the code that powers the framework, with the right framework for your project, you can save a time and energy. Otherwise, you should refrain from only learning frameworks.