Matt Steele / Posted 11.5.2013
The pros & cons of using a front-end framework
Front-end frameworks have become quite popular over the last few years, and there are a lot of them out there to choose from. But how do you know if and when a framework is right for your web project? While there are lots of benefits in using frameworks, there are also some potentially serious pitfalls.
A framework is a set of CSS/HTML/JS files that allow you to get your website and running simply, consistently and responsively. The three most popular frameworks right now are Bootstrap from Twitter, Zurb's Foundation and YUI from Yahoo!.
There are, of course, a lot more frameworks out there and each is slightly different in its own way. But they all share the same idea of getting your site off the ground in a quick and consistent way.
So why would you or wouldn't you use a framework then?
The pros of using a framework
Frameworks make your job easier and allow you to create standard websites with minimum effort.
Quick and easy
Frameworks shine the brightest when your main concern is getting a site online and functional. Say you've got a great idea for a new web app, but you're a backend developer who needs something on the front end to work with. Or alternately, say you've got the specs for a site, but the design hasn't made it to you just yet. In both of these cases, in less than a two days of work, you can have the front end up and running while you concentrate on making the back end work.
Another great advantage to using a framework is well-tested code. A team of developers has worked on a framework long before you got to it, and put in the time to make sure that the code is tested and works without question. Even on browsers older than IE8 in some cases. This is a HUGE advantage to anyone who wants to make sure their site runs smoothly on most browsers.
Building a website is about making thousands of tiny decisions that add up to your finished product. What's the base font size? What's the best way to make this navigation horizontal? What happens when the site is viewed on a smartphone or a tablet?
With a framework, all of these tiny decisions have been made by people that came before you. There's no need to think about the best way to clear a float, just add a style like ".clearfix" and you're done.
The cons of using a framework
Unfortunately frameworks also come with some massive disadvantages.
At some point during the build process, you're going to want to customize something about your site. Frameworks certainly allow you to do this: just create a customizations.css file, call it after the framework CSS file in the <head> tag, and begin overriding. As anyone who has ever done this before knows, these little customizations can add up very quickly. It's not uncommon to take a step back after a few hours and realize that you're overriding a lot of default styles. This leads to code bloat and flies directly in the face of the old DRY acronym mantra: Don't Repeat Yourself.
Know your code
A framework is not your code. With that knowledge comes the fact that you may not understand why things are working (or not working) as they are. Granted, not everyone that puts up a website needs to know exactly how it's working, but any developer with a sense of curiosity will want to dive deeper to try and figure things out. If you’re a web developer who builds custom sites for clients, a framework is not the way to go. You’re going to need to know your code and when you go with a framework, you’re leaving a lot of decisions to somebody else.
When it comes to updating a framework, you could be left in a lose-lose situation. If you don’t update to the latest version, you could fall out of step with current web standards, or if you update it, you run the risk of breaking things.
When you're using someone else's code, you leave it up to their discretion as to what standards and methods to use for the next release. Web best practices change constantly, and it's your job as a developer to stay up-to-date. You could opt to ignore future framework updates altogether and stick with what you've got, but then you run the risk of falling behind future web methods and standards.
For example, changes made to Bootstrap 3 included dropping support for IE7, and going mobile first (using min-width vs using max-width on media queries). These are HUGE changes that could break a site updated from 2.x. No one knows what’s next. But more importantly, you have no control over it.
When you’re building with a framework, you’re either making a decision to stay with the default theme (which is usually boring), or to customize it by extending the classes. If you’re in a team environment, it may be best to keep the customizations to a minimum. Lots of customizations could create issues down the line. Not only do the next team members need to learn the defaults of the framework, but they also need to learn the ways that you extended them. A style guide can go a long way in preventing confusion, but in a team environment it’s best to avoid a framework altogether, in order to avoid these kind of future pitfalls.
The decision to go with a framework should be made on a case-by-case basis. Ultimately though, the decision will boil down to how comfortable you are with using someone else’s code. Even if you customize it, at its core, it is not your code. Are you OK with that?
A framework is essentially a short-term solution because you’re agreeing to stay with the standards that are only applicable today. Will it break in the future? That’s up to the framework developers, not you.
A good analogy for frameworks is IKEA furniture: easy to assemble and start using right away, but not built to last a lifetime, and almost pointless to customize. At some point, you're going to want to have something made just for you, that you know was built to last.
The best of both worlds
Why not build your own custom framework?
Most frameworks are open source, so take some time and examine the code that they use. What specific parts do you like? Take inspiration and select parts from frameworks that you like. Say you like the way Bootstrap names their styles. If so, use that naming convention in your framework. Take inspiration from the buttons, or the forms, or anything else for that matter, and roll it into your own framework.
In the end, you'll have a site that you built and understand. It'll likely be much smaller, faster and built with a purpose. You'll also be able to take pride in the custom work you're done.
Have you tried any frameworks? What pros and cons have you noticed when using them?
Front-end developer at Q Digital Studio
Matt Steele is a front-end developer at Q Digital Studio. He feels just fine being a well-rounded geek. When he's not discussing semantic code, you'll likely overhear him chatting baseball, sci-fi, or jazz. Follow Matt on twitter @MattSteeele.