skip to Main Content
Illustration Of People Coding A Website

What is a web framework and when to use it?

Updated on June 25th, 2018

Web frameworks or Web application frameworks are software frameworks that intend to make it easier to code and maintain websites/web applications. This is achieved through providing code libraries, structure, and tools that are meant to simplify common development task such as interacting with databases, user authorization and creating responsive layout.

The core idea behind a framework is basically to save time and avoid frustration by not “reinventing the wheel” every single time you’re making a new website.

The frameworks can be divided into two main categories, Frontend frameworks, and Backend frameworks.

First, let’s understand the difference between frontend and backend.

The frontend of a website, also called client side, refers to everything a user can see and interact with. The frontend is built up by a combination of the three main languages HTML, CSS and JavaScript. So, everything you see on a website, from colors and fonts to buttons and drop-down menus is a result of HTML, CSS, and JavaScript being processed by your browser.

The backend of a website, also known as server side, is what makes the frontend work. The backend generally consists of a server, an application, and a database, where the server hosts the application which then communicates with a database. This is done to allow data to be passed from the database to the front-end where it is processed and presented to the user. The application is typically built with languages such as PHP, Python, Ruby, Node or Java.

Frontend frameworks

As stated above, frontend development is about adapting HTML, CSS, and JavaScript in order to create a compelling user interface. The different languages serve different purposes of a website and hence there are also different frameworks for them. We typically separate them into JavaScript frameworks and CSS frameworks.

Frontend languages

Before we dive into the different frameworks, lets briefly explain the three different languages:

HTML (Hypertext Markup Language) is a markup language that provides the website with structure. With HTML you can define the basic building blocks of a website, such as title, paragraphs, lists, text body, links and even buttons.

Here’s one example

<strong>A HTML button</strong>
<button>Click Me!</button>

Which would turn out something like this, depending on your default styling.

A HTML button

As you notice, nothing happens when you click the button. But before make things happen, let’s adjust how the button appears by adding some CSS.

CSS (Cascading Style Sheets) is a design language that handles the look and feel of a website. With CSS you can control font styles, text and background colors, page layout and much more.

button{
 border-radius: 10%;
 background: black;
 color: white;
}
button:hover{
 background:orange;
 color:black;
}

By adding a few lines of CSS, I’m able to change the background color to black, making the button rounder, and make it orange on hover.

A HTML button

But still nothing happens when we click the button, that’s where we need JavaScript.

JavaScript is a programming language that allows you to create dynamic and interactive websites. JavaScript makes it possible to dynamically change the content of a website, like making a dialog box appear when a user clicks a button. Other examples of dynamic content could be animations, interactive maps, calculations and much more.

function update_text_function() {
var buttonElement = document.getElementById("button-demo");
var headerElement = document.getElementById("header-demo");
 buttonElement.textContent = 'You clicked me!'
 headerElement.textContent = 'JavaScript is fun!'
}

The JavaScript function above looks for the elements with id=button-demo and id=header-demo, and alters the text for those elements accordingly.

In order for this to work in our example, we will also have to update our HTML with those IDs.

<strong id="header-demo">A HTML button</strong>
<button id="button-demo" onclick="update_text_function()">Click Me!</button>

Try clicking the button now

A HTML button

Pretty cool, right?

CSS Frameworks

CSS is all about altering how your website looks. A CSS framework is there to help you do it in a standardized way through reuse of thoroughly-tested CSS code that solves common problems like responsiveness and visual consistency across all browsers.

Although some of the more functional CSS frameworks do provide some JavaScript-based functions, the CSS frameworks are more design-oriented than the JavaScript frameworks we’ll discuss later.

