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

February 7, 2018

The dilemma over “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 codebase versus using your own code arises often. This is especially important for front-end frameworks, because they’re directly responsible for the look and feel of a website.

Front-end frameworks like Bootstrap and Foundation have changed the way people build 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 remains: 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 make the right decision when you’re faced with this question.

Advantages of Ready-to-use Front-end Frameworks

The reason most people prefer ready-to-use front-end frameworks is that they offer great advantages. Let’s look at 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 front-end 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 Front-end Frameworks

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, you’re 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’re 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 codebase 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 for third-party components, which means less mix-and-match work.
Uniqueness of your website is 100% guaranteed. Default themes in most front-end 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’re 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’re 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 front-end frameworks centers on one 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’d 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’s no problem.

If you take it even more deeply, you’ll 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 writing better and more effective code, and expanding 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’s no confusion, no frustration, and no front-end choice paralysis.

Finally, here’s 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 isn’t “What’s the proper decision?” The right question is “What’s 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 of creating 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 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.

If you’ve heard about Bootstrap but have been putting off learning it because it seems too complicated, then play through our Introduction to Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.