HTML & CSS
Article

Front-end Frameworks: Custom vs. Ready-to-use Solutions

By Ivaylo Gerchev

The dilemma “custom versus ready-to-use” is pretty common in the Web world. Whether we talk about CSS, JavaScript, PHP, or a framework in any other programming language, the question of whether to use a prebuilt code base versus using your own code arises often. This is especially important for front-end frameworks, because they are directly responsible for the look and feel of a website.

Frameworks like Bootstrap and Foundation have changed the way people build their websites. These tools make it a lot easier, even for non-programmers, to create complete websites with minimal effort and time investment. But such “automated” website building can have some serious drawbacks.

So the question is: Is the easier solution the better one?

Although most people tend to choose the tool that gives them the fastest and the easiest results, this, as we’ll see later, is not always the best possible option. Also, it seems that many people are more or less confused when they need to choose between custom and ready-to-use variants. That’s why in the next part of this article we’re going to examine the problem in more detail by exploring the advantages and downsides of each choice, which I hope will help you to make the right decision when this question arises.

Advantages of Ready-to-use Solutions

The reason most people prefer ready-to-use frameworks is that they offer great advantages. Let’s see the most important of them.

  • You don’t have to be a programmer. Decent knowledge of HTML and CSS is enough, in most cases, to build a good-looking and functioning website. All the prior programming has already been done by skilled developers.
  • As already mentioned, a framework solution seriously minimizes the time and efforts involved in the website building process.
  • The plug-and-play functionality. We need only to type some markup to get a fully functional piece of code (a well-cooked HTML, CSS, and JavaScript soup) without worrying about styling, dynamic behavior, and so on.
  • When we download a framework’s package, we can be sure that we have stable and well-tested code. This means that your website will look and behave properly on all browsers that the framework supports.
  • We get regular updates with bug fixes and new features for the framework.
  • Because of the popularity that ready-to-use frameworks have, you can rely on help from the community in the form of articles, tutorials (for the framework learning process), and framework add-ons and extensions (for the website building process).

As you can see, there are so many advantages to using a framework. But if you rethink it well, you’ll see that most of these refer to the time and efforts you save during the learning and/or building process. These advantages are not strictly related to the quality of the final product. In short, they concern you and your time and efforts, but not necessarily your product.

This is the exact opposite to our users’ and clients’ interests – they care about how good your product is, and not how much time and effort you’ve invested to learn the framework and build the website.

So, the easy is good, but…

Downsides of Ready-to-use Solutions

Everything comes with a price. Despite the many advantages that a ready-to-use framework offers, there are also some serious drawbacks. For an average user, or for one with modest requirements, the downsides listed below can seem insignificant, but for one looking for the best possible quality, these downsides are of highest importance.

  • Although the plug-and-play functionality sounds great, before you take advantage of using it you’ll need to invest time to learn how to use it.
  • Because “ready-to-use” often means “one-for-all”, such a framework attempts to solve every single problem for every single situation that a front-end developer could encounter, which leads to a lot of unnecessary code.
  • As it’s made for mass consumption, you can be almost certain that you’ll need to tweak a ready-to-use framework to meet your requirements, which will take additional time.
  • If you don’t make any customizations your website will look like all the rest, which can damage your product’s image or at the very least do nothing to improve it.
  • In many cases, the framework you’ve chosen won’t have all the components you need, which can lead to an additional third party integration step (possibly in the form of bloated jQuery plugins or similar).
  • You have no control over the code. If the development team decides to remove some component from the framework, then you are forced to accept that change. If you don’t want it, you have to use the a modified or older version of their product.

For the above reasons, you are unable to achieve some of the most important goals in website building such as uniqueness, high performance, strong compatibility and usability, and a compact and unified code base and appearance. This is very important, because in web development, especially for mobile, every small improvement can cause great impact. So, “being average” is not a smart decision.

Advantages of Custom Solutions

