Code Quality

There are many software design principles and patterns that will help you build robust, professional software pieces.

Among others, these are considered the fundamentals, and it's important for you to understand them as they will help you build better software. Fortunately Angular embraces these principles and patterns and eases the process of building software.

Separation of concerns

A key principle of software development and architecture is the notion of separation of concerns. The general idea is that one should avoid co-locating different concerns within the design or code.

The value of separation of concerns is simplifying development and maintenance of software. When concerns are well-separated, individual sections can be reused, as well as developed and updated independently.

The design would be more maintainable, less tightly coupled, and less likely to violate the Don’t Repeat Yourself principle.

Don’t Repeat Yourself

The Don’t Repeat Yourself (DRY) principle states that duplication is waste. Adding additional, unnecessary code to a codebase increases the amount of work required to extend and maintain the software in the future.

Encapsulation

Encapsulation refers to the idea that objects should manage their own behavior and state, so that their collaborators need not concern themselves with the object’s inner workings.

Single Responsibility

The Single Responsibility Principle (SRP) states that a class should have only one reason to change.

Dependency Injection

Dependency Injection (DI) is a design pattern that demonstrates how to create loosely coupled classes. For more information read the oficial Angular guide on DI.

How does Angular fit in?

Angular helps you achieve all of these code quality principles.

Angular Components

Each component in Angular consist of a template (html), a set of stylesheets (sass / css) and some logic (typescript / javascript)

Angular Services

They orchestrate tidy communications within components, other services, and external resources like a backend API.

Enhanced with Reactive Programming (RxJs) they get even more powerful. For example, our implementation of the authentication workflow takes advantage of all these benefits and reacts to the user authentication state using Observables to change the navigation options in the top navbar (Login / Signup when the user is not logged in and Account / Logout when the user is logged in).

Angular Router

The Router helps you handle navigation flows and details like what data should be available for each route using Angular Route Resolves, the ability to define user permissions across the navigation tree using Angular Route Guards, etc.