What is a Web Framework, and Which one you should use?

Framework is a word used a lot in the context of the development cycle.
So, what even is a framework?
When we talk about frameworks, those frameworks normally fall into three different categories
1.Frontend Frameworks
2.Backend Frameworks
3.User interface frameworks
But even once you know what frameworks are, which one should you learn or use, and why you should use it? So in this blog, we will discuss what is a framework, what frameworks are out there? and how to make decisions about what kind of framework you should use for your projects!

What are Frameworks

A framework is a standardized set of concepts, practices, and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.
In the world of web design & development, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents, etc.) which can be used to support the development of websites, as a basis to start building a site.

If we look at a couple of different web applications we can see that there are a lot of similar features. Many have user authentication, Custom Notifications, Task Scheduling, pages that render on loading, they connect to databases, they have profiles you can look at, they all have stylized feeds of information, etc.
If we want, we can write all of that logic every time we want to build a new application, however, there are also a lot of tools available that can do that for us making our work easier and hence saving a lot of time.

Also, a lot of the time when we build applications we want to format our code in certain ways that help us become more efficient and help other developers understand our code. Web frameworks help us achieve a structure in our applications, and they give us additional features we can add to them without too much extra work.

Frameworks give us a place to start so that we can focus on features rather than configuration details.

Code is read many more times than it is written, and it is so important when you are working with other developers that they know where the code for certain tasks is being written so they can use it in their code.

For eg. If you use a framework like Laravel, you know all the authentication files are at Auth folder, So any new developer with a basic knowledge of the Laravel framework can easily do any required changes.

The frameworks also have conventions for how the code is written and structured, which standardizes how the developers write their code.

Frontend Frameworks

The frontend of a web application is the part you see and interact with. It consists of the web design and the interaction of the site. In terms of programming languages, this is almost always comprised of the CSS, HTML, and JavaScript of the page.

The usual components are:

• CSS source code to create a grid: this allows the developer to position the different elements that make up the site design in a simple and versatile fashion.
• Typography style definitions for HTML elements.
• Solutions for cases of browser incompatibility so the site displays correctly in all browsers.
• Creation of standard CSS classes that can be used to style advanced components of the user interface.

Frontend frameworks:

• Angular 7+

  • Built by Google
  • Well supported
  • Proper Documentation Available
  • Encourages reusability
  • Improves application scalability

• React

  • Built by Facebook
  • Bundles frontend code into components
  • Proper Documentation Available
  • Organizes code and data to make code more reusable
  • Large learning curve

• Vue

  • Easy to learn
  • Very fast
  • Takes parts from Angular and React and optimizes them
  • All tools associated with it are packaged well
  • less widely adopted than some others

Choosing a Frontend Framework

The world of frontend frameworks is evolving especially fast, it seems like a new frontend framework is on the rise every few months. Learn what makes sense to you, and don't worry too much about what the "hottest" one at the moment is.

Backend Frameworks

Backend frameworks are a lot more varied. They are written in a variety of programming languages and have a wide variety of features.
Below, like the above list, is a very incomplete list of some of the frameworks out there for writing application backends.

• Laravel

  • Language- Php
  • Supports Composer for package management
  • Offers tons of packages
  • Great community
  • Lots of learning resources available for free
  • Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)

• Django

  • Language- Python
  • Happy medium between being very opinionated and less structured
  • Can be difficult to integrate a fancy front-end.
  • Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)

• Flask

  • Language- Python
  • Less opinionated and more customizable than Django
  • Gives you less out of the box (you have to build more)
  • All tools associated with it are packaged well
  • less widely adopted than some others

• Ruby on Rails

  • Language- Ruby
  • Very opinionated
  • Has great tools like scaffolding so you can build things fast
  • Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
  • The asset pipeline helps with front-end development
  • Ruby takes longer to run programs than some other programming languages

• Meteor

  • Language- JavaScript
  • Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
  • Integrates very well with modern front-ends

• GatsbyJS

  • Language- JavaScript
  • Powered by GraphQL
  • Very High Data sources compatibility(directly pull data from Contentful, Drupal, WordPress, etc.)

• Express

  • Language- JavaScript
  • Very customizable
  • Very lightweight
  • Less built-in features
  • Node is very fast

Choosing a Backend Framework

Usually, you choose a backend framework based on the programming language it is written in. Also, take into account what features you want to add, if you want authentication (or user login) for your website, for example, writing it in Django where Authentication is built-in will be a lot easier than writing it in Flask where you would need an additional service.

User Interface Frameworks

User interface frameworks help create stylized and professional looking web applications. Most include some sort of grid system so that you align elements, they have color schemes so that is handled for you, and they stylize your HTML components using CSS so that they look clean and professional. These are within the frontend domain; however, normally when we refer to frontend frameworks we are talking about JavaScript frameworks.

User interface frameworks include:

• Bootstrap

  • Built by Twitter
  • Easy to learn and looks professional
  • Can be easy to spot "Bootstrap Sites"
  • Can be difficult to customize components

• Materialize

  • Created and designed by Google
  • Clean looking
  • A bit more "fun" than Bootstrap
  • Follows Google's Material style guide
  • Lots of styling and color options

• Foundation

  • Advanced responsive layout
  • Lots of examples
  • Professional looking
  • Used by-Adobe, EA,HP,Samsung,eBay,Disney.

Choosing a User Interface Framework

Choosing a User Interface framework mostly comes down to personal preference in appearance and the goals of the site. The different styles may appeal to different industries or may convey a different message to users.

• Data Source- Medium,Google Searches,Ali Spittel

Also, I would love to hear any feedback and review from you. Please tell me what you liked in the comment section below. Happy Learning!✨