If you’re looking for the best results, then a custom framework can provide some strong advantages.

  • Once built, a custom solution will save you time and effort in the future because it was built precisely to your long-term needs.
  • You or your team will not need to learn how to use or customize it because you’ll know your framework inside out (although new team members will need to learn it).
  • It’s optimized to satisfy only your needs, not everyone’s. This way it’s far easier to achieve high performance.
  • You include only what you need and in the way you need it. No unnecessary stuff, no bloated code.
  • You have full control over the code and its design implementation. You can be sure that some really great feature won’t be removed or deprecated in future releases unless it aligns with your agenda.
  • Complete modularity. The flexibility of your framework depends only on you. You can use only those parts of your framework that you need for a particular project.
  • A unified code base. You can minimize the need of third party components, which means less mix-and-match work.
  • Uniqueness of your website is 100% guaranteed. Default themes in most of frameworks are pretty much the same, so you still need to create your own. But for your framework you can create unique themes from the very beginning.
  • Despite the initial extra work and maintenance, the process will teach you a lot, and thus will improve your skills as a developer.

These advantages may also impact in a positive way your time and efforts, but in this case they are addressed much more to the quality of the final product, thus giving you the ability to achieve the best performance, functionality, and appearance.

Downsides of Custom Solutions

The most significant downsides to a custom made framework are the time and effort needed when building, testing, maintaining, and improving it. But the downsides can be seen as benefits. Let’s see what I mean.

  • It takes more time and effort. This is true for the early stages, but in the long run this work will save you time and effort.
  • You need to test and maintain the code. But only for the browsers you are targeting.
  • The bug fixes, updates, and new features are built by you. This takes time, but you update only what you need, and implement only those features that are required for your projects. Nothing superfluous.

The Third Solution

I don’t know to what extent people realize it, but besides the custom and ready-to-use options there is actually a third solution, which I call a semi-custom solution. We use a semi-custom solution any time we take a ready-to-use framework such as Bootstrap and perform hard customizations on it.

In fact, a ready-to-use framework is such only if we use it as is, or with minor cosmetic touches (soft customization). But when we do that the net result is a recognizable website with pretty much the same look and feel as many others using the same framework. On the other hand, if you need to customize deeply a particular framework before using it, then we can’t say that the framework is truly a ready-to-use solution.

Is “Reinventing the Wheel” a Real Problem?

In forums, blogs, and similar resources, one of the main arguments against custom made frameworks is the question: Why reinvent the wheel?

At first glance such an argument sounds reasonable, but honestly, I can’t agree with such thinking. So, let’s consider the problem a bit more deeply.

If people hadn’t reinvented the wheel over and over again throughout history, today we would still be using primitive carts. Reinventing the wheel can be a real problem only if you replicate the wheel in the exact same manner, that is, being a copycat. But if you make it more useful, valuable, and better suited to your needs, then there is no problem.

If you take it even more deeply you will see that the whole evolution process is based on the “reinventing the wheel” paradigm. Every new phase is a replication of the previous one, but with improvements (sometimes significant, sometimes not).

Let’s now consider the word develop. This word means “bring to a more advanced or effective state”, “to cause to grow or expand”, “to elaborate or expand in detail”. In other words, we’re not creating something from nothing; we’re improving what we already have. So, for a web developer this means to write better and more effective code, and to expand that code in detail, that is, adding additional functionality on top of the existing one.

As you can see, reinventing the wheel is not something you need to avoid. It’s a natural process and it occurs very often. So don’t be afraid to reinvent the wheel.

One more thing I want to point out is that making your own custom framework has nothing to do with Yet Another Framework Syndrome (YAFS). Building a custom framework can’t “lead to confusion and frustration”, and you don’t need “to manually evaluate 300 different options in order to select something maintainable.” You make the framework for yourself, not for the mass. You know exactly what you need, and implement it in the exact manner you want and consider best practice. So, there is no confusion, no frustration, and no front-end choice paralysis.

