A Complete Guide to the Modern Web Development Stack

This article explains web development in a short read. We'll cover several critical areas of web development, which together form a complete web development stack. That means we'll start with user interfaces and the front-end code they're made of. We'll talk about APIs and how data gets transferred over networks, and we'll touch on backends, databases, security, the hardware servers run on, and modern cloud computing.

The Evolution of the Web

But before any of that, let's look at how web development has evolved over the past couple of decades. We started with Web 1.0, the era of static web pages that essentially just displayed information. This was the time of the dot-com bubble, where many web pages had a very basic, text-heavy appearance.

In the mid-to-late 2000s, Web 2.0 and the era of dynamic web apps started to emerge. While there's no agreed-upon definition, web apps are usually characterized by user-generated content, push notifications, and various other interactive features.

Now, many believe we're entering a new, third era: customized, AI-driven experiences that are different for every user. A couple of examples are personalized recommendation algorithms and e-commerce sites that anticipate our needs. These advances have blurred the lines between web development and the rest of software development.

The Front-End: What the User Sees

Let's dive into our stack, starting with the front-end. Notably, this is what the user sees and interacts with directly; it's the portal from our app to the outside world. Most everyone is familiar with the front-end trinity: HTML, CSS, and JavaScript.

It all starts in the browser. When you visit a URL, this will kick off a request for an index.html file from a server. An HTML file is only made up of two things: text and, more importantly, tags. These tags can modify text, add links, break our page into sections, and add classes that we can apply styles to. We also have standalone tags. Essentially, these tell the browser to load additional assets, whether that's an image or additional files.

One such file might be a CSS file, which creates an additional request to the server. Once received, it will scan through the loaded HTML and add styling. This is done through selectors and attributes. Selectors find elements and can be broad, searching for all matching a tag, or more narrow with a class or ID. Attributes are the styles we apply. Here are some examples:

/* Selects all paragraph tags */
p {
  color: blue;
}

/* Selects elements with the class 'highlight' */
.highlight {
  background-color: yellow;
}

/* Selects the element with the ID 'main-title' */
#main-title {
  font-size: 2em;
}

A Note on CSS Spacing Something nerve-wracking for many people learning CSS is how to handle spacing. You can manage the vast majority of your spacing needs if you master a layout model called Flexbox. CSS isn't always logical; it's mostly just practicing, memorizing, and applying what you've learned.

Back to our HTML file, there's one more important tag we need to talk about: the <script> tag. This allows us to load JavaScript files from our server or elsewhere on the internet. By the way, servers that send these kinds of files are generally referred to as web servers. So, when the browser sees a script tag, it requests the file, and it gets sent over.

The Role of JavaScript

Let's look at some of the things JavaScript is responsible for with an example. Let's say we have a button that logs us in. What triggers the login is known as a user event—in this case, a click on the button. To respond to this event, we need what's known as a listener: some code that waits for the button to be clicked and responds accordingly.

When the click happens, JavaScript can update our HTML to show a loader, thereby updating the appearance of our page. We then send this login data to our server to validate it. JavaScript lets us talk to our server without reloading the page. These requests, whether to send data or request more data, are known as AJAX (Asynchronous JavaScript and XML) requests.

Modern Front-End Frameworks

Today, almost all front-end developers are using frameworks. These frameworks don't do anything JavaScript can't do, but they provide a better developer experience, which is crucial when making changes or fixing bugs. That being said, browsers can only run JavaScript, not framework code. So, our framework code has to go through a build or bundle step, which converts it to normal JavaScript.

Here are a few popular frameworks, with some notes on their learning curve and usage:

• Learning Curve (Easiest to Hardest): Svelte, Vue, React, Angular
• Usage (Most to Least Popular): React, Angular, Vue, Svelte

The important part is to choose one and stick with it, although keep in mind that React and Angular have an order of magnitude more jobs than some of the others.

APIs: Bridging the Front-End and Back-End

Okay, we have our front-end, but how does it talk to the back-end? That's the purpose of an API. Essentially, our front-end and back-end may or may not be in different languages, so we need to standardize a way for them to communicate. We do that with an API.

Most commonly, REST APIs are used, which follow the convention of combining a verb with a location. For example, we might want to GET a list of accounts or POST a new account. Alternatively, if we pass a parameter, we could GET a specific account, PUT modifications to it, or DELETE it.

