Why Use UI Frameworks, or "How to Make a Beautiful Front Page in 30 Minutes Flat"
06 Oct 2016
No two ways about it: The old web was ugly. Primarily a way of communicating between scientists, and over a low-bandwidth line, the web did not need to be beautiful. This was reflected in the importance placed on HTML styling: The internet was invented in 1983, and made available to the general public in 1991, but the CSS wouldn’t be implemented until almost 1997 once the influx of filthy casuals non-technical users had started to explode and websites needed to make their homepages more accommodating. Since then, the relationship between front end, back-end, HTML, CSS, and JS has only grown more complex.
Though I’d hand-coded websites in the Angelfire days, I’d never been seriously into building websites. After all, Wordpress and MySpace made it easy to avoid the hard stuff, and the advent of Facebook made it so customization was gone entirely. But I decided I want to do this stuff now, so there is a lot to learn. One of the classes I’ve taken here at UH Manoa required me to build a simple HTML website, which was my first serious experience hand-coding a website in probably 15 or so years…and it was arduous! CSS is simple enough, but it’s governed by arcane rules and it’s difficult to make stuff look good–I almost didn’t include it in my portfolio because it looked too amateurish in 2016, but I thought it was a good reminder of where I’d come from, and how much there was left to learn. Turns out my CSS isn’t the only thing that needed catching up to 2016.
As part of our software engineering class, I was introduced to Semantic UI, a plain-English UI framework that takes care of your front-end’s JS and CSS heavy lifting. I remember seeing our first exercise, which was essentially recreating the Island Snow website in Semantic UI…in about 30 minutes. After the pain (and days) of hand-coding my rinky-dink “About Me” page, the concept seemed patently ridiculous. And yet, there was the professor, scratching out some code on a YouTube video and making a beautiful, well-designed, responsive website appear before my eyes. What was this sorcery?
Though I’ve yet to fully grasp its use, Semantic UI makes front-end development incredibly easy–at least in comparison to manually developing an entire site from scratch using HTML and CSS. And it looks good, too, allowing you to create modern, visually rich websites within minutes.
In Professor Johnson’s prompt, he says that UI frameworks can be almost as complex as entire programming languages, but I didn’t find that to be my experience with Semantic. Because of a sudden work trip to India, I found myself in the situation where I had to hit the ground running and start pumping out assignments even though I had only seen the professor’s demo videos on Island Snow and hadn’t even had a chance to watch the three hours (!) of tutorials on Semantic UI that he had assigned. Despite this deep shortcoming of knowledge, I was able to effectively guess at Semantic’s structure and eke out passable websites. With a little more time, I would have been making front pages that could stand besides any modern design shop’s, as my classmates are now capable of doing. For a guy that lacks confidence in his ability to ship products at this point that’s powerful.
Of course, UI frameworks have their pitfalls, too. The first is that I couldn’t build a UI framework if I wanted to, since my knowledge of CSS and JS isn’t nearly deep enough, and the ease of building front-ends with the framework could easily turn into never learning. This exacerbates point two, which is that UI Frameworks are opinionated–they do a lot for you, but they also determine what’s possible and how things should be done. If you don’t know how to tweak them, then you are stuck with the framework’s decisions.
However, the benefits far outweigh the cons. Not every software engineer has the time or desire to be a great front-end developer (computer science is just too broad for that), and often a front page is just a temporary delivery mechanism to prove back-end tech works well enough to merit getting a front-end developer in the first place. A great example of a time to do this would be a hackathon, where speed to deploy outweighs nearly every other factor, and having an end-user or -client friendly way to test a product within minutes is invaluable. Lastly, I may not be a CSS wizard or a great designer, but with Semantic UI and other UI frameworks, I don’t have to be–I can be a one-man shop if I need to be, and can iterate on designs and tests much more quickly than if I had to build everything from scratch every time. Simply put, it’s an incredibly powerful tool.
While I still want to learn how to do the things Semantic UI does in JS and CSS, I don’t think I’ll find myself abandoning UI frameworks any time soon.