What are the Frameworks?

An introduction to frameworks and their relationship to the front-end and back-end of a website.

We’ll cover the following

  • Introduction
  • MVC architecture
  • Types of frameworks
    • Front-end (client-side) frameworks
    • Back-end (server-side) frameworks
    • Isomorphic (client-server) frameworks

In the previous posts , we discussed both front-end and back-end, as well as the difference between the two. Now, we will look at how development on both ends and their integration can be made easier through web frameworks.

Introduction

A web 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. Essentially, frameworks provide some basic, standard starter code that allows developers to build the meat of their website on.

Most websites proportion a totally similar structure, and the intention of frameworks is to provide this not unusual structure as a starting point so that developers don’t need to redo it from scratch and may reuse the provided code. Frameworks, therefore, serve to simplify the web improvement procedure.

MVC architecture

Before we introduce some of the commonplace sorts, frameworks, may be labeled in, let’s discuss the underlying structure of frameworks. Most, if no longer all, web utility frameworks rely upon the Model View Controller architecture. The pattern serves to separate the utility common sense from the person interface, thus forming the 3 additives that the call is made out of.

Model

The Model stores all information about the content and structure of an application. Upon receiving user input data from the Controller, it communicates any required interface updates to the View component.

View

This refers to the application’s front-end, or what is more commonly known as the user interface. It contains information about the layout and the way users can interact with any of its parts. The View receives user input, communicates it to the Controller for processing, and updates itself according to the instructions it, in turn, receives from the Model.

Controller

The Controller is an intermediary between the Model and the View. It receives user input from the View, processes it, and mediates required changes between the two.

Types of frameworks

There are both front-end and back-end frameworks that are very popularly used, and you may already have heard of them. Additionally, there are multiple isomorphic frameworks available that work on both the front-end and the back-end and serve as a bridge between the two.

Front-end (client-side) frameworks

Angular JS

Angular is a framework by Google (originally developed by Misko Hevery and Adam Abrons) which helps us in building powerful Web Apps. It is a framework to build large scale and high-performance web applications while keeping them as easy-to-maintain. There are a huge number of web apps that are built with Angular.

HTML

<html>
 <head>
 </head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <body>
   <div id="content"/>
   <div ng-app="">
 
<p>Enter your name:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>
 </body>
</html>

Output Image –>

Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

React.js

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.


Vue.js

VueJS is primarily used to build web interfaces and one-page applications. In saying that, it can also be applied to both desktop and mobile app development thanks to the HTML extensions and JS base working in tandem with an Electron framework – making it a heavily favoured frontend tool.

Semantic-UI

Semantic UI is a front-end development framework similar to bootstrap designed for theming. It contains pre-built semantic components that helps create beautiful and responsive layouts using human-friendly HTML.

While Semantic-UI is a relatively new framework, it stands out in a number of ways. The primary distinction this particular framework enjoys is its simplicity. Semantic-UI uses natural language, and the code is, therefore, largely self-explanatory, thus making it highly desirable for beginners, particularly those with little or no coding experience.

In addition to this, Semantic-UI is also integrated with a myriad of third-party libraries. This means that the development process becomes much easier because, for simpler applications, all the libraries you might require might already be integrated with the framework. Semantic-UI, therefore, is a great starting point for developing the front-end of beginner level websites. However, its package sizes are considerably larger than those of Foundation and Bootstrap, and it may not be a viable option when developing websites with more complex structures.

Now that we know the many front-end frameworks that are available to streamline the front-end development process of your web application and their benefits​, let’s move on to look into the frameworks that exist for the back-end.

Back-end (server-side) frameworks

Express (JavaScript)

Express or Expressjs is a minimal and flexible framework that provides a robust set of features for web and mobile applications. It is relatively minimal meaning many features are available as plugins. Express facilitates the rapid development of Node.js based Web applications. Express is also one major component of the MEAN software bundle.

Symfony (PHP)

The Symfony PHP framework is a well-organized, feature-rich PHP framework whose architecture paves the way for the developers to build sustainable web applications in the easiest way possible.

Django (Python)

Django is another framework that helps in building quality web applications. It was invented to meet fast-moving newsroom deadlines while satisfying the tough requirements of experienced Web developers. Django developers say the applications are it’s ridiculously fast, secure, scalable, and versatile.

Ruby on Rails (Ruby)

Ruby on Rails is an extremely productive web application framework written by David Heinemeier Hansson. One can develop an application at least ten times faster with Rails than a typical Java framework. Moreover, Rails includes everything needed to create a database-driven web application, using the Model-View-Controller pattern.

ASP .NET (C#)

ASP.NET is a framework developed by Microsoft, which helps us to build robust web applications for PC, as well as mobile devices. It is a high performance and lightweight framework for building Web Applications using .NET. All in all, a framework with Power, Productivity, and Speed.

Isomorphic (client-server) frameworks

  • Meteor JS
  • Lazo.js
  • Rendr

Now that we know which web development frameworks are the most widely used, in the following lessons, we will be discussing the specific features of each of them so you can make an informed decision about which framework you might want to begin learning for your web application.

Also Read – Basics of NodeJS


That’s it!
You have successfully completed the post.

Peace Out!

2 Comments

Leave a Reply

Your email address will not be published.