web stack

What is web stack?

A web stack is the collection of software used for web development that incorporates, at a minimum, an operating system (OS), a programming language, database software and a web server.

A web stack, also known as a web application stack, is a type of solution stack. It's a collection of software applications that performs a particular task. In this case, the task or purpose is to enable web development, that is, the development of websites and web applications.

The term stack is used because the system's individual components and technologies are built upon one another and work in tandem for web development projects. Moreover, the stack can be used repeatedly for multiple projects. Selecting the right web stack is important because the wrong choices can prove costly.

What is the role of each component in a web stack?

The web stack's components work together to ensure that the correct information is passed to a requesting client, which is usually an internet browser. The browser then processes the HTML, cascading style sheet (CSS) and JavaScript codes on the application or website and displays it to the user.

OS

The OS in the web stack is the central interface between the hardware and software components of the web application. The most popular OSes for web development are Windows, Linux, Unix and MacOS.

Web server

Installed on the OS, the web server delivers web documents and information to the clients who requested them. Client requests are passed to the web server via HTTP. The web server then directly processes the requests for static content or refers to a database and script module for dynamic content. Apache, Microsoft Internet Information Services (IIS), and Nginx are all types of web servers.

Database

The database is required to store the data for the web project and make it available to the web server as required. The server requests data using server extensions that generate the output in a suitable format, such as HTML, and forward it to the server. SQL, MySQL, Oracle and MongoDB are all popular databases for web projects.

Programming language

The programming language, also known as the script interpreter, operates on the client side and within the requesting browser. It's required to realize dynamic websites and web applications. PHP is one of the most popular script interpreters; others include Java, Ruby, Perl and Python.

Types of web stacks

There are three main types of web stacks: front-end, back-end and full web stacks. Each type is powered by its own set of tools. Depending on the project, all three types may be required. At the very least, both front-end and back-end tools are essential to build web apps.

Front-end web stacks

In a web application or site, the front end refers to the interface users interact with. For example, when a user opens an e-commerce store's website, the page they see on their internet browser is the front end.

Front-end web stacks can include various types of software, such as libraries, frameworks, package managers and build systems. Front-end developers also typically use tools for testing, version control, caching and deployment.

The most popular front-end web stacks are the following:

• HTML. A standard markup language to create web pages. It describes the structure of a web page and instructs browsers on how to display the page content.
• CSS. A rule-based language that describes how HTML elements are displayed on a user's screen. It determines how the static elements of the front end will be presented, including fonts, element size, layouts and colors.
• JavaScript. A scripting language to create interactive and dynamic web page content.
• Front-end user interface (UI) frameworks. These are required to build modern, user-driven websites and web applications. React, Vue.js, Angular and Ember.js are among the most popular UI frameworks for front-end web developers.
• CSS preprocessors. These programs, or extension languages such as SASS or LESS, simplify CSS development by compiling code and creating a CSS file from their own unique syntax. The file can then be referenced by the main HTML document.

Back-end web stacks

Equally important in web development, the back-end web stack is not visible to users. Also known as the server-side stack, the back-end web development stack includes the following:

• business logic;
• OS;
• Web server;
• database management;
• Web dev frameworks;
• programming languages such as Python, Ruby and Java;
• authentication; and
• synchronizations with the client app.

Some back-end web stacks may also include containerization tools like Docker for cloud-native app development and application programming interfaces (APIs) for the UI to communicate with the system. Search engines, storage, caching tools and DevOps tools may also be part of the back-end web stack.

Full web stacks

The full web stack includes all the essential technologies to build a website or web app:

• front-end framework
• back-end solution
• database

Again, Angular, React and Vue are the three most popular front-end frameworks. The back-end solution includes the programming language, which is usually chosen based on the front-end framework. This is because many frameworks are tied to or work best with certain languages. For example, Symfony is a PHP framework to build web apps, Express is a Node or Node.js framework, and Django and Flask are web application frameworks written in Python.

Databases can be relational (e.g., SQL) or document oriented. Data is highly structured in relational databases, and loosely structured in document-oriented databases. The choice of database largely depends on the application being developed.

The full web stack can also include other elements, such as an application framework or state management tool. Full web stacks are often abbreviated based on the technologies that comprise them. For example, MEAN refers to MongoDB, Express, Angular and Node. Similarly, LAMP means Linux, Apache, MySQL and PHP.

What are some popular web stacks?

LAMP is among the most popular and commonly used web stacks. It uses Linux as the OS, Apache as the web server, MySQL as the relational database management system and PHP as the object-oriented scripting language.

The LAMP model consists of open source software with free licenses that can be modified to develop any kind of web application. LAMP packages are well-suited for developing multipage, dynamic websites.

Variations of the LAMP stack that have emerged in recent years include the following:

• WAMP: Windows, Apache, MySQL, PHP
• MAMP: Mac OS X, Apache, MySQL, PHP
• XAMPP: Any OS, Apache, MariaDB, Perl and PHP
• LAPP: Linux, Apache, PostgreSQL, PHP/Python/PERL

Microsoft has created its own web stack called WISA: Windows Server, IIS, SQL Server and ASP.NET. Windows Server is the OS, IIS is the web server software, SQL Server is the relational database system and ASP.NET is the programming language library.

Unlike LAMP and other web stacks, WISA is proprietary. This drawback notwithstanding, WISA provides a performance advantage over other web stacks because it doesn't require a script interpreter. Moreover, web projects can be programmed in Visual C# or Visual Basic.NET and then directly executed with a compiler. For these reasons, WISA is a good web stack for complex web projects.

MEAN is another popular web stack. All its elements support JavaScript, so there's no need to use multiple programming languages for servers and clients. This stack is useful to develop client-oriented single-page applications and mobile apps. It also supports app scalability. Variations of MEAN include the following:

• MEEN: MongoDB, Express, Ejs, Node
• MERN: MongoDB, Express, React, Node