Finally, here is a kōan to meditate on: Why are people “reinventing the wheel” by having their own children, when they can instead adopt the children of others?! :)

How Can You Make the Right Choice?

To make the right decision, you need to ask the right question. The right question is not: What is the proper decision? The right question is: What is the proper decision for me?

The above means that before you make the right decision you need a clear vision about your needs, capabilities, and resources.

As you may have already guessed, I personally prefer a custom solution any time when I’m capable of building it. But this is the proper decision for me (of course, not in every situation). To find out whether it’s a proper decision for you too, you need to answer the following questions:

  • Am I capable to create it?
  • Do I have enough free/extra time to do it?
  • Is it reasonable to make it?

(Note: You may be completely capable of doing it and you may have plenty of free time, but if it doesn’t make sense, you should not. If some small adjustments of an existing framework will do the job, then the time and effort to build a completely new product may not be justified.)

If the answers of the above questions are all positive, then the custom solution is definitely the proper decision for you.

I hope that this article has solved the dilemma “custom versus ready-to-use”, and from now on you’ll be able to make the right decision easier and with more confidence.

  • bl4de

    Good post. IMHO to be able to choose the right solution for particular application (not only web application), developer needs to have some experience with both approaches.

    There’s nothing worst than developer which KNOWS that one solution is better than other, without ANY experience with one of them.

    • http://twitter.com/clamiax Claudio

      You’re partially right: there’s no need to jump from the window if there are stairs around, even if you never experienced jumping from the window. That is, there are things which need to be experienced, something else just needs a bit of thinking.

      I would like to point this out, which to me makes a lot of sense. I hope you’ll find an enjoiable read.

      http://discuss.joelonsoftware.com/default.asp?joel.3.219431.12

      Regards,
      Claudio

  • http://www.reformadesites.com.br Matteus Barbosa

    I really appreciate your approach. An important thing to highlight is that you must look at the needs of your corporation

  • http://www.reformadesites.com.br Matteus Barbosa

    I really appreciate your approach. An important thing to highlight is that you must focus at the needs of your corporation much more than in your team skills or just in the wow needs. Your topic was centered on the frontend context, but we csn say it is very worth to backend as well. My tip for you guys is to design your frontend screens first, then , you must really think about maintenability, using strong community supported and documented frameworks, and keeping your custom code following its rules and weakly clued

  • Miloš Đakonović

    Just like in most other situations – no easy and short answers. It depends. Are you really going to reinvent Normalize.css (part of Bootstrap & HTML5B) ? Really, after all efforts done by number of developers that has noted small inconsistencies in various devices/platforms? Or are you up to have Bootstrap 101 template for all your customers and to continue to claim that you’re legitimate developer.

    Again, it depends. Up to some point usage of frameworks are MUST DO. Above that point you’re delegitimizing yourself as developer.

  • Mark Richards

    Funny this! Your new personal solution is some one else’s ‘off the shelf’ framework …..
    I say this as the author of Cliqon.

  • Таканов Маекава

    Good post. I have also read some of Ivaylo Gerchev’s posts before.I feel that his point of view and way of explanation are really reasonable and well considered. Thanks Gerchev.

  • http://cneude-createur-web.com Matthieu

    It’s really interesting. In fact I developed websites with frameworks (like Bootstrap) and without. I think to have a total control on your code is the most important thing if you want to be able to keep and update it easily on a long time period.

    Well like many says: it depends. Depends of your deadline and the lifetime of your website. For very short deadlines, it’s really easy to use a framework (if you know him well of course) but if you have more time, I prefer to develop the front end part from scratch as well.

    Well development is also and most of the time analysing what you need in order to choose proper tool. There is no good answer.

  • Yassine El Houari

    I see this comments plugin a lot. Can you please tell me what is its name? Thank you. And by the way, a great article. It was very helpful.

    • Andrew

      Disqus man…easiest to implement and a highly popular one as well

    • Andrew

      Disqus man…easiest to implement and a highly popular one as well

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.