There are also quite a few different CSS frameworks, ranging from lightweight frameworks such as Pure, to more extensive frameworks such as Bootstrap. The difference often comes down to the amount of predefined code, so the features provided can vary a bit, but some of the main features typically provided are:

  • Responsive grid systems – Makes it easy to arrange and line up content without tweaking the pixel widths by yourself. It also ensures that your website scales according to screen size (responsiveness), resulting in a website that looks good both on a computer, iPad, and a mobile phone.
  • Cross-browser compatibility – Handles known browser bugs and ensures that your website design looks the same in all browsers (Chrome, Firefox, Internet Explorer etc.)
  • Reusable components – Libraries of reusable components allowing you to quickly create buttons, dropdowns, navigation bars etc.

Any drawbacks with CSS frameworks?

Yes, there is.

In order to provide your website with all the benefits above, a CSS framework often contains quite a bit of predefined code. To mention one example, the Bootstrap CSS file contains close to 7000 lines.

This results in a few things:

  • Excessive code – You’ll probably not make use of all the code defined in the framework, but it’s still there taking up space. If you’re making a website that needs to be extremely light and fast, where every byte of data counts, you might want to consider creating the CSS from scratch without a framework.
  • Unfamiliar code – Since the code provided as part of a framework is not written by you, you might not be very familiar with how it actually works. As a result, debugging might become more difficult than if you had written every single line of code yourself and therefore knew where to look.
  • Design constraints – All this predefined code enforces a certain structure. It assumes that you want a certain grid layout, button type or style. If those assumptions are not correct for your site, you might end up spending more time overriding the framework than you would have used creating it from scratch.

Still a bit unclear on what this CSS Framework thing is?

Let me try to show you an actual example to give you an idea of what a framework can help you with. I’ll use Bootstrap, one of the most popular CSS frameworks as an example.

Below you can see some of the different button options available with bootstrap, these examples can be found on the bootstrap button component site. These lines of code can be copied directly into your html-file and will give you the corresponding button.

Overview Of Different Bootstrap Button Classes

The reason this works is that bootstrap comes with predefined CSS classes (in bootstrap.css) that defines how these buttons should look.

Bootstrap Buttons CSS Code Examples

For someone not familiar with CSS at all, having access to this predefined CSS can be a great way to get started. Those who already are familiar with CSS might be thinking “I don’t need a CSS framework to help me create good-looking buttons”, and you’re right, but it still saves you the time it would take to set it up yourself.

Let’s take another example, responsive grids. Below is an illustration of how the same responsive page appears when it’s displayed on screens with different sizes.

Illustration Of Responsive Web Design

See how the columns get rearranged depending on the screen size? This is due to the responsive grids that most CSS frameworks provides.

Considering how many people are browsing the internet on different sized phones, tablets, and computers, having a responsive site ensures that your site is readable for everyone regardless of which device they’re using. This is still very doable without a framework but might require some trial and error if you haven’t done it before.

Below is an example of how responsive grids are set up in Bootstrap. Everything with the “col-sm-6” class will take up 50% of the space on when screen size is larger than 576px. Everything with the “col-md-3” class will take up 25% of the space on when screen size is larger than 768px.  This is all predefined CSS in bootstrap, so when I use those classes in my HTML code I get the responsive behavior I’m looking for.

Bootstrap Grid Coding Example

When should you consider using a CSS framework?

If you think a CSS framework sounds interesting, my first recommendation is: Test It Yourself!

To give a bit more guidance, here’s my recommendation on when to consider using a CSS framework:

  • You’re new to frontend development and need a tool that can help you avoid common pitfalls such as browser differences.
  • You need to launch something fast
  • You’re building a prototype and plan on discarding the code later on
  • You’re not in need of a unique website design. A lot of websites will be using the same styles and layout and as a result, might look very similar.
  • You’re not building a website that needs to be light and fast. A CSS framework will contain CSS code you’ll end up not using, which will only contribute to larger files and slower page loading.

If you’re now leaning away from a CSS framework, keep in mind that you can still grab code snippets from a framework and add it to your site. Then you keep the amount of CSS at a minimum, while still leveraging the work that has been put into creating the framework.

If you’re still having a hard time understanding the benefit of a CSS framework and when to use it, give me a heads-up in the comments below or send me a message.

JavaScript Frameworks

