Angular Architecture

Converging Concepts & Practices

echo `whoami`

M. Ahsan Ayaz

Software Architect

Key Concepts We'll Talk About

  • Architectural Considerations
  • Structuring Modules
  • Organizing Components
  • Reusing Components
  • Organizing Features

But WHY?

Planning

Prevents

Poor

Performance

Lack of planning

Architecture Considerations

App Overview

App Features

Server Communication

Logging

State Management

Shared Functionality

Considerations based on your team/organization

Unit Testing

E2E Testing

CDN Server for Static Assets

CI/CD

i18n

Environments

Organizational Challenges

Consistency

Code
Reusability

Maintainability

Pro Tip:

Angular Style Guide will help you understand how to:

  • Organize Modules
  • Use Angular Life Cycle Hooks
  • Follow consistent naming conventions
  • Create and use Services
  • Create and use Components
  • Follow a scalable project structure

Let

The Fun

Begin

git checkout step-1

npm install

ng serve -o

ng new marvel-heroes --routing --style scss --prefix mh

A look at the CLI command used to create the project

Question!

What is a CoreModule usually?

CoreModule

  • Can contain Global Services (only provided once in the project)
  • Can contain the core layout/components for the app which are not supposed to be re-usable/shared
  • Can contain interceptors/guards etc

Consistency

Pro Tip:

Use Editorconfig
for code consistency

Let's have another look at the project

Boosting App's Performance

git checkout step-2

Lazy Load Routes

git checkout step-2-final

Use Components Smartly

Smart Components

Dumb Components

  • Contain business logic
  • Can have data manipulation
  • Are just used for Presentation
  • Should only depend on the @Input()s

Use OnPush Strategy

git checkout step-3

App Structure and Organizing Modules

Follow LIFT

LIFT

  • Locate the code intuitively and fast.
  • Identify by the name of the file what it contains and represents
  • Flatten the project structure as long as possible
  • Try to be DRY

Always structure your app so that you can:

Organizing Features

Create Self Contained Features

  • Multiple teams can be assigned to their on feature modules
  • Teams can work without pushing breaking changes to other modules that other teams may be working on.

Share if you care

Identify the components that will be used in multiple modules. Have them declared such that they're shareable.

git checkout step-4

Reusing a component in different modules

git checkout step-4-final

Challenge!

if we got enough time

Thank You !

Software Architect

Modus Create

Angular Architecture - Concept and Overview

By Ahsan Ayaz

Angular Architecture - Concept and Overview

The session/workshop will teach you about Angular Architecture's best practices and patterns that you can use in your daily Angular projects.

  • 281
Loading comments...

More from Ahsan Ayaz