The introduction of frameworks into the web development space completely changed how websites are built.
It reduced development time, organized the whole process, and made code efficient and scalable.
These days, new web development frameworks are sprouting out faster than anyone could keep up with.
If you are learning how to write code for the web, you will often be confused about which framework to learn because there are many options, all of which look shiny as if they will be the next big framework release.
This article will show us how to decide on a framework for creating your next web app.
What is a web development framework?
A web development framework is a tool that provides ready-made components or solutions that are customized to speed up development.
It supports the development of web apps and makes it possible to achieve a standard process to build and deploy web apps on the internet.
A web development framework is a codebase consisting of tools, resources, and components that come together to support your web development process.
There are different web frameworks, each of which has its specialties, functions, capabilities, advantages, and disadvantages and are specific to one programming language.
But, one thing they all have in common is that they are all tools that assist web developers.
Difference between front-end frameworks and back-end frameworks
To understand the difference between front-end and back-end frameworks, first, you need to understand the role each technology used in front-end and back-end plays in web development.
Then you see how they relate to their frameworks, and the picture will be more precise.
HTML: This is the defacto language for creating the website’s content and structure.
CSS: The makeup man for HTML. It makes the view look beautiful ( depending on how good the coder and designer are).
CSS Frameworks like Bootstrap and tailwind help you create the view part of the website without writing a lot of HTML and CSS. They have inbuilt components which one can use to create responsive design, carousel, headers, modals etc. They increase your productivity as you don’t have to write the code from scratch (primarily by code, I mean HTML and CSS code only).
You can just include custom bootstrap classes and are ready to go.
Bootstrap Navbar is the best example of that. It packs a lot of functionality.
JavaScipt: JavaScript, in general, deals with the functional aspect of the website like making API calls, rendering views, handling authentication etc.
JS Frontend Frameworks are typically used to create Single Page Applications or SPAs.
They can have huge code bases like angular or as small as React ( some call it a library as it only helps you create the view part using JSX).
These frameworks ( and JavaScript in general) deal with the website’s functional aspects, like making API calls, rendering views, handling authentication, etc.
Also, there’s jQuery which is a JS library used for doing all that can be done using JavaScript but in fewer lines of code and a more confusing manner :p
Back-end languages: Used to create the logic that controls a website’s unique features and functionalities.
It controls the M and C, which refers to the Models and controllers, respectively, in the MVC architecture of a website (We will come to this later).
These back-end frameworks include Laravel (a PHP framework), Django (a python framework), and Express.js (A Nodejs framework, Nodejs being a javascript runtime that represents Javascript on the web server).
An Overview of the Software Architecture
The choice of web app architecture type is one of the most important yet challenging in web development.
According to Mark Richards in this book, Software Architecture Patterns, one can structure software in many ways.
Still, most existing web apps use one of the five architectures he talked about: a layered architecture.
The other four include:
- Event-driven architecture
- Microkernel architecture
- Microservices architecture
- Space-based architecture
The layered architecture here determines the pattern at which data should flow through a web app.
This topic is important because web development frameworks(which organize and structure a web app) are built with the concept of architecture.
The layered architecture is usually built around the database, making it common in web development because most web apps have to store data in the database.
Many of the biggest and best web frameworks — Express, Angular, Laravel, Django ETC — were built with this structure, so many web apps built with these technologies naturally come out in a layered architecture.
The code is arranged in layers.
Data enters the web app through the top layer and works its way down each layer until it reaches the bottom, usually a database.
While the data is on its way down, each layer does something with it and passes it down to the next layer, and these actions can come in the form of checking if the data is consistent or reformatting the values to keep them consistent.
The most common type of this layered architecture is the Model-View-Controller (MVC) structure, the standard structure in the web development space and one of the popular web frameworks built.
MVC structure is a layered architecture. Above the database layer, you will find the model layer, which often contains business logic and information about the data types in the database.
While at the top of it all is the view layer, which is often controlled by front-end web technologies like CSS, Javascript, and HTML.
You will get the controller in the middle, which has various rules and methods for transforming the data moving between the view and the model.
That makes it easy for different web developers to work on the layer they specialize in, making it possible to develop efficient and well-optimized web apps.
Web apps using this architecture are:
- Maintainable
- Testable
- Easy to update and enhance layers separately
Other structures under the Layered structure include:
- MVT – Model view template
- MVVM – Model view veiwModel
- MVP – Model view presenter
- MVA – Model view adapter
What makes a good framework?
With the plethora of frameworks available today, most new web developers looking to learn a Javascript framework are confused about which framework to learn.
It all boils down to the type of web developer you are and the type of web apps you want to build.
Factors that influence your decision on which framework to use:
- The type of web developer you are and the programming language or stack you can work with.
- The type of web app you want to build and the features to be implemented
- Business needs
Criteria to look at when choosing a web framework
Documentation: You must choose a framework with well-written documentation suitable enough for a beginner to follow through.
Active Community: In this web development industry, web technologies are only as strong as the user base and how supportive they are, and that also applies to Javascript frameworks.
It’s paramount to choose a framework that is well-established with an active user base.
Functionality: When considering a framework, you must choose one whose functionalities meet the requirements for the type of project you want to build, considering that each framework has its limits.
Consistency: The web development industry evolves pretty fast, and for technologies like frameworks to thrive and remain relevant, they need constant updates.
So, you need to choose a framework that the group managing it always pushes out updates to its codebase.
Conclusion
Ultimately, it boils down to your individual preferences and the factors you want to guide your decision.
Each framework has special types of projects that perform best when used, so you need to figure out what type of project you want to build and what it will take.
Support Website Hurdles
Website Hurdles is readers supported.
If you find this content helpful, you can support me by buying me a cup of coffee.
Till we meet again on another article,
Happy Coding!
0 Comments