Reading time 5 min

Kamen Zhekov

Today’s web applications and websites must be available 24/7 from anywhere in the world and have to be usable and pleasant to use from any device or screen size. In addition, they need to be secure, flexible and scalable to meet spikes in demand. In this blog, we introduce you to the modern web application’s architecture and we brush a bit on different back-end and front-end frameworks and how they work together. When people compare solutions used for building web applications and websites, there usually is a sort of pitting one against the other. Here, we will go against this flow and try to frame the differences, so that you can decide whether one, the other, or both fit the use case you have in mind. An essential concept that must be noted is that back-end frameworks, such as Flask or FastAPI , and front-end frameworks, such as React or Vue JS , are two fundamentally different technologies that solve different, although related, problems. Setting them against one another is therefore not a good approach. These days, when you are looking to build a slightly more complex web application or website solution, you often need solid frameworks that address bits of both front-end and back-end sides to achieve what you’re looking for. The specifics of your application will determine what those bits are and whether it’s worth investing in using only one of the two technologies, or both in tandem. Purpose of a back-end framework A back-end framework is the “brains” of your web application. It should take care of most, if not all, computation, data management and model manipulation tasks. Let’s take the example of FastAPI. While this back-end web framework is primarily used for developing RESTful APIs, it can also be applied for developing complete web applications if coupled with a front-end engine such as Jinja2. Using only FastAPI and some templating would be ideal if you want a standalone API for other developers to interact with. Another good purpose would be a website or web app that offers dashboards and insights on data inputs (charts based on files that you upload, etc.) without functionalities that depend on quick user interactions. Below you find an example of an application built entirely with a Python back end and Jinja2 as a templating engine. Click here to get some more information about the project, source code, etc. The issue you might find when creating a complete web app or website with FastAPI is that the entire logic of the program is pushed to the back-end, and the only job for the browser and the device on the client’s side is to render the HTML/CSS/JS response sent to it. The time between when the request from the browser is made for displaying something and when the user sees it, could then vary wildly based on a lot of factors. Think of server load, the speed of the user’s internet, the server’s memory usage or CPU efficiency, the complexity of the requested task, ... Purpose of a front-end framework So far, the back-end can take care of all the operations that we might want our web app to have, but there is no way for it to really interact with the user. A front-end framework takes care of the user experience - UI elements like buttons, a landing page, an interactive tutorial, uploading a file - basically any interaction with the user will go through the front-end framework. Taking a look at React or Vue JS — these are front-end frameworks for developing dynamic websites and single page applications. However, they need some back-end technology (like FastAPI, Flask or NodeJS) to provide a RESTful API so that what they show can be dynamic and interactive. Using only React would happen in situations where there are already existing data sources that you can interact with (public APIs, external data providers, cloud services, etc.) and all you want to create is the user interaction with those services. But we can already see here that, in theory, combining the strengths of a solid back-end framework – such as Flask, FastAPI, or NodeJS – with a good front-end framework is an option, and a very good one on top of that. Examples of that combination are the BBC World Service News websites rendered using a React-based Single Page Application with a NodeJS back-end (Express). Click here for a detailed breakdown of the project’s GitHub page. In these cases, front-end frameworks attempt to delegate some (or a lot) of the tasks of the back end to the client-side. Only the computationally heavy parts remain on the server, while everything that is left and fast to execute is done in the browser on the client’s device. This ensures a good user experience, “snappiness” and is basically a sort of decentralization of parts of the web application’s execution, lowering the load and responsibilities of the server. Combining the two 🤝 Today, the architecture of well-built and scalable web applications consists of a client-side framework that maintains a state, comprising a state of the user interface and a state of the data model. Those states represent respectively UI elements that form the visual backbone of an application, and data elements linked to what kind of data or models (for example a user) are used throughout the application. Any change in the data model state triggers a change in the UI state of the application. Changes in the data models are caused by either an event coming directly from the user (like a mouse click) or a server-side event (like the server saying there is a new notification for the user). Combining all these factors makes for a great user experience that gets closer to a desktop application rather than an old-school, sluggish website. Ready for more? In our next blog , we explain the strengths of Python and NodeJS, and how you should choose between them.

Reading time 6 min

Kamen Zhekov