Although JavaScript can be used both backend (with node.js) and frontend, it mainly serves the purpose of creating interactive and dynamic frontend content. This section will only cover frontend JS frameworks.

So, why would our website need JavaScript? What do we really mean when we use the words interactive and dynamic?

Dynamic refers to the ability to update the display of a website on the fly, without requiring a page refresh. As we saw earlier in this text, JS allowed us change the website text dynamically when the user interacted with the website by clicking a button.

Another example is how JavaScript allows you to create dynamic HTML lists and display it on your website. Let’s imagine we have a website that should list tasks we want to do, a to-do list.

W3schools To Do List Example

In order for the website to keep track of these to-do’s, it will have to store them in a database. So, when a user writes a to-do and clicks the “Add” button the JavaScript will send a POST request to a backend procedure (written in PHP or any other backend languages) and this procedure will then store the value in the database. The JavaScript will also send a GET request to another backend procedure to fetch all the to-dos from the database in order to display the updated list to the user.

Ok, fair enough, so why would you need a framework to do this? Well, you don’t need a framework, in fact, a lot of people prefer writing JS from scratch without a framework, also referred to as Vanilla JS (I’ll get back to that later). It all comes down to what kind of website you’re making and how much experience you have from before.

Now let’s have a look at what JS frameworks can offer.

If you do a quick google search you’ll notice that there are quite a few JS frameworks to choose from. Although they’re all different, they all have a common goal, to make it easier to create websites with a lot of JavaScript. Some key points are

  • Structure – Frameworks often provide structure to the code base by separating the parts of a website/web application into logical pieces. This becomes especially helpful on larger projects with lots of code. One such popular code architecture is the MVC pattern, which divides your code into Model, View, and Controller.
  • Cross Browser compatibility – Different browsers (Chrome, IE, etc.) behaves differently, and unfortunately, they sometimes also interpret JavaScript differently. A framework will most of the time handle these differences for you, and ensure that your website appears correct regardless of browser.
  • Eases common development tasks – They provide shorter and more efficient ways of implementing common JS tasks such as
    • Client-side routing – Routing is how you navigate through a website. By clicking on a link, the website will rout you to a different page or display different data. Client-side routing is then about routing a user to different content that is created by the JavaScript already loaded to the page. For more information on routing, check out this site.
    • Data binding – Data binding allows changes in the model data to be synchronized with the view and/or vice versa. The video below is a result of two-way data binding.

What are the downsides of using a JS framework?

  • Possible poor fit – A framework is always created for a specific purpose. Let’s take React, a framework developed by Facebook, for Facebook. Needless to say, React was a good fit for Facebook, but the same might not be true for your website. If the framework dictates a certain architecture that doesn’t fit the size and scope of your project, the framework might turn into a problem rather than a benefit.
  • Size – Frameworks contain quite a bit of predefined code in order to aid you in the development process. If your project just utilizes a small fraction of that predefined code, the extra code just takes up space and ultimately results in more data being loaded into the browser when someone visits your site. For the average website the end user might not notice a huge difference in loading time, but if your intention is to create a lightweight and very fast web application, this is important to keep in mind.

When should you choose a JS framework?

That’s a tricky question, and there’s no correct answer, but ask yourself these questions:

  • What’s the scope of my project? If you expecting large amounts of code or are expecting the project to scale up over time, the code structure provided by a framework might prove extremely valuable. Whereas if we’re talking about a few files and a few hundred lines of code, there might not be a benefit there at all.
  • Is my project complex enough? If you’re expecting mostly static sites, with a very limited amount of JavaScript doing dynamic changes, a JS framework will not add much value. In fact, it might actually do the opposite, add unnecessary complexity.
  • How important is page size? If you’re building a lightweight application where every byte matters, you might want to consider creating it without a framework.
  • Do I already know vanilla JavaScript? If you’re already proficient with ‘normal’ JavaScript, getting access to the ‘framework-way’ of solving a problem might not yield any significant benefits. Writing VanillaJS would also allow you to only add the functionality you really need, instead of getting thousands of lines of framework code that you don’t really need.
  • Do I already know a JS framework? If you’re already familiar with a framework, and you don’t have the time it takes to learn another one, it might be better to stick with what you know than to implement something poorly using the ‘best’ framework.

If your project does not fit into the category where it makes sense to use a JS framework, but you’re still curious about what they can do, then I suggest that you test it anyway!  Use that curiosity to make up your own mind of what the pros and cons of a framework are.

Backend Frameworks

The backend is what makes the frontend works. It typically refers to the server and databases of a site. Most major websites today do use some kind of backend technology in order to store data in the database or fetch data from a database in order to display it on a website.

Backend developers can choose from a wide variety of scripting languages, and they all differ in performance, programming style, lines of code required and use cases. With different languages comes different frameworks, so before you’ll be able to choose a backend framework, you’ll have to decide on a language.

Backend languages

Here’s a brief description of a few popular backend languages

  • PHP – Probably the most popular backend language on the web. It’s not the “best” or “fastest” language out there, but it’s stable, well documented, fairly easy to learn and it gets the job done.
  • Python – With its emphasis on simplicity and readability, Python is considered to be among the easiest languages to learn.
  • Ruby – Is a very flexible language, often with several ways of accomplishing the same thing. Some consider this a strength, whereas beginners have a tendency to find it confusing. Because of this, Ruby is considered to be a bit difficult to learn, especially for beginners.

Benefits of using a backend framework

  • Security – When working on the backend, security should be a top priority. Especially if your site will require users to log in and/or purchase things online, keeping passwords and credit card details secure will be the most important thing you do. The good news is that most backend frameworks will enable robust defense mechanisms for the more common attacks by default, as well as dictating a secure code structure. If you’re interested in a more in-information, check out the article written by Moz on website security.
Password Encryption In Laravel
  • Eases common development tasks – They provide shorter and more efficient ways of implementing common backend tasks such as:
    • User authentication – This typically covers functionality like a login view, registration view, and password reset capabilities. Setting up this from scratch in a secure manner can be a daunting task, which is why most frameworks provide tools and structure to ease the process. Some frameworks even deliver complete predefined user authentication templates.
    • Backend routing – Routing is how you navigate through a website. By clicking on a link, the website will rout you to a different page or display different data. Backend routing simply refers to how requests are routed from one backend file to another.
    • Interacting with databases – One of the main tasks of a backend script is to transfer data back and forth between the database and the frontend. If this isn’t done in a proper way, you potentially risk exposing your database to the outside world. Having hackers tampering or stealing data from your database is something you’d want to avoid at all cost. Luckily, most frameworks will provide you with a secure code structure and guide you in the right direction.

Drawbacks of using a backend framework

The potential drawbacks of a backend framework are very similar to the other frameworks we’ve discussed in this article, but I’ll list them nonetheless.

  • Slower execution – Due to the extra code and extensive code structure within a framework, the script execution time can potentially suffer quite a bit. That being said, most websites will probably not notice any difference, but if you’re building a lightweight application that needs to run especially fast, a framework might not be the right choice.
  • Complexity – Some frameworks can potentially be large and complex, and could potentially take quite a bit of time to master. So, if your project will have a very limited amount of backend scripts, it might not be worth investing time in adopting a framework.

Wrapping up

As we’ve seen above, a modern Web Application Framework can save you a lot of time and effort, if it’s used correctly. But keep in mind that every project is different, so the frameworks that were perfect for one project might not be perfect for another. It will always be about finding the right tool for the job.

Also, keep in mind that there are a wide variety of frameworks available within each category. So, you’re free to choose from simple frameworks that only contain the bare minimum or large complex frameworks who strive to provide you with “everything” you need. The right choice will typically depend on both project size, complexity, and previous experience.

Still having a hard time deciding on whether or not to use frameworks? Read about why the team behind MeetSpace decided to not use frontend frameworks.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top
×Close search
Search