All About Web-Frameworks

“In those days, there was different information on different computers, but you had to log on to different computers to get at it. Also, sometimes you had to learn a different program on each computer. Often it was just easier to go and ask people when they were having coffee…” — Sir Tim Berners-Lee.

Fig 1- Sir Timothy Berners-Lee

When English scientist Sir Timothy Berners-Lee invented the World Wide Web in 1989, he would have had little idea of the juggernaut it was about to become. After connecting millions of devices and binding together billions of web pages, we can now safely say that ‘World Wide Web’ is the single most influential aspect of the 21st century. But why was this such a break-through? The answer is simple — ease of work. It made vast amounts of data accessible to everyone on their devices. Suddenly everyone could fit information eclipsing hundreds of encyclopedias in their pockets.

Today, more than 3 decades later, it remains to be more relevant than ever. Every other business, big or small has there own website to expand their work. People share their lives on the internet. It has become so integral that we cannot fathom our lives without it. To give you a perspective, according to a study, about 5.5 Lakh new websites go live every 24 hours! This can be owed to computer science becoming an important part of student’s curriculum since grade school.

So, amid so much web-development, it only makes sense that not every line of code should be written from scratch because a lot of what we might need is already written by someone. Here Frameworks come into the picture.

Frameworks are a system of rules or ideas which help you decide what to do. It provides the basic structure of something that gives it shape and strength. These definitions give a precise idea of frameworks and even helps us understand frameworks in the context of the web.

Fig 2 — Popular frontend Networks

So, a web framework is a bunch of libraries, tools that do common task in web development and it aims to ease the common activities which need to be performed in web development. It helps developers focus on the unique aspect of their websites rather that re-inventing the same piece of code. Today, there are dozens of different frameworks each with its own advantages and disadvantages. Further in this post we are going to understand the crux of some of the most popular front-end frameworks and back-end frameworks.

Front end is the part of the website that the user sees and interacts with directly. A good frontend implements easy-to-use applications with modern, robust, intuitive features. It is a crucial factor in visitor retention and navigation.

Fig 3 — Popular Front-end frameworks trends

Here are some of the most popular front-end frameworks-

Angular is open-source frontend framework that is a part of the JavaScript ecosystem used for building impressive UI. It specializes in building rich Single-Page applications. Angular 1.x used JavaScript, but later releases adopted Typescript, which is a superset of JavaScript.

Popular users- PayPal, The Guardian, Gmail.

Advantages:

  1. Large community and ecosystem.
  2. Two-way data binding enables you to reduce the development time.
  3. Makes components more reusable, easy to test, and manage with dependency injection.

Disadvantages:

  1. Steeper learning curve.
  2. 2. Limited SEO Capabilities.

React is not a framework, it’s a frontend library, but many developers consider it a framework and it’s usually compared in that context. React was the first to adopt the component-based architecture that Angular and Vue, and many other frameworks started to adopt later on. React’s virtual dom makes the dom-manipulation much faster, and it’s quite easy to pick up, mainly thanks to its JSX syntax.

Popular users- Instagram, Discord, Myntra.

Advantages:

  1. Easy to learn, understand, use, and execute.
  2. Its reusable components make apps easier to maintain and develop.

Disadvantages:

  1. Poor Documentation
  2. JSX as a barrier — ReactJS uses JSX. It’s a syntax extension that allows HTML with JavaScript mixed together. This approach has its own benefits, but some members of the development community consider JSX as a barrier, especially for new developers.

Vue.js is used to create single-page apps and progressive web interfaces for both mobile as well as desktop. It is a progressive framework, which means that if you have an existing project, you can adopt Vue for one portion of the project. It features an incrementally adaptable architecture that focuses on declarative rendering and component composition.

Popular users- Trivago, Nintendo, Gitlabs.

Advantages:

  1. Tiny size — The entire framework is only 18kb in size!

2. Reactive two-way data binding.

Disadvantages:

  1. English-speaking-only shall have problems understanding the Chinese instructions.
  2. It doesn’t have that good support to handle large-scale projects.

jQuery is a lightweight, “write less, do more”, JavaScript library. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. In addition, jQuery has plugins for almost any task out there.

Popular users- Udemy, Linkedin.

Advantages:

  1. Large library.
  2. Ajax support.
  3. Great documentation and tutorials.

Disadvantages:

  1. jQuery is slower as compared to CSS.
  2. It’s highly vulnerable to alterations.

Ember was named the best Javascript framework back in 2015. Today, the Ember community is enormous, and it’s ever-expanding, with new features, and releases added regularly. Ember possesses the two-way data binding that Angular boasts, and it comes with a lot of features and components that you can use out of the box.

