Frameworks – How not to reinvent the wheel

I recently started working with the Bootstrap framework and playing with other technologies such as JQuery.  Both of these technologies have been out for some time, and for much of it, I shrugged them off and continued working as I had always done, scratch HTML, CSS, and JS.

It was my workplace that started challenging my very traditional approach.  Needing a rapid solution for responsive design that was readable, coupled with it’s very close relationship with our favorite CMS Joomla it was an easy choice to start developing with Bootstrap.  Working with bootstrap quickly doubled and even tripled my productivity, standardizing common components such as menus and normalizing many browser inconsistencies.  It was at that time that I stepped back and began to wonder, why was it that I had not adopted these technologies sooner.

As it turns out, developers much like the rest of the planet are very reluctant to change.  Many times changing how things are done means redoing many of the pre done code, and templates as well as a learning curve ranging from a handful of hours to days depending on the paradigm and how intuitive the framework is.  So why a framework, what are some of the advantages of using a framework and what are the challenges that many developers face?

The first challenge in deciding to work with a framework, is finding one that works for you, works for your software, and works for your team.  In our case, we had to find a framework that worked well in responsive, was easy for people who didn’t have as much coding experience to understand, and was compatible with our CMS.  Being lightweight was also a consideration.  Other challenges to consider is who the end user is.  If you are using a framework that isn’t compatible with older browsers, and much of your client base is using older software then that may be a poor choice.

Another challenge you will face in choosing a framework is learning how it works.  It’s important to remember that if you are working in a team, then anyone who works with your source code, including designers, and content editors, need to be able to read any code written in the framework and may also need to edit it.  For a more experienced developer this might be a matter of reviewing some existing code and a little trial and error to get it right.  For others having more thorough documentation might be a requirement.

A challenge that we ran into when it came to choosing a framework was finding software, code snippets, and components that worked with our framework natively or at the very least didn’t conflict. Much of this meant making sure that our framework was developed correctly so as to minimize conflicts, as well as reviewing each software component we used and testing it thoroughly. I’d like to take a moment however to point out that conflicts aren’t unique to frameworks.  When it comes to working with third party components, it’s important to check for conflicts between existing components and your own code base before using them.

With the many challenges of working with a framework, you may feel like they aren’t worth the time, but as I mentioned earlier, they doubled my productivity, and for a good reason, well written frameworks that are selected based on how they fill your requirements, will take over many of the repetitive and mundane tasks that you frequently do.  They also frequently account for browser inconsistencies allowing you as the developer to focus more time on making a product that works well, instead of trying to make it work ok across several devices.

Each week I am going to focus on an area of web based frameworks including frameworks for developing in HTML, CSS, JS, PHP, and also touch on a few languages that are themselves dedicated to performing like a framework.

What are some of the more popular Frameworks

Not all frameworks are created equal, below I showcase some of the good… the bad.. and the ugly of frameworks available, highlighting some of there good points, and outlining some things to watch out for.  I’m focusing on web based technologies here, but many programming languages and technologies have frameworks available that are well worth considering

Bootstrap

<http://getbootstrap.com/2.3.2/>

Scope

HTML, CSS, JS framework for rapid design/Responsive Design

The Good:

  • Easy to learn and implement
  • Robust documentation
  • Built into the Joomla CMS

The Bad:

  • Heavy requiring many files which reduces load time
  • You may need to override many of the default styles

The Ugly:

    .

  • The menu code, and some of the more sophisticated features can get a little difficult to work with
  • Loss of semantic markup through class names

Bootstrap is a framework designed by and used by Twitter.  Some of the greatest advantages of Bootstrap include it’s ease of use, ease of installation, and popularity, in fact Bootstrap has been baked into the popular CMS Joomla in it’s latest version, making it plug and play for people using the platform.

Bootstrap’s syntax is based on the popular grid system, defining rows and columns much like you would do with a table. Bootstraps power comes from the ability to use it’s simple syntax on almost any browser/os/device combination and feel reasonably confident it will look the same. Also using responsive bootstrap you can quickly and easily design a responsive site with minimal tweaking at break points to get the look you want.

One of the main issues I ran into with bootstrap is it adds many styles that often need to be over-ridden.  For example menu colours, header styles, margin and padding to certain elements.  Some of these styles can be helpful, others I find over-riding on a regular basis.  This may not be as big of a nuisance if you are writing static websites, or not using a CMS and can easily  cut these pieces out, but will need to be over-written when you use the built in ones.

The one gripe I do have with bootstrap is common across the many frameworks that I’ve seen and that is by using the grid layout you are adding layers of code to your page that don’t provide semantic meaning. For example a div with class container, or container-fluid doesn’t provide any indication to what it’s contents may be but a div class header, would.

Blue Print

<http://blueprintcss.org/>

Scope

HTML, CSS

The Good

  • Rapid and easy development based on the grid system.
  • Built in print stylesheet
  • Style normalization.

The bad:

Some style overrides may be required to get a unique look and feel for your website

The Ugly:

  • Blueprint hasn’t been updated for over 2 years, some of the plugins even longer.
  • Not a responsive layout except LIMITED support through a plugin

Blueprint is an older and widely used framework including by the US government.  One of the great things about blueprint is it’s size.  Installing blueprint doesn’t require a lot of overhead in terms of files.  This also lends to it’s simplicity when it comes to learning. Like bootstrap, Blueprint doesn’t use class names that provide much semantic meaning, however you can always add your own classnames to provide such clarity.

Blueprint also comes with an array of installable plugins allowing you to do things like dropdowns, and pop up boxes without needing to “get under the hood”.  These plugins are installed through by downloading the respective styles, and JS files and including them.  One notable CSS plugin is liquid blueprint which gives limited responsive support, allowing the columns to expand when resizing the window.

HTML5 Boilerplate

<http://html5boilerplate.com/>

The good:

  • Offers a variety of configurations, or a quick and simple download
  • Regularly updated.

The Bad

If you’re a purist, or like more fine grained control this may not be for you.,/p>

The Ugly

Although it does use multiple popular frameworks, it does lock you into using them

HTML5 boilerplate isn’t technically a framework on it’s own, but a tool that allows you to set up your project including all necessary source files for a fully responsive, or static width site with a modernizer and normalizer script ready and installed.   HTML5 boilerplate comes ready with Bootstrap, Mobile-first Responsive, Jquery, modernizer, HTML5shiv and other related frameworks to tailor your development needs. This is great to get a quick and easy start on your project and forgo all the repetitive tasks such as setting up your libraries, and directory structure.

If you aren’t accustomed to using a framework, or don’t want the headaches of trying to set up the layout then this tool might be perfect for you. However, if you prefer to set up your structure yourself or use your own custom frameworks or tools, then you may find that the limitations imposed might be more of a bother than a help.

Conclusion

There are literally hundreds of frameworks that vary in complexity, purpose, usage, and support. What works for you is really a matter of preference and requirements.  The aim of this series is to expose you to the idea of frameworks, and help you to improve your productivity, and quality of work by saving you from the repetition of making it work on every device, and instead focus on how your site looks and works.

Feel free to comment below and tell me about the frameworks you use or prefer, well written posts will be featured above with my features.

 

Leave a Reply

Your email address will not be published. Required fields are marked *