REST provides some nice standards, but there are no guarantees; if anything changes, our front-end can get messed up. An alternative is RPC (Remote Procedure Call), which sets rules in advance with something called a schema. This makes inputs and outputs explicit beforehand.

So, how is data transferred? It's most commonly done by sending strings back and forth through a protocol known as HTTP. Ideally, these strings can be read by any programming language. Two common formats are JSON and XML, and we convert data to a JSON string through a process called serialization.

The Back-End: The Engine Room

The back-end application layer can glue together multiple different components. It can talk to front-ends, other servers, and databases. You can write web back-ends in pretty much any language, but some of the most popular are Python, JavaScript, PHP, and C#.

Back-end frameworks are commonplace too, designed to make your life easier. Here are some of the most common ones for the languages mentioned:

• Python: Django, Flask
• JavaScript (Node.js): Express
• PHP: Laravel
• C#: ASP.NET

If you're wondering when we would talk to other servers, back-ends are often broken into what's known as microservices. This is just a pattern to separate logic, which can make things easier to scale and to work on. Other than responding to APIs, back-ends might perform various other batch processes, which are often done on a timer. One example of this could be web scraping.

To talk to databases, back-ends often use what's known as an ORM (Object-Relational Mapper). These just give us more semantic ways to query our database, add to it, and so on.

Databases: Storing Your Application's Data

There are entire college courses on databases, but let's talk about them at a high level. There are two main types of multifunctional databases: SQL and NoSQL. Each provides different strengths and guarantees.

• SQL databases are organized in a strict, column-based format. This means to write or add to the database, you have to adhere to a set of rules, or it won't work. These stricter rules allow you to perform more complicated queries when reading from your database.
• NoSQL databases don't really have rigid rules; they just have collections, which are groups of objects. So, a user object might have a name and email, but it's not enforced. These scale much better, but you have to be careful because there are no guarantees about the structure of your data.

Again, there are numerous other database principles that apply, and your choice is totally circumstantial. Over three of the most popular databases are MySQL, PostgreSQL, and MongoDB. Finally, you should know that when trying to scale up an application, databases are usually the slowest component and the primary bottleneck. Resolving these scaling issues is a complex topic in itself.

Web Security Essentials

Let's touch on web security. Any web app with a login will need to consider authorization and authentication.

• Authentication is the process of verifying who a user is. The login itself provides authentication. This process will usually give the user a string-based token, which is a random sequence of characters. This token is then used on the server-side to validate each subsequent request.
• Authorization, on the other hand, defines what a user is allowed to do. It defines different user roles, so an admin user would be able to do different things than a normal user.

Infrastructure and Networking

Let's touch on infrastructure and networking. Data centers are where almost all servers and web servers exist, unless you have a dedicated server running at home that's always on. These servers are just computers without monitors that are constantly running. They can be controlled with SSH, a direct way to control the machine from the command line, but most of what they do is automated through scripts.

You can group multiple servers into a private network. Each server in a network is called a node, and in private networks, servers can communicate quickly and securely. Servers that talk to the outside world have more to worry about. They're usually set up with a reverse proxy, which is a gateway that exposes specific ports to the outside world. A port is just a machine-specific address a process is running on. So, you might want to expose a REST API's port but not a database port.

The Cloud Computing Revolution

Nowadays, most of this hardware management is handled by companies like AWS and DigitalOcean, who run their own data centers and rent out space on demand. This is where the term 'cloud computing' comes from. You can rent a fraction of a single server for an hourly or monthly cost. Cloud providers like AWS will usually offer a lot of additional services that keep you on their platform.

Cloud computing has expanded beyond just having servers as a service, though. You can also run individual functions for a very low cost on-demand. So, if you wanted to send an email every time something happened in your front-end, you could put that logic in a cloud function.

The Rise of Backend-as-a-Service (BaaS)

If everything after the front-end section seemed a bit daunting in this article, you can actually now use an entire back-end as a service (BaaS). This means everything from the database to API configuration to security is handled by the service provider. This allows you to get apps up and running in a matter of hours, and it's incredibly straightforward. One popular example is Firebase, a service used by numerous developers.