Starting a new web project can be a daunting task with many different components to consider and to configure. For developers, having access to a starting point for building web apps, with all the necessary files and configurations already set up, can certainly come in handy. Not only does it save a lot of time and effort compared to when you need to build everything from scratch, it also increases productivity and makes customers happy because they can see tangible results much faster. At ACA Group, we do a lot of similar implementations and the following requirements are common to most web application projects: A great user experience: a fast, responsive and snappy frontend that is flexible enough to implement any sort of user interaction Reliable and performant processing: a solid database and backend solution that is easily extendable, testable, maintainable and understandable for any engineer User authentication and security: a robust and mature authentication server that also has SSO and user federation, and integrates with a lot of different providers Simple and secure deployment: yet easy to develop without too much overhead Our answer to these recurring requirements is a flexible software base that works out of the box. With a few lines in the terminal, you can spin up a new project that has all of the above functionalities in a basic state, waiting to be expanded and built upon. The figure below illustrates the base of the architecture we often use for small and medium-load web applications, and the different services that play a role. Of course, there are other components in play, but they are more often implemented on a case-by-case basis. Backend Let’s start with the brains of the web application – the backend. For our Python team, it is only natural to use this language to build the backbone of the application. FastAPI offers a lot of flexibility in terms of how you implement business logic and design patterns. It is also one of the highest performing backend solutions you can choose in Python; it has great documentation and is backed by a solid community. As a popular choice for projects involving data analytics, machine learning or AI, a Python backend makes it easier to bring cutting-edge technologies closer to the user. Frontend To design the user experience — or the frontend — we prefer Angular , a mature and well-explored JavaScript framework that is widely used throughout the industry. It is designed to easily create single-page, interactive web applications that can run in any modern web browser. Angular also has an established reputation for good performance and scalability, reducing the risk of running into scalability issues on larger projects. Another advantage is the fact that Angular is structured and looks a lot like backend code, making it easier to understand for non-frontend developers. Database and Storage For data storage, PostgreSQL is a widely-used and reliable database management system (DBMS) that is well suited for various applications, including web development. It is known for its performance, particularly when it comes to handling large amounts of data. It can process complex queries efficiently and has a reputation for scaling well as the size of the database increases. It is also feature-rich and has several options for indexing and query optimization. Security and Authentication Our secure authentication server is built on Keycloak , a mature IAM solution that helps organizations secure their applications and services. It is not only open-source, but also sponsored by the world’s enterprise open source leader RedHat. It provides a single access point for users to authenticate themselves and authorize access to various resources; and it supports a wide range of authentication mechanisms, such as username and password, two-factor authentication, and social login. Infrastructure The next piece of the Puzzle is NGinx , which orchestrates and distributes all incoming traffic across the services. It’s a powerful and flexible web server and reverse proxy often used to handle incoming client requests in a secure and high-performance manner. It is known for its ability to handle a large number of concurrent connections with low resource usage, and is particularly efficient when serving static content like images, CSS, and JavaScript files. Nginx can forward requests from clients to one or more services, easily directing traffic to the appropriate component of the web application and distributing the load across multiple servers or services, even if they perform the same role. This also means that all different services communicate exclusively through NGinx with SSL/TLS protocols, encrypting all traffic and securing sensitive data. Deployment Finally, Docker facilitates deployment and development. By containerizing the various components of the app, such as the backend or the database, it becomes much easier to deploy the app on different hosting environments. This is particularly important when clients have different requirements in terms of hosting machines, infrastructure, and so on. With Docker, the app’s services can be packaged in a standardized way and then deployed consistently in different environments. Docker also has benefits for managing the app in production. By placing components in containers, you can easily scale up or down, roll out updates and rollbacks, and monitor the health of the app. This can help to improve app reliability and maintainability over time. For developers, Docker also makes it easier to test the app in a variety of environments, collaborate with team members, and automate tasks like building, testing and deploying the app. Kickstart a new project 👊 The purpose of this architecture is to provide a starting point for building a web application with all the required components already configured. We’ve packaged it in a template that includes everything you need to get started, so you don’t have to build a starting architecture from scratch. Instead, you can use the template as a foundation and then customize it to fit your specific needs. To use this template, we’ve chosen a tool called Cookiecutter. It only needs to be installed once by the person setting up the initial repository to create a new project based on a template of the architecture above. As part of this process, a few values are asked in order to customize the template, such as the name of the project, the email address of the admin, what features you want to enable, etc. Once you’ve used Cookiecutter to create the project directory, it will contain everything you need to build and run the web application. To start working on the app, you can run a simple Docker command, and the web application will be up and running in no time. This enables live development on any part of the application with hot reload, and makes deployment as simple as a few clicks. Conclusion All things considered, a pre-built web application architecture like the one described in this blog can be a valuable tool for saving time and effort on any new project. By providing a solid foundation for building a web application, it can help teams get an MVP up and running quickly, without having to start from scratch. In addition to saving time and effort, the combination of the technologies above allow you to be confident that your app will be well-equipped to handle a wide range of needs.