Battle of Frameworks
-by Mansi
This article is a part of the Debugged Magazine released by Coding Club of Indian Institute of Technology, Guwahati. To read the entire magazine click here
In these days of a global pandemic, the only thing that has kept the world moving and connected is web applications and websites. As people were not able to meet, the usage of websites like Facebook, Netflix, and Youtube increased by 27%, 16% and 15.3% respectively. But, when we talk about what makes these websites/ web applications interactive and engaging, we come across different tech stacks used for making them, like HTML, CSS, Javascript, etc.
As a matter of fact, a simple functional web application can be made using these basic tech stacks. But, if you want to make a web app that showcases beautiful animations and transitions, connects with different other websites, ensures a smooth flow of information via APIs, manages digital information on the web, and presents the analytics effectively, it becomes a very difficult task to build up these functionalities, right from scratch, by just using HTML, CSS and Javascript. Here is where web frameworks come to our rescue. A web development framework is a set of resources and tools for software developers to build and manage web applications, web services and websites. Such a framework includes templating capabilities for presenting information, provides the programming environment for scripting the flow of information and APIs for accessing underlying data resources. The framework also provides the foundations and system-level services for software developers to build a CMS(Content Management System) for managing digital information on the Web. Developers can use the framework to define the ‘out-of-the-box’ content management capabilities, user authentication features, and administrative tools.
On the base level, web frameworks are divided into two basic categories, namely: Frontend Web Development Frameworks(FWDF) and Backend Web Development Frameworks(BWDF). So, what is the difference between them? Front end development is programming which focuses on the visual elements of a website or app that a user will interact with (the client side). Back end development focuses on the side of a website users can’t see (the server side) and manages all the digital info displayed on the website and connects it to servers. They work together to create a dynamic website. So, a FWDF provides tools for creating and managing the front end part of the website and similarly a BWDF provides tools for the backend part. Here is a cartoon to give you a better intuition ;)
So, now when we know the difference between these, you might say- “Huh! So, it’s easy to create a web app- just go and choose a front end and a backend framework and go on with your creativity!”. But wait! Which one would you choose? There are 100s of frameworks to choose from.
A. Frontend Frameworks
Let’s discuss the top 3 front end and back end web development frameworks in detail and highlight the major important differences between them. So, tighten up your seat belts as we first dive into the world of front end web development frameworks and meet the 3 most famous, and widely used frameworks:
1. React.Js
As the name suggests, it is an open source Javascript library, mostly used for developing single page web apps. This means that when you traverse through different tabs, and sections in the website, you are essentially on the very same page! The constantly changing components on the page makes it feel like you have seen many pages. Due to this reason, it saves a lot of time as components can be reused without much alterations. Along with this the virtual DOM helps developers render changes in the application without affecting the other parts of the interface. It has a moderate learning curve, but it needs to be integrated with many other tools to make the most out of it. It is based on unidirectional data binding and therefore supports future development as the data flow is directed towards one direction. Overall, this is a production level framework and is the most used framework for front end web development. Some of the famous web apps built using React.Js are Facebook, Instagram, Netflix, etc.
2. Angular.Js
Yeah, you guessed it right! It is too a Javascript based framework. It too is used for creating single page web applications but uses a MVC(Model View Controller) model.
But, wait… what is a MVC?
It is an architectural pattern used to break down an app into 3 fundamental parts namely, data (Model), an interface to view and modify data (View), and finally, operations that can be performed on the data (Controller).
It is mostly used to create enterprise-based web applications due to its two way data binding. This means that data changes in the model will reflect in the view and any changes in the view will reflect in the model immediately. It can be directly used to create the complete front end without any external integrations. It has a steep learning rate, as prior knowledge of typescript is necessary. Due to this reason, it has a comparatively lesser usage than Vue.Js and React.Js. Some famous web apps built using Angular.Js are Upwork, PayPal, IBM, etc.
3. Vue.Js
It is a progressive javascript based framework, used for creating single page web applications, and uses a virtual DOM model. It is used for projects that require greater flexibility, as it supports bi-directional data binding, and therefore allows building dynamic applications with more ease. It requires integration with third party tools to build a complete front end. Due to its easy learning rate and fast coding speed, it is the 2nd most widely used framework for front end web development. Some of the famous web apps built using Vue.Js are Alibaba, Grammerly, IPL Dashboard, etc.
B. Backend Frameworks:
So, now that we know about the pros and cons of the 3 widely used front end frameworks, let’s go behind the stage to meet the power engines of web applications- the backend frameworks, and discuss the top 3 backend frameworks in detail.
1. Django
It is the most popular and widely used, open source, server side framework, written in python. It is easy to learn because of good readability of code and presence of a lot of online resources. It is based on MVT(Model View Template) architecture. It is similar to the MVC model, the main difference being that, in the MVC model, one needs to write the controller side code manually, whereas, in the MVT model, the controller part is taken care of by the Django framework itself! One of its key features includes ‘The Admin Panel’- It reads metadata from your models to provide a quick, model-centric interface where trusted users can manage content on the site, or in simpler words, a one to go place that helps you with create, read, update and delete operations regarding your web app. In accordance with its motto- ‘Don’t Repeat Yourself’, it facilitates optimal pluggability, reduced coding, greater reusability, and faster development. Along with being easily scalable, it also protects the database against XSS, CSRF attacks and SQL injections and automatically generates python API based on models. It manages the back end of the most famous web apps like Instagram, Youtube, Spotify, etc.
Fun fact: Django was named after the famous Jazz guitarist- Django Reinhardt
2. Express.Js
This time you might be partially right if you feel that this is too based on javascript. Actually, Express.Js is built on the already developed, and widely used backend framework-Node.Js, which is completely written in javascript. Being a higher abstraction of Node.Js, it is obviously better and more efficient than Node. Some of its most notable features include an extremely powerful routing API that allows developers to build REST API along with routes for a simple web app and then take it to the next level by using route parameters and query strings. It uses Node’s NPM to install countless plugins made by third parties which offer almost anything a developer would want to do with Express. Due to the availability of tons of online tutorials and resources, along with an extremely supportive open source community, it has a very flat learning curve especially for those who already have an experience in Node.Js. It holds the back end of one of the most heavily used web apps like LinkedIn, Netflix, PayPal , etc.
3. Flask
It is a micro web framework written in python, and does not require any particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions, opposite to Express.Js. Flask gives developers a lot of flexibility in developing web apps, especially in templating. They can use Jinja2, Flask’s default templating language or choose from a number of different templating languages they wish to use. Along with that, one can choose to not have an ORM, but instead one which is suited to the task. The availability of a large number of good online resources to master this skill along with the ease it provides by letting the developers code in python, makes its learning curve very low and hence is attracting a lot of new web developers. Some of the web apps built on flask are Pinterest, Reddit, Patreon, etc
4. Ruby on Rails
Again as the name suggests, it is written in Ruby and Rails is a MVC which provides the default structures for a database and web services. It offers many ready-made modules and plugins, making it time efficient as the time required to make boiler plate codes vanishes. One of its most notable features include -‘Active Record’, a library enabling developers to perform database interaction and query design effortlessly. Queries are written in the Ruby programming language and converted into SQL queries that receive outputs and return objects, eliminating the need for developing a query in SQL. The learning curve for this language is steep as it involves many independent concepts to master, especially Ruby. Nevertheless, it is one of the most widely used frameworks for developing the backend for large scale projects. Some of the well known and widely used web apps created using ruby on rails are Github, Shopify, Basecamp, etc.
5. Laravel
Once the only dominating backend framework, laravel, is an open source framework built in PHP(Hypertext Preprocessor). It is currently giving tough competition to Django, in terms of usage. It has a MVC model architecture and uses Eloquent Object Relational Mapping (ORM), including a simple PHP Active Record implementation. ORM lets application developers construct database queries using PHP syntax without writing SQL code, which makes it faster than other PHP frameworks. It has a short learning curve, especially if you’re already familiar with PHP. Even when stuck, the community is really helpful and there are a plethora of resources to help you learn Laravel from scratch. Some other features include a modular packaging system equipped with a dedicated dependency manager. Just like Django, it handles all the security on its own inside the framework itself! All these makes it a perfect backend supporter for heavy web apps like Watchseries, AlphaCoders, Laracasts(a web app to teach Laravel :), etc.
Overall, by integrating the best backend and frontend frameworks, according to your requirements, you will be equipped with all the tools to develop a full stack dynamic web app with endless possibilities.
