security | privacy | web dev

An Overview of Popular Web Frameworks (and stacks)

Sunday 12th July 2020. By Simon Bell

Reading time: 6 minutes
Tags: web development

Photo by Kimon Maritz

Intro

Frameworks can help with geting projects off the ground more quickly compared to using "vanilla" code. Instead of building completely from scratch, you make use of existing code, libraries, layouts, etc to get your project up-and-running faster.

When it comes to web development, we typically split things into front-end and back-end. Front-end typically consists of languages that implement what you see: HTML, CSS, JavaScript, etc. Back-end typically consists of tech that deals with data processing, using server side languages and databases like Python, Java, PHP, MySQL, PostgreSQL, etc.

Let's look at some popular front-end frameworks first, then we'll move onto back-end.

Front-End Frameworks

Vue (Vue.js)

View is an open-source model-view-viewmodel (MVVM) JavaScript framework for building user interfaces and single-page applications. It uses an incrementally adaptable architecture that focuses on declarative rendering and component composition.

Angular

Angular is a TypeScript-based open-source web application framework. Angular does not have a concept of "scope" or controllers; instead, it uses a hierarchy of components as its primary architectural characteristic. Angular JS = v1.x and up; Angular = v2.x and up.

React (React.js)

React is an open-source JavaScript library for building user interfaces that uses a component-based architecture. It's commonly used as a development base for creating single-page or mobile apps. React only renders the Document Object Model (DOM) so additional libraries are needed for state management and routing (such as Redux and React Router).

Ember

  • Language: JavaScript
  • First released: 2011
  • Developed by: Yehuda Katz / Ember Core Team
  • Used by: Apple Music, LinkedIn, PlayStation Now Vine, Twitch (source: builtwithember.io)
  • Popularity:  21.5k stars on Github
  • Website: emberjs.com
  • Repo: github.com/emberjs/ember.js

Ember is an open-source JavaScript web framework based on the model-view-viewmodel (MVVM) pattern. Developers can create scalable single-page web applications by using common idioms and best practices.

Backbone

Backbone is an open-source JavaScipt library with a RESTful JSON interfaces that uses the model-view-presenter (MVP) application design paradigm. It's a ligjtweigt library that's deigned for single-page applications and keeping various aprts of the application synchronised.

jQuery

  • Language: JavaScript
  • First released: 2006
  • Developed by: The jQuery Team
  • Used by: Google, Facebook, Twitter, Amazon, LinkedIn, Reddit
  • Popularity: used by 48.7% of developers (in stackoverflow 2019 survey) / 53.5k stars on Github / 75% of the top 10 million websites use jQuery, according to w3Techs
  • Website: jquery.com
  • Repo: github.com/jquery/jquery

jQuery is a small, fast, and rich, open-source JavaScript library. It's essentially a Document Object Model (DOM) manipulation library. Although it's popularity has been declining in recent years due to modern web browser improvements and other frameworks such as React and Angular. Some say there's less need for jQuery in modern web development.

Bootstrap

  • Language: CSS (cascading style sheets)
  • First released: 2011
  • Developed by: Mark Otto / Jacob Thornton / Twitter
  • Used by: Ninterndo, Twitter, Apple, Reuters, etc (source: getbootstrap.com)
  • Popularity: used by 21% of all websites (according to w3techs) / 141k stars on Github
  • Website: getbootstrap.com
  • Repo: github.com/twbs/bootstrap

Bootstrap is a CSS framework that's aimed at responsive and mobile-friendly front-end web development. It contains CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Back-End Frameworks

Django

Django is an open-source python web framework that uses the model-template-view architectural pattern. Django prives itself on helping developers create complex, database-driven websites by emphasising reusability, low coupling, rapid development and the concept of dont-repeat-youself (DRY).

Rails (Ruby on Rails)

Rails is an open-source web framework written in Ruby that uses the model-view-controller (MVC) framework. Rails emphasises popular software engineering patterns and paradigms such as convention over configuration (CoC), don't repeat yourself (DRY), and the active record pattern. It is widely regarded as one of the most developer-friendly frameworks.

Laravel

Laravel is an open-source web framework written in PHP that follows model-view-contrller (MVC) architectural pattern. Laravel is based on Symfony (a popular web application framework) and features a modular packaging system with a dedicated dependency manager, application deployment tools and maintenance, and orientatt towards syntactic sugar (i.e. code that's more human-friendly).

Spring

Spring is an open-source application framework and inversion of control container for the Java platform. It uses its own model–view–controller (MVC) web application framework. The framework doesn't impose any specific programing model but it has become popular in the Java community as an addition to the Enterprise JavaBeans (EJB) model

Express (express.js)

Express is an open-source web application framework for Node.js that doesn't enforce any architecture pattern. It's a realtively minimal framework with many features availabel as plugins. Express is the back-end component of the MEAN stack, together with the MongoDB database software and AngularJS front-end framework

Flask

Flask is an open-source micro web framework written in Python. It's very minimal and doesn't come with any tools or libraries out of the box. However, Flask is a very extensionable framework, therefore its features can be highly customised.

Popular Web Stacks

Having looked at some popular frameworks and libraries, it's now time to group some of them together to help us create a functioning web app. This is where the web/tech stack comes in.

A web stack typically consists of one or more front-end libraries or frameworks (such as React for JavaScript, Bootstrap for CSS, etc), a back-end framework (such as Django for Python), a database (such as PostgreSQL), a server (such as Apache) and an operating system to run everything on (such as Ubuntu on Linux).

When it comes to chosing which technnologies / libraries / frameworks / languages to use, it really depends on the project, infrastructure requirements, developer skillsets, etc. Listed below are some common web stacks - but a project could pick-and-mix its own stack (e.g. Django, PostgreSQL, Linux, Nginx, React) or even go serverless.  

LAMP: Linux - Apache - MySQL - PHP / Python / Perl - (JavaScript)

LEMP: Linux - Nginx - MySQL - PHP - (JavaScript)

MEAN: MongoDB - Express - AngularJS - Node.js

MERN: MongoDB - Express - React - Node.js

MEVN: MongoDB - Express - Vue - Node.js

Ruby on Rails: Ruby - SQLite - Rails - (JavaScript)

Simon Bell

Simon is a software engineer; specialising in web applications and cyber security. He recently passed his Cyber Security PhD viva and he has a BSc in Computer Science. In his spare time he enjoys running, tinkering with the Raspberry Pi, and experimenting with redstone circuits in Minecraft. Find out more about him at SJBell.com

Cybersecurity Newsletter

Sign up for Key Threat's newsletter and get the latest cyber security, privacy, and web development articles straight to your inbox:

Back to top