For this book, you’ll need a few things to aid you in your journey. The following are recommendations:

• The latest version of Python
• FastAPI (https://pypi.org/project/fastapi/)
• A local development environment on your laptop/desktop for your application server
• A MongoDB Atlas cloud account to host your database (https://www.mongodb.com/cloud/atlas/register)
• Visual Studio Code or the IDE of your choice

Let’s begin with a very basic understanding of what the FARM stack is.

Stacks are sets of technologies that cover different parts of a modern web app, blended and well integrated. The right stack will enable you to satisfy certain criteria while building a web application, with considerably less effort and in less time than building it from scratch.

First, let’s see what you need to build a functional web application:

• An operating system: Usually, this is Unix/Linux-based.
• A storage layer: A SQL or NoSQL database. In this book, we’ll use MongoDB.
• A web server: Apache and NGINX are quite popular, but we will talk about Python solutions for FastAPI, such as Uvicorn or Hypercorn.
• A development environment: Node.js/JavaScript, .NET, Java, or Python.

Optionally, and often, you could also add a frontend library or framework (such as Vue.js, Angular, React, or Svelte) since the vast majority of web development companies benefit from adopting one in terms of consistency, development speed, and compliance with standards. In addition, user expectations have shifted over time. There are unsaid standards for what logins, buttons, menus, and other website elements should look like, and how they function. Using a framework will make your application more consistent with the modern web and go a long way toward user satisfaction.

The most famous stacks are as follows:

• MERN: MongoDB + Express.js + React + Node.js (MERN) is probably one of the most popular stacks today. Developers can be comfortable and never leave JavaScript, except when they need to write some style sheets. With the addition of React Native for mobile apps and something such as Electron.js for desktop apps, a product can encompass virtually every platform while relying solely on JavaScript.
• MEAN: MongoDB + Express.js + Angular.js + Node.js (MEAN) is similar to the previously mentioned MERN, with Angular.js managing the frontend in a more structured Model–View–Controller (MVC) way.
• LAMP: Linux + Apache + MySQL + PHP (LAMP) is probably the first stack acronym to gain popularity and one of the most widely used in the past 20 years. It is still quite popular today.

The first two stacks run on the Node.js platform (a server-run JavaScript V8 engine) and have a web framework in common. Although Express.js is the most popular, there are excellent alternatives in the Node.js universe, such as Koa.js, Fastify.js, or some more structured ones such as Nest.js.

Since this is a Python book, we will also go through some important Python frameworks. The top three most popular frameworks for Python developers are Django, Flask, and FastAPI. Using the Django web framework and the excellent Django REST Framework (DRF) for building REST APIs in a modern and logical way is very popular. Django itself is very mature and well known among Python developers. It also has an admin site, the possibility of customizing and serializing REST responses, the option to choose between functional and class-based views, and more.

FastAPI, on the other hand, is a relative newcomer. First released in December 2018, this alternative, lightweight framework was fast to gain advocates. Almost immediately, these advocates had created a new acronym for FastAPI within the tech stack—FARM.

Let’s understand what FARM stands for:

• FA stands for FastAPI—in technology years, a brand-new Python web framework
• R stands for React, the most popular UI library
• M denotes the data layer—MongoDB, which is the most popular NoSQL database available today

Figure 1.1 provides a high-level overview of the integrations between the constituent parts involved in the FARM stack:

Figure 1.1: FARM stack with its components

As you can see in the preceding diagram, the FARM stack is composed of three layers:

1. The user performs an action using the client, which, in our case, will be based on React—this ultimately creates a bundle of HTML, Cascading Style Sheets (CSS), and JavaScript.
2. This user action (a mouse click, a form submit, or some other event) then triggers an HTTP request (such as GET, POST, PUT, or another HTTP verb with a payload).
3. Finally, this request gets processed by the REST API service (FastAPI).

The Python part is centered around FastAPI and optional dependencies and is served by Uvicorn—a fast Python-based server. The backend is responsible for dispatching the appropriate database calls to MongoDB using various commands and queries (such as findOne, find, create, update, and more) and using the MongoDB aggregation framework. The results obtained from the database are interpreted by FastAPI through the Python driver of choice (Motor), converted from BSON into appropriate Python data structures, and finally, output from the REST API server in the form of plain JSON. If you use Motor, which is an asynchronous Python driver for MongoDB, these calls will be handled asynchronously.

Finally, returning to the diagram in Figure 1.1 and the arrow labeled JSON, the data is fed to the UI where it is handled by React and used to update the interface, render the necessary components, and synchronize the UI with React’s virtual DOM tree.

The next few sections will talk about the motivations behind the birth of the FARM stack. Why these technologies and, more importantly, why these technologies together? You will get a detailed introduction to each component and the features that make it a good fit in more detail. After a brief introduction to the benefits of the stack as a whole, the sections will provide a high-level overview of each choice and underline the benefits that it can provide to a modern web development workflow.

The flexibility and simplicity of the stack, along with its components, give a real boost in terms of development speed, extensibility, and maintainability while allowing scalability (due to the distributed nature of MongoDB on the one hand and the async nature of FastAPI on the other hand) down the road. This might be crucial if your product needs to evolve and become bigger than it was initially supposed to be. The ideal scenario would probably be a small-to-medium-scale web app that you can experiment with.

Developers and analysts alike could greatly benefit from Python’s ecosystem and extensibility through a rich ecosystem of modules that encompasses virtually every human activity that includes some type of computing.

MongoDB is a free, fast, and scalable database with a JSON format and simple syntax. It enables flexible schemas and, thus, iterative and rapid development. MongoDB is able to accommodate data structures of varying complexities. Additionally, its querying and aggregation methods make it an excellent choice for a flexible REST API framework such as FastAPI, coupled with an official Python driver such as Motor. It has a high level of adoption and maturity and is one of the pillars of the NoSQL data storage movement that took the web development world by storm a decade ago.

The following are some other features that will be detailed for use in this book:

• Complex nested structures: MongoDB documents allow other documents and arrays of documents to be embedded, which naturally translates into the data flow of a modern data web app (for example, you can embed all comments into the blog post they respond to). Denormalization is encouraged.
• Simple, intuitive syntax: The methods for performing basic create, read, update, delete (CRUD) operations, coupled with powerful aggregation frameworks and projections, allow you to achieve almost all data reads quite easily through the use of drivers. The commands should be intuitive for anyone with a bit of SQL experience.
• Community and documentation: MongoDB is backed by a mature company and a strong community, and it offers various tools to facilitate the development and prototyping process. For instance, Compass is a desktop application that enables users to manage and administer databases. The framework of the serverless functions is constantly being updated and upgraded, and there are excellent drivers for virtually every programming language.

Of course, MongoDB is not a silver bullet, and some challenges are worth noticing upfront. On the one hand, the schema-less design and the ability to insert any type of data into your database might be a bit panic-inducing but translates to the need for stronger data integrity validation on the backend side. You will see how Pydantic—an excellent Python validation and type-enforcement library—can help you with stronger data integrity. The absence of complex joins, which are present in the SQL world, might be a dealbreaker for some types of applications.

Now that you understand what MongoDB brings to the table in terms of scalability and flexibility, with its schema-less approach, take a look at the REST API framework of choice, FastAPI, and learn how it can help you implement that schema-less approach and simplify your interactions with the data.

FastAPI is a modern and performant web framework for building APIs. Built by Sebastian Ramirez, it uses the newest features of the Python programming language, such as type hinting and annotations, the async – await syntax, Pydantic models, web socket support, and more.

If you are not familiar with APIs, let’s get into it in more depth by understanding what an API is. An application programming interface (API) is used to enable some kind of interaction between different pieces of software, and they communicate using Hypertext Transfer Protocol (HTTP) through a cycle of requests and responses. Therefore, an API is, as its name suggests, an interface. Via this interface, humans or machines interact with an application or a service. Every API provider should have an interface that is well suited for the type of data that they provide; for instance, a weather forecasting station provides an API that lists the temperatures and humidity levels for a certain location. Sports sites provide statistical data about the games that are being played. A pizza delivery API will provide you with the selected ingredients, the price, and the estimated time of arrival.

APIs touch every aspect of your life, for example, transmitting medical data, enabling fast communications between applications, and even used in tractors in fields. APIs are what make today’s web run and, put simply, are the best form of information exchange.

This chapter will not go over the rigorous definitions of REST APIs, but just list some of their most important features:

• Statelessness: REST APIs are said to be stateless, which means that neither the client nor the server stores any states in between. All the requests and responses are handled by the API server in isolation and without information about the session itself.
• Layered structure: To keep the API scalable and understandable, a RESTful architecture implies a layered structure. The different layers form a hierarchy and communicate with each other but not with every component, thus improving overall security.
• Client-server architecture: APIs should be able to connect different systems/pieces of software without limiting their own functionalities—the server and the client have to stay separate and independent from each other.

There are numerous reasons why MongoDB chose FastAPI for their REST API layer, even though it’s new compared to other Python frameworks. Here are some of the reasons:

• High performance: FastAPI can achieve very high performance, especially compared to other Python-based solutions. By using Starlette under the hood, FastAPI’s performance reaches levels that are usually reserved for Node.js and Go.
• Data validation and simplicity: Being heavily based on Python types and Pydantic brings numerous benefits. Since Pydantic structures are just instances of classes the developers define, you can use complex data validations, deeply nested JSON objects, and hierarchical models (using Python lists and dictionaries), and this relates very well with the nature of MongoDB.
• Faster development: Development becomes more intuitive, with strong integrated development environment (IDE) support, which leads to faster development time and fewer bugs.
• Standards compliance: FastAPI is standard-based and fully compatible with open standards for building APIs—such as OpenAPI and JSON schema.
• Logical structuring of apps: The framework allows the structuring of APIs and apps into multiple routers and allows granular request and response customization, and easy access to every part of the HTTP cycle.
• Async support: FastAPI uses an asynchronous server gateway interface (ASGI) and, with the use of an ASGI-compatible server, such as Uvicorn or Hypercorn, is able to provide a truly asynchronous workflow without actually having to import the asyncio module into Python.
• Dependency injection: The dependency injection system in FastAPI is one of its biggest selling points. It enables the creation of complex functionalities that are easily reusable across your API. This is a pretty big deal and probably the feature that makes FastAPI ideal for hybrid web apps—it gives developers the opportunity to easily attach different functionalities to the REST endpoints.
• Great documentation: The documentation of the framework itself is excellent and second to none. It is both easy to follow and extensive.
• Automatic documentation: Being based on OpenAPI, FastAPI enables automatic documentation creation, which essentially means that you get your API documented for free with Swagger.

Also, getting started is relatively simple:

pip install fastapi

In order to get at least a basic idea of what coding with FastAPI looks like, let’s take a look at a minimal API:

# main.py
from fastapi import FastAPI
app = FastAPI()
@app.get(“/”)
async def root():
    return {“message”: “Hello World”}

The preceding few lines of code define a minimal API with a single endpoint (/) that responds to a GET request with the message Hello world. You can instantiate a FastAPI class and use decorators to tell the server which HTTP methods should trigger which function for a response.

Python has been used to build REST APIs for a very long time. While there are many options and solutions, DRF and Flask seem to be the most popular ones, at least until recently. If you are feeling adventurous, you can Google less popular or older frameworks such as bottle.py and CherryPy.

DRF is a plugin system for the Django web framework and enables a Django system to create highly customized REST API responses and generate endpoints based on the defined models. DRF is a very mature and battle-tested system. It is regularly updated, and its documentation is very detailed.

Flask, Python’s lightweight microframework, is a real gem among the web-building Python tools and can create REST APIs in a lot of different ways. You can use pure Flask and just output the appropriate format (i.e., JSON instead of HTML) or use some of the extensions developed to make the creation of REST APIs as straightforward as possible. Both of these solutions are fundamentally synchronous, although there seems to be active development in the direction of enabling async support.

There are also some very robust and mature tools, such as Tornado, which is an asynchronous networking library (and a server) that is able to scale to tens of thousands of open connections. Finally, in the last couple of years, several new Python-based solutions have been created.

One of these solutions, and arguably the fastest, is Starlette. Dubbed as a lightweight ASGI framework/toolkit, it is ideal for building high-performance async services.

Sebastian Ramirez built FastAPI on top of Starlette and Pydantic, while also adding numerous features and goodies by using the latest Python features, such as type hinting and async support. According to some recent developer surveys1, FastAPI is quickly becoming one of the most popular and most loved web frameworks.

In later chapters of this book, you’ll go over the most important features of FastAPI, but at this point, we’ll stress the significance of having a truly async Python framework as the glue for the most diverse components of a system. In fact, besides doing the usual web framework stuff, such as communicating with a database, spitting out data to a frontend, and managing authentication and authorization, this Python pipeline enables you to quickly integrate and easily carry out frequently required tasks such as background jobs, header and body manipulation, response and request validation, and more through the dependency injection system.

The book will try to cover the absolute minimum necessary for you to be able to build a simple FastAPI system, but along the way it will consider various web server solutions and deployment options (such as Deta, Heroku, and DigitalOcean) for your FastAPI Python-based backend, while trying to opt for free solutions.

So, to cut a long story short, you should consider choosing FastAPI because you ideally want the ability and speed to handle requests asynchronously as if you were using a Node.js server while having access to the Python ecosystem. Additionally, you want the simplicity and development speed of a framework that automatically generates documentation for you.

After reviewing the backend components, it is time to finalize your stack and work on the frontend. The next section gives you a brief introduction to React and discusses what distinguishes it from other (also valid) solutions.

The changes in the world of the web are most visible when talking about the frontend—the part of the website that is facing the users. Tim Berners-Lee made the first HTML specification public in 1991, and it consisted of text and under 20 tags. In 1994, CSS was introduced and the web started looking a little nicer. Legend has it that the new browser scripting language called Mocha was created in just 10 days—that was in 1995. Later, this language went through numerous changes and became what we know today as JavaScript—a powerful and fast language that, with the advent of Node.js, was able to conquer the servers, too.

In May 2013, React was presented in the US and the web development world was able to witness virtual DOM, one-way data flow, the Flux pattern, and more.

This is a bit of history to just try and provide some context and continuity because web development, like any other creative human activity, rarely moves in quantum leaps. Usually, it moves in steps that enable users to resolve the issues that they are facing. It would be unfair not to mention Vue.js, which is an excellent choice for building frontends that also sports an entire ecosystem of libraries, and Svelte.js, which offers a radical shift in building UIs in the sense that the UI is compiled, and the bundled size is significantly smaller.

Why use React?

Interactive, attractive, fast, and intuitive UIs are a necessity for any public-facing web application. It is possible, though very difficult, to achieve most or every functionality that even a simple web application is expected to provide using just plain JavaScript. FastAPI is more than capable of serving HTML (and static files, such as JavaScript or CSS) using any compatible templating engine (the most widely used in the Python world is probably Jinja2), but we and the users want more.

Compared to other frameworks, React is small. It isn’t even considered a framework, but a library— actually, a couple of libraries. Still, it is a mature product with over 10 years of development behind it, created for the needs of Facebook and utilized by the biggest companies such as Uber, X (formally known as Twitter), and Airbnb.

This book does not explore React in depth because we want to focus on how all the different parts of the FARM stack connect and fit within the bigger picture. Additionally, 81% of developers already use React2 and are familiar with its features, so we assume our readers have a level of familiarity with this framework already.

Most developers want a streamlined and structured way of building UIs. React enables developers to create dynamic applications in a much easier way by relying on JSX—a mix of JavaScript and XML that has an intuitive tag-based syntax and provides developers with a way to think of the application in terms of components that go on to form other, more complex, components, thus breaking the process of crafting complex UI and interactions into smaller, more manageable steps.

The main benefits of using React as a frontend solution can be summarized as follows:

• Performance: By using the React virtual DOM, which operates in memory, React apps provide smooth and fast performance.
• Reusability: Since the app is built by using components that have their own properties and logic, you can write out components once and then reuse them as many times as needed, cutting down development time and complexity.
• Ease of use: This is always a bit subjective but React is easy to get started. Advanced concepts and patterns require some level of proficiency, but even novice developers can reap immediate benefits just from the possibility of splitting the application frontend into components and then using them like LEGO bricks.

React and frameworks based on React empower you, as a developer, to create single-page applications that have a desktop-like look and feel, but also server-side rendering that is beneficial for search engine optimization. Knowing your way around React enables you to benefit from some of today’s most powerful frontend web frameworks such as Next.js, static site generators (such as Gatsby.js), or exciting and promising newcomers (such as React Remix).

In version 16.8, the React library introduced Hooks, which enable developers to use and manipulate the state of the components, along with some other features of React, without the need to use classes. This is a big change that successfully tackles different issues—it enables the reusability of stateful logic between components and simplifies the understanding and management of complex components.

The simplest React Hook is probably the useState Hook. This Hook enables you to have and maintain a stateful value (such as an object, array, or variable) throughout the life cycle of the component, without having to resort to old-school class-based components.

For instance, a very simple component that could be used to filter search results when a user is trying to find the right car might contain the desired brand, model, and a production year range. This functionality would be a great candidate for a separate component—a search component that would need to maintain the state of different input controls, probably implemented as a series of dropdowns. Let’s just see the simplest possible version of this implementation.

The following block of code creates a simple functional component with a single stateful string value—an HTML select element that will update the stateful variable named brand:

import { useState } from “react”;
const Search = () => {
const [brand, setBrand] = useState(“”);
return (
<div>
<div>Selected brand: {brand}</div>
<select onChange={(ev) => setBrand(ev.target.value)}>
<option value=””>All brands</option>
<option value=”Fiat”>Fiat</option>
<option value=”Ford”>Ford</option>
<option value=”Renault”>Renault</option>
<option value=”Opel”>Opel</option>
</select>
</div>
);
};
export default Search;

The bold line is where the Hook magic happens, and it must be within the body of a function. The statement simply creates a new state variable, called brand, and provides you with a setter function that can be used inside the component to set the desired value.

There are many Hooks that solve different problems, and this book will go over the following fundamental ones:

• Declarative views: In React, you do not have to worry about transitions or mutations of the DOM. React handles everything, and the only thing you have to do is declare how the view looks and reacts.
• No templating language: React practically uses JavaScript as a templating language (through JSX), so all you have to know in order to be able to use it effectively is some JavaScript, such as array manipulation and iteration.
• Rich ecosystem: There are numerous excellent libraries that complement React’s basic functionality—from routers to custom Hooks, external library integrations, CSS framework adaptations, and more.

Ultimately, Hooks provide React with a new way of adding and sharing stateful logic across components and can even replace (in simpler cases) the need for Redux or other external state management libraries. Most of the examples shown in this book make use of the Context API—a React feature that enables passing objects and functions down the component tree without the need to pass props through components that do not need it. Coupled with a Hook—the useContext Hook—it provides a straightforward way of passing and maintaining stateful values in every part of the app.

React uses (although it is not imperative) the newest features of functional JavaScript, ES6, and ES7, particularly when it comes to arrays. Working with React improves understanding of JavaScript, and a similar thing could be said of FastAPI and modern Python.

The final piece of the puzzle will be the choice of a CSS library or framework. Currently, in 2024, there are dozens of CSS libraries that play nice with React, including Bootstrap, Material UI, Bulma, and more. Many of these libraries merge with React to become meaningful frameworks of prebuilt customizable and parameterized components. We will use Tailwind CSS as it is simple to set up—and it is intuitive once you get the hang of it.

Keeping the React part to a bare minimum should allow you to focus more on the true protagonists of the story—FastAPI and MongoDB. You can easily replace React, should you wish to do so, be it Svelte.js, Vue.js, or vanilla handcrafted ECMAScript. However, by learning the basics of React (and Hooks), you are embarking on a wonderful web development adventure that will enable you to use and understand many tools and frameworks built on top of React.

Arguably, Next.js is the feature-richest server-side rendering React framework that enables fast development, filesystem-based routing, and more.

This chapter laid the background for the FARM stack, from describing the role of each component to their strengths. Now, you will be confident in choosing the FARM stack and you know how to implement it within the context of a flexible and fluid web development project. Since you’re reading this, I’ll assume that my case was compelling—that you’re still interested and ready to explore the FARM stack.

The next chapter will provide a fast-paced, concise, and actionable overview of MongoDB, and then set up your data storage layer for your FARM application. As you go along, we are confident that you will find the combination of FastAPI, React, and MongoDB to be the best choice for your next web application.