If you’re involved in web design, you’re probably familiar with at least one of the popular front-end frameworks. Bootstrap is everywhere, Foundation is hot on its heels, and the HTML5 Boilerplate has become nearly ubiquitous. Smaller frameworks with a more focused niche are released almost daily.
Are frameworks a crutch, or can they be a useful tool to experienced front-end developers? Do they have a place in our workflow if we want to build websites that don’t look like every other website out there?
Here are some thoughts on the good and bad of front-end frameworks:
Types of Frameworks
“Framework” is a broad term — in reality, there are multiple types of front-end framework, each with different goals. High-level frameworks like Twitter Bootstrap and Foundation provide fully-styled elements right out of the box, allowing developers to construct fleshed-out websites without the need for customization. Lower-level frameworks like the HTML5 Boilerplate provide useful code snippets without enforcing their own styles on developers, but require major customization to be useful at all.
Let’s look at the pros and cons:
- Frameworks are excellent for rapid prototyping — building functional representations of unfinished concepts.
- The major frameworks have benefited from numerous iterations and input from some of the most experienced front-end developers, making them excellent learning tools for enthusiasts new to the profession. There are few lessons as valuable as parsing HTML5 Boilerplate or Twitter Bootstrap code line-by-line and figuring out why the developers have made particular choices.
- Frameworks provide an outlet for inexperienced developers who have ideas they want to implement quickly. Even in an age where coding is a basic literacy, there are plenty of entrepreneurs who have great ideas but lack the know-how to implement them. Frameworks get them one step closer to making their ideas a reality.
- Frameworks can provide a springboard for building a robust website quickly; by taking care of boilerplate code and default styles, developers can focus on the elements unique to their site. While one might easily argue that design is inherently detail-oriented, there’s no denying that it’s nice to be able to focus on the unique elements of a project rather than worrying about establishing a baseline grid, ensuring elements are normalized, setting some of the more esoteric meta tags, etc.
- Frameworks can be abused as easily as they are used; many designers use them as a crutch, holding themselves back in their growth as a front-end developer. Just as using WordPress does not make one a PHP programmer, using Bootstrap without understanding it does not make one a proficient web developer.
- For experienced front-end devs, starting a project from scratch is often faster than adapting a framework for a project. Web development is a logical, well-considered discipline; if you understand why things need to be done a certain way, your code will be predictable enough that you won’t need a framework reminding you what to do. Even seemingly arbitrary meta tags have rhyme and reason, and aren’t difficult to remember if you understand their purpose.
- Once you’ve seen Bootstrap, you’ll start noticing its footprints all over the web — website after website share the same navigation bar, buttons, and grid system. Frameworks with style defaults can lead to generic sites with little craftsmanship or creativity.
- Frameworks often produce convoluted, non-semantic code — “div soup” — made necessary by the fact that each CSS style has to be general enough to fit a variety of circumstances. The framework developer’s lack of foreknowledge requires each piece of code to be generic, bloating the files and creating messy class names like
.row-fluid. This isn’t the end of the world, but it’s also not ideal, and sacrifices best practices for speedier production time.
Personally, I’m a fan of Bootstrap, Foundation, and Boilerplate, though I don’t use any of them in my projects. (I used to use HTML5 Boilerplate in everything, but I’ve since weaned myself off it in favor of purely custom code.) I love tearing them apart to see what clever techniques their developers are using, and I keep any relevant snippets handy so that I can integrate them into my own projects. It was Boilerplate that first introduced me to asynchronous Google Analytics code and the jQuery CDN/fallback system. I have since integrated those components into my own projects, while avoiding anything bloated or unnecessary.
Personally, I advise against using web frameworks in your projects. New developers may find their growth stunted by over reliance on prefab code, while experienced developers are often slower using a framework rather than starting from scratch. To me, the benefits outweigh the costs. In a recent Industry Radio Show live chat, Pedro Carmo (@drocarmo) phrased this reasoning quite eloquently: “I think frontend frameworks disable people’s creativity. It teaches you how to edit code, but not to create code.” Amen.
Don’t get me wrong, all three frameworks I mentioned are impressive pieces of work. But why use someone else’s impressive work when you can be making your own?