The complete guide to designing, developing, testing, and deploying enterprise applications with Angular

Angular Applications Architecture

Requirements and FAQs

Code style guide

Introduction

Start from the domain

Software architecture for Front-end

Domain, design, develop

Workspaces scenarios

Applications and Libraries

Mono repository multi project

Domain boundary with plain TypeScript

Application details with Angular

Presentational details with Angular

Domain boundary and application details

Testing big Angular solutions with ease

Narrow tests for business logic

Visual tests for the presentation layer

Wide tests for the user experience

Testing since the beginning

Configuration environment and tokens

Instrumentation measuring and logging

Security authentication and authorization

Core generic infrastructure

A library for your shared UI vocabulary

A set of basic atomic elements

Some generic composed blocks

User interface, a design system foundation

Reactive stores with Signals

API access as a commodity

Interceptors for the dirty job

Data stores, reactive access, and persistence

Features come in routes to pages

Anatomy of a Page control flow and services

Different levels of state management

Routes and pages

In this course we teach you how to design, develop, ane deploy enterprise level Angular Applications the right way. Despite the fact that Angular is an opinionated framework, specially suited to build large solutions, it requires a deep knowledge to take decisions at every step.

In almost 30 lessons we cover how to choose and use the correct tools, how to structure an application that scales and how to code some intricate solutions to common problems. It's a long course/book and comes with a complete working codebase fully tested.

It is taught by Alberto Basalo who has been working, advising, and training multinational corporations, banks, and public administrations in Angular for years.

The complete guide to design, develop, test, and deploy enterprise applications with Angular

How to design, develop and deploy big enterprise applications with Angular.

Best practices to organize your code in small reusable libraries.

Application of reactive flow patterns for better user and developer speed.

Leverage the latest Angular version features like stand-alone components.

Common functionality for any application ready to use.

 to build; now it’s time to think about 

.  What is the best architecture for the project? How do we organize our code? How do you make it compliant with all the 

 of professional systems: reusable, testable, maintainable, scalable, and extensible?

Those many questions lead us to one fundamental doubt: 

 Among many other definitions, I am concerned and like this one from 

"Architecture represents the significant 

 that shape a system. Where significant is measured by 

. It is a good starting point because every decision we take will come with visible implementation costs and hidden maintenance costs.

We have outlined a bunch of questions. For each one, there would be several answers with no correct one. I can not tell you 

 for your application, but I will try to give you some options you need to know and understand.

So, let`s start with the most common architectures for front-end applications without going too deep or too formal, just the minimum to have a common language and understanding.

The three-layer architecture is typical for any medium-sized application and is frequently chosen for the front end. And it is for a good reason: it is simple and works. Easy to understand, easy to implement.

 phase for long-term uses. The important thing is the concept of layers. Each layer has a 

 with inner layers (helping to determine flows). All in one, it avoids two common problems: 

Let's have a short but ordered walk through the three layers.

The presentation layer is responsible for 

. The name comes from the fact that it presents the data and the actionable controls the human in charge uses to manipulate it. 

As the user experience is most likely to change (product and design guys know why), this layer is the most volatile, which is a problem because it is also the most visible for good or bad. In a front-end application (web, desktop, mobile, etc.), this is the layer that the user loves or hates, so you better take care of it.

In Angular, this layer corresponds to the declarative part, including 

If we were talking of a back-end application, this would be 

. This layer usually has less attention in a front-end application, but it is quite important for long-term applications, as we will see.

Formally speaking, it is the layer that contains 

. So, if I have started this book from the domain, you can imagine how vital BLL is to me.

 implementing or calling business policies and entities in this middle layer. 

Finally, deep down, we find the data access layer. It is the one that is in charge of 

. Here, we encapsulate the knowledge to read or write to the database, the local storage, and even the file system! However, the most common case will be a humble client of a Rest API.

 is the most common tool for this layer, but you can do well using any other library like Axios.

---
title: Software architecture for Front-end
isPublicLesson: true
useMdx: false
---

# Software architecture for Front-end.

### What you will learn in this lesson.

In the past lesson, we worked on _what_ to build; now it’s time to think about **how to make it**.  What is the best architecture for the project? How do we organize our code? How do you make it compliant with all the _"ables"_ of professional systems: reusable, testable, maintainable, scalable, and extensible?

Those many questions lead us to one fundamental doubt: **What is software architecture?** Among many other definitions, I am concerned and like this one from _Grady Booch_.

> "Architecture represents the significant **design decisions** that shape a system. Where significant is measured by **the cost of change**."

It relates decisions with costs, i.e., **tradeoffs**. It is a good starting point because every decision we take will come with visible implementation costs and hidden maintenance costs.

We have outlined a bunch of questions. For each one, there would be several answers with no correct one. I can not tell you _"what is the best architecture"_ for your application, but I will try to give you some options you need to know and understand.

So, let\`s start with the most common architectures for front-end applications without going too deep or too formal, just the minimum to have a common language and understanding.

## The Three Layers Architecture.

The three-layer architecture is typical for any medium-sized application and is frequently chosen for the front end. And it is for a good reason: it is simple and works. Easy to understand, easy to implement.

It comes from the old _input-process-output_ model with the addition of a _storage_ phase for long-term uses. The important thing is the concept of layers. Each layer has a **specific responsibility** (helping to organize the code) and **explicit dependencies** with inner layers (helping to determine flows). All in one, it avoids two common problems: _spaghetti code_ and _repeated code_.

Let's have a short but ordered walk through the three layers.

### The Presentation layer.

The presentation layer is responsible for **user interaction**. The name comes from the fact that it presents the data and the actionable controls the human in charge uses to manipulate it. 

As the user experience is most likely to change (product and design guys know why), this layer is the most volatile, which is a problem because it is also the most visible for good or bad. In a front-end application (web, desktop, mobile, etc.), this is the layer that the user loves or hates, so you better take care of it.

In Angular, this layer corresponds to the declarative part, including `Components, Directives, and Pipes`.

### The Business logic layer.

If we were talking of a back-end application, this would be _The Layer_. This layer usually has less attention in a front-end application, but it is quite important for long-term applications, as we will see.

Formally speaking, it is the layer that contains **the business logic, the domain model**. So, if I have started this book from the domain, you can imagine how vital BLL is to me.

We will find the Angular `Injectable services` implementing or calling business policies and entities in this middle layer. 

### The Data access layer.

Finally, deep down, we find the data access layer. It is the one that is in charge of **storing information**. Here, we encapsulate the knowledge to read or write to the database, the local storage, and even the file system! However, the most common case will be a humble client of a Rest API.

The Angular `HttpClient` is the most common tool for this layer, but you can do well using any other library like Axios.

![Application Layers](https://d2uusema5elisf.cloudfront.net/courses/angular-applications-architecture/module_02/lesson_02.02/public/application-layers.png)

## The Clean Architecture.

There are multiple evolutions of the three-layer architecture. A bunch of them are grouped under the concept of _clean_ architecture. Some variations exist (_onion, port adapters, hexagonal_), but still, the core is the same: you must **separate your domain logic and be completely independent** of the rest of the application.