Popular users- Square, TED, Netflix.

Advantages:

  1. Values conventions, there is one-true way to organize.
  2. Great router and quick to develop.

Disadvantages:

  1. Low active user base.
  2. This framework is highly opinionated, given that any sort of deviation from performing things might result in frustrating issues.

Backend refers to any part of a website or software program that users do not see. Everything that happens before the page is displayed in a web browser is part of the backend. In programming terminology, the backend is the “data access layer,” while the frontend is the “presentation layer.”

Fig 4- Popular Back-end frameworks based on GitHub Stars.

Django is a leading Model-View-Template framework that uses Python for web development . It follows the model view controller (MVC) pattern. Django is suitable for the development of sophisticated and feature-rich database-driven websites. Security in Django is essential.

Popular users- Instagram, Pinterest and Coursera.

Advantages:

  1. Values conventions, there is one-true way to organize.
  2. Great router and quick to develop.

Disadvantages:

  1. Low active user base.
  2. This framework is highly opinionated, given that any sort of deviation from performing things might result in frustrating issues.

Express.js, also known as Express, is a Node.js web application framework and open-source software available under the MIT license. It is used for building APIs and web applications and is considered as a standard Node.js server framework. It is also compatible with other frameworks such as Kraken, Sails, and Loopback.

Popular users- MySpace, GeekList, Storify.

Advantages:

  1. Values conventions, there is one-true way to organize.
  2. Great router and quick to develop.

Disadvantages:

  1. Low active user base.
  2. This framework is highly opinionated, given that any sort of deviation from performing things might result in frustrating issues.

Rails is a Model-View-Controller framework that uses Ruby, and it’s a popular framework that is loved by many developers. Ruby on Rails promotes the use of web standards like XML or JSON for data transfers and CSS, JavaScript, and HTML for interfacing. Rails prioritizes the use of software engineering patterns such as active record pattern, convention over configuration (CoC), and don’t repeat yourself (DRY).

Popular users - Airbnb, GitHub, Hulu, and Shopify.

Advantages:

  1. Values conventions, there is one-true way to organize.
  2. Great router and quick to develop.

Disadvantages:

  1. Low active user base.
  2. This framework is highly opinionated, given that any sort of deviation from performing things might result in frustrating issues.

HOW TO CHOOSE THE RIGHT FRAMEWORK?

Requirements — Before you start searching for a suitable framework you will need to make a list of requirements about web application and make sure whether a framework is suitable for that purpose.

License — check out what kind of license the frameworks falls under. While most licenses are pretty liberal to work with and allow you to create commercial application and some of them are not so generous. Find out if license allows you to distribute your application commercially or not.

Sustainability — While choosing a framework make sure that it will be able to keep up with you for the duration. This simplifies both the maintenance and upgrading of your application.

Documentation — Well explained, detailed documentation draws in the power users and preacher who then brings on more people and it is the key to its success. With a bad written, confusing document people are going to walk off confused mind and annoyed.

Bug fixes — Choose the framework which is not inactive. You don’t want a hacker to tell you that security vulnerability exists in the framework through a page he hacked on your site. You’d rather hear that from the framework developers hopefully with a link to a patch to the issue.

Community support — Choose the framework which has a friendly community which helps developers new to platform. Communities behind framework can make or break framework. More mannered the communities are more users attracted towards the framework.

WHY NOT TO USE A FRAMEWORK?

I believe this to be the major problem. If you’re using a framework and you know very little about the language behind it, you will learn the framework and not the language itself. The way you code jQuery is different from the way you code Javascript. Simple put, if you know jQuery, it doesn’t mean you know Javascript.

The framework’s core behavior can’t be modified, meaning that when you use a framework, you are forced to respect its limits and work the way it is required. Make sure you choose a framework that suits your needs.

Since the framework is available to everyone, it is also available to people with bad intentions. It can be studied in order to know how things work and to find flaws that can be used against you.

Conclusion

Web frameworks became a major technology in 1995 with the release of ‘ColdFusion’, which can be considered as the first web framework. There has been no stopping the technology ever since. It has helped millions of developers develop quick and efficient web applications. This blog will help upcoming web developers understand about various front-end and back-end frameworks available in the market and will assist them to better select the framework they would want to work with.

References

1. https://docs.djangoproject.com/en/3.2/

2. https://guides.rubyonrails.org/

3. https://expressjs.com/

4. https://angular.io/docs

5. https://vuejs.org/v2/guide/

6. https://reactjs.org/docs/getting-started.html

7. https://www.zirous.com/2018/03/13/why-are-web-frameworks-important/

8. Wikipedia- Web frameworks