Overview

In this article I will try to cover most things so you do not have to.

A technology stack is the combination of programming languages, frameworks, and tools that developers use to build a web application. A typical technology stack consists of several layers, each with its own responsibilities and functions.

It is a layered pattern as module view and a multi-tier pattern as allocation view, I explained that in a past article you can see Software Architecture Design These layers are often referred to as tiers, and they include the following:

• Frontend Tier:

This layer is responsible for the user interface of the web application. It includes HTML, CSS, and JavaScript, as well as frontend frameworks such as React, Angular, and Vue.js. The frontend tier is what users see and interact with when they use the web application.

• Backend Tier:

This layer is responsible for the server-side logic of the web application. It includes server-side languages such as PHP, Python, and Ruby, as well as serverless technologies such as AWS Lambda and Google Cloud Functions. The backend tier handles data processing, authentication, and business logic.

• Database Tier:

This layer is responsible for storing and managing the data used by the web application. It includes SQL databases such as MySQL and PostgreSQL, NoSQL databases such as MongoDB and Cassandra, and cloud-based databases such as Amazon RDS and Google Cloud SQL.

All these tiers combined together in multiple servers -Network Series- to work and we will start by explaining every tier, then we will combine them all in one picture.

---

Frontend

HTML

• HTML: HTML is the markup language used to structure content on the web.
• Templating Languages: Templating languages allow developers to generate dynamic HTML content based on data that changes depending on user input or other factors. This can be useful for creating more complex web applications that require dynamic content.

CSS

• CSS: CSS is the styling language used to control the layout, typography, and visual design of web pages.
• CSS Frameworks: CSS frameworks provide pre-written CSS code that can be used to style HTML elements and create consistent and attractive designs across a web application. Some popular CSS frameworks include Bootstrap, Tailwind, and Foundation.
• SASS: Sass is a CSS preprocessor that extends the capabilities of CSS by adding variables, mixins, and other features. This can make CSS code more modular and reusable, and can help developers write stylesheets more quickly and efficiently.

JavaScript (JS)

• JavaScript: JavaScript is the programming language used to add interactivity and dynamic behavior to web pages.
• JS Frameworks: JS frameworks provide pre-written code and libraries that help developers build web applications more efficiently. Some popular JS frameworks include React, Angular, and Vue.js.
• TypeScript: TypeScript is a superset of JavaScript that adds optional static typing and other features. This can help make JS code more maintainable and easier to debug, particularly in larger codebases.

Package Managers

Package Managers: Package managers such as NPM and Yarn help developers manage dependencies and packages for their web applications. This can make it easier to install and update third-party libraries and frameworks, and can help ensure that all dependencies are up to date and compatible.

Build Tools

Build Tools: Build tools such as Webpack and Vite help automate repetitive tasks in the frontend development workflow, such as compiling CSS and JavaScript, optimizing images, and live-reloading web pages as changes are made. This can save developers time and effort, and can help ensure that code is consistently optimized and error-free.

Testing Tools

Testing Tools: Testing tools such as Jest and Selenium help developers write and run automated tests to ensure that their web applications are functioning correctly. This can help catch bugs and errors early in the development process, and can help ensure that code is robust and reliable.

Other Tools

• State Management: State management tools such as Redux and MobX help developers manage the state of their web applications more effectively. This can be useful for creating more complex web applications that require multiple components to share data and communicate with each other.
• Server-Side Rendering (SSR): Server-side rendering tools such as Next.js and Nuxt.js allow developers to render web pages on the server side rather than the client side. This can improve performance and accessibility, particularly for web applications that require fast page load times or need to be accessible to users with slower internet connections.

API

Ways to communicate between frontend and backend.

Synchronous

• HTTP REST

  • Definition: APIs that adhere to a set of constraints for identifying and manipulating resources can be with JSON format.
  • Frontend libraries: Axios, Fetch API.
  • Backend libraries: Flask-RESTful, Django REST framework, Express.js, Ruby on Rails.

• HTTP SOAP

  • Definition: APIs that use the SOAP protocol to send and receive data in XML format.
  • Frontend libraries: XMLHTTPRequest object, SOAP client library for JavaScript.
  • Backend libraries: Zeep, Suds, Apache CXF, Spring.

• GraphQL

  • Definition: APIs that use a query language to define the data that should be returned in each response.
  • Frontend libraries: Apollo Client, Relay.
  • Backend libraries: Apollo Server, GraphQL Yoga.

• RPC

  • Definition: APIs that allow clients to invoke procedures or functions on a remote server or service.
  • Frontend libraries: gRPC-Web, JSON-RPC.
  • Backend libraries: gRPC, Apache Thrift.

Asynchronous

• WebSocket

  • Definition: APIs that use the WebSocket protocol to enable real-time, bidirectional communication between clients and servers.
  • Frontend libraries: WebSocket API, Socket.IO.
  • Backend libraries: Flask-SocketIO, Django Channels, Socket.IO Server.

• Server Sent Events

  • Definition: APIs that enable servers to send real-time updates to clients over a single HTTP connection. The updates are sent as a stream of text-based events, which can be displayed in the browser using JavaScript.
  • Frontend libraries: EventSource API.
  • Backend libraries: Flask-SSE, Django-SSE.

• Webhooks

  • Definition: APIs that allow servers to send real-time notifications to clients by making HTTP requests to a preconfigured endpoint. The notifications can be triggered by events such as data updates or user actions.

Backend