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 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.
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 and links.
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.
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.
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.
The reason this works is that bootstrap comes with predefined CSS classes (in bootstrap.css) that defines how these buttons should look.
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.
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.
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.
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.
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.
JS framework benefits
- 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.
- Eases common development tasks – They provide shorter and more efficient ways of implementing common JS tasks such as
- 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.
- 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 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.
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.
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.
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.
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.
If you liked this post, or have any questions, please let me know in the comments below.