Angular for
Enterprise

Architecture

Architecture Considerations

- Dan Wahlin

Feature Modules

devpato

Shared Code

2 kinds

App Shared Code

Projects Shared Code

devpato

App Shared Code

devpato

Libraries and Monorepos 

devpato

Angular Libraries

Where search-lib is the name of your library

ng generate library search-lib

devpato

Projects Shared Code

NPM Enterprise Registry

devpato

Wait what!!

devpato

Angular Libraries

PROS

  • Publish and share these libraries with other teams or projects.

devpato

Angular Libraries

CONS

  • Link your library to your main project and rebuild it for every change.
  • You will need to keep syncing your project with the latest version of the library.

devpato

Angular Monorepos

Monorepos are a source control pattern where essentially all the codebase lives in the same repository. All projects will always use the latest version of the code.

What is a Monorepo?

devpato

Angular Monorepos

  • Same library version for every app.
  • Ease of maintenance: when you update a shared library, you update it for all apps.
  • No conflicts between versions.

PROS

devpato

Where should I build my libraries?

  • Monorepos developers of a company are set to work on the same main project, no matter how large, use a monorepos.
  • If developers are set to work on different projects, teams, locations, and codebases, you may want to build each library in their own repository.

Be careful when using libraries

  • Every shared lib needs to have its own CI/CD pipeline.
  • Each CI/CD pipeline should handle versioning of changes.
  • Every time a new change happens in a shared repo, you need to go to all your projects using this library and update their npm packages.
  • There can be mismatches with different npm packages for angular projects.

devpato

Getting started with Nx

npm install -g @nrwl/schematics
npx create-nx-workspace@latest thisdot

Install Nx globally

Create a Nx Workspace

devpato

Creating an App

Add the capability to create Angular applications via:

ng add @nrwl/angular --defaults

Now create your Angular app

ng g @nrwl/angular:application employees

devpato

Nx Workspace structure

Angular apps go here

Libraries used by your Angular apps go here

devpato

Project structure

devpato

Getting started with Nx

devpato

Employee's Interface

In your command line

ng g @nrwl/workspace:lib employee

Go to libs/data/src/lib/employee.ts

export interface Employee {
  id: number;
  name: string;
}

devpato

Creating a UI Library

ng g @nrwl/angular:lib ui

devpato

Component in our Library

ng g component employee-list --project=ui --export

devpato

index.ts file

export * from './lib/ui.module';
export * from './lib/employee.service';

devpato

ui.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EmployeeListComponent } from './employee-list/employee-list.component';

@NgModule({
  imports: [CommonModule],
  declarations: [EmployeeListComponent],
  exports: [EmployeeListComponent]
})
export class UiModule {}

devpato

UI Libray

apps/employees/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { UiModule } from '@thisdot/ui';

@NgModule({
  declarations: [AppComponent],
  imports: [
    UiModule,
    HttpClientModule,
    BrowserModule,
    RouterModule.forRoot([], { initialNavigation: 'enabled' })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

devpato

app.component.html

<div class="employees-container">
  <img src="../assets/images/logotdm.png" />
  <h1>Employees</h1>
  <thisdot-employee-list 
  [employees]="employeeService.employees$ | async">
  </thisdot-employee-list>
</div>

devpato

Share assets

devpato

Share assets

"assets": [
             "apps/employees/src/favicon.ico",
              "apps/employees/src/assets",
            {
              "glob": "**/*",
              "input": "./libs/ui/src/lib/shared-assets",
              "output": "./assets"
            }
          ]

devpato

devpato

Lazy Loading

Lazy Loading

Type

E-V-E-R-Y  T-H-I-N-G

Typescript Entities

  • classes
  • enums
  • interfaces (and types)

devpato

NEVER USE ANY

tasks$: Observable<Task[]>;
tasks$: any;

tasks$: Observable<any[]>;

DO IT

DON'T IT 

devpato

RxJS

devpato

RxJS

  • Declarative approach.
  • Think reactive.
  • RxJS is your friend.

devpato

RxJS Declarative Approach

  • leverage the power of rxjs observables and operators.
  • effectively combine streams.

 

  • easy share observables.
  • readily react to user action.

devpato

RxJS Course on PluralSight

devpato

NgRx

devpato

Other tools to manage the state

devpato

SASS

https://slides.com/patriciovargas/sass/fullscreen

devpato

devpato


@import '../../../shared/sass/variables';
.search-results-page {
  width: 100%;
  margin-top: 16px;

  ::ng-deep {
    .ui-dataview {
      width: 1000px;
      height: 500px;
      a {
        &.ui-button {
          &.ui-state-active {
            background-color: $primary-green;
          }
        }

        &.ui-paginator-page {
          &.ui-state-active {
            background-color: $primary-green;
          }
        }
      }
      &-content {
        padding: 0;
      }
    }
  }
}

devpato

Angular Ivy

devpato

Component Libraries

devpato

Extensions

devpato

-Angular Snippets
-Angular Console
-Angular Schematics
-Prettier
-Auto Rename Tag
-Highlight Matching Tag
-HTML Snippets
-IntelliSense for CSS class names in HTML
-JavaScript (ES6) code snippets
-RxJs Snippets
-Paste JSON as Code

Angular Security

devpato

  • Keep current with the latest Angular library releases
     

  • Don't modify your copy of Angular
     

  • Avoid Angular APIs marked in the documentation as “Security Risk.”

https://angular.io/guide/security

Angular PWA

Other things to consider

  • NgFor Trackby

  • Subscribe in the view (async)

  • OnPush Change Detection

  • Angula Schematics

devpato

Game Time

Articles

Angular Libraries with Nx for Enterprise Apps
https://tinyurl.com/wt2kmqb

devpato

Angular Development in Enterprise
https://tinyurl.com/w5nv8pz

Angular Architecture
https://tinyurl.com/ycheksoa

Angular for Enterprise

By Patricio Vargas

Made with Slides.com

Angular for Enterprise

  • 251

More from Patricio Vargas