Quick Contact Icon
Back To Top Icon
Show Filters
Sign up for regular updates:
RSS Feed

Add our RSS feed to stay up to date with the latest Splitpixel news and content.

Add Our RSS Feed
Blog Search
Click To Search

Front-end development: bespoke code vs ready-to-use frameworks

Using a framework like Bootstrap, or starting from scratch - which is better? Well, it depends - our lead developer Jon takes a look.

front-end-development-approach-bespoke-code-vs-ready-to-use-frameworks
Blue Pixel Top Left
Jon
Posted by Jon
25 November 2015
   

As a developer, it's important to keep up-to-date on the latest development trends, whether it be learning a new programming language or utilising new frameworks that speed up the process of development and offer you new features that will help bring the end user an enjoyable experience.

Over the last 12 months, there has been an increase in front-end frameworks - Bootstrap and Foundation being the most popular two. These frameworks were designed and built to help developers save time when creating websites.

They have changed the way some developers build websites and have even given non-developers the opportunity to create simple websites by offering a pre-built template and code base from which to work.

Being a developer who has always custom-coded pretty much from scratch using a bespoke-built base for all projects I have undertaken over the past 10 years, I was intrigued to see what advantages and limitations were brought about by using a front-end framework. This was something I got to experience first-hand when our latest Developer, Jason, joined the Splitpixel team at the beginning of the year.

Jason joined us from another agency that worked solely using WordPress for website development. When he first joined the team, we had a development meeting to discuss our workflow patterns to allow us to continue to work in sync as a team. From this meeting, it became apparent that he built all his projects using the Foundation framework, as a base starting point as this was the workflow his previous agency adopted.

Over the last 10 months of developing projects side-by-side with our different approaches, it has enabled us to give a good comparison of the advantages and disadvantages of both custom code and frameworks for development projects.

 

Advantages of using a front-end framework

  • Using a framework reduces the timescale and workload of a project.
  • Your project starts from a solid, well-tested base of HTML, CSS and JavaScript.
  • Regular updates and bug fixes are released from feedback from users.
  • Frameworks that have a large user base means that there is a large community to rely on for help and advice on any developing issues during the project life span.
 

Disadvantages of using a front-end framework

  • Initial learning curve - when using a framework, there will be some time required to get up-to-speed on learning what it offers and how to best utilise its features.
  • Bloated code - as frameworks try to provide solutions to all possible problems you may encounter developing a project, this can lead to a lot of code being included which can cause slow loading issues.
  • Without making enough customisations to the base starting point of a framework, a website can easily look the same as many others which can be damaging for your brand.
  • Slightly restrictive in terms of design, as the design needs to fit the framework without changing too much (otherwise it would be counterproductive).
  • At the end of the day the framework is owned and developed by another group of developers. If they decide to make revisions, changes or remove certain aspects of the code they provide, you have no control over this.

Website Brief Text CTA

 

Advantages of using bespoke code

  • Following the initial build of your custom base, you will save yourself time and effort on future projects as it will include features to fit your future needs.
  • If all team members were involved in the planning and development stages then there will be no learning curve. However, new team members joining the company will need time to learn.
  • Slimline and less bloated code – as it’s built by you, you can include only the features and code you require, therefore cutting down on any unnecessary features and code.
  • You have full control of the code, which means there is no worry of features being removed in future releases and changes.
  • You have full control of the default layout and are therefore not restricted in any way when it comes to implementing a design.
 

Disadvantages of using bespoke code

  • The initial stages of planning and developing takes more time and effort but this should only happen once if managed correctly.
  • Testing of your bespoke build will be required to make sure it works in all browsers that you aim to support.
  • Any issues, bugs and future updates will managed and built by your team rather than relying on other developers.
 

So… which solution offers the better results?

Having worked first-hand with both solutions in our development team this year, we now have a great understanding of what suits us best and I think this is the main thing to take away from this comparison. The solution you choose needs to suit your goals and project aims.

If the project has a small budget, short timescale and needs a quick turnaround, then a front-end framework will be your best solution. It will enable you to minimise time and effort and speed up the build process, providing you have previous experience of the framework you intend to use.

The main limitations of this approach will be the design, which will need to easily fit into the framework default template, restricting design creativity and could result in the website looking similar to others, while the unnecessarily included code and features could impact the sites loading times.

However, if the project has a more flexible budget and timescale, then the best solution would be to build from a bespoke build. This would enable you to have full control over the design, allowing more creativity and diverse websites, whilst also keeping the code slimline, allowing a better performance in loading times. The main limitations of this approach will be that the initial build of your custom project will require more planning and development time in the early stages and more testing time at the end.

Within our development team, having worked with both solutions where required, we have now adopted an approach that lies slightly in the middle of both solutions. Using a leaner framework, such as HTML5 Boilerplate or Underscores, and downloading a custom build, which only includes the features and options you select, and then taking this step further by making custom tweaks to match our project goals as a company, we now have a solid base framework that we use for all projects.

Granted, at first it took some initial outlay in planning and development time to get it to exactly where we wanted, but moving forward over the year, project after project, it has saved us time and enabled us to build some lovely websites in the process.

This approach allows us to have a solid, robust, well-tested and slimline base for all projects without restricting any design creativity. The result of this is a well-structured workflow for us developers, while delivering a uniquely designed, individual-looking website for our clients, which performs well on all devices and browsers. 

Perfect Website Brief

   

Say Hello

If you want to know more about what we do, or would like to discuss a project, please email us or fill in the form below to drop us a message.