Enterprise Angular con Nrwl

Jesús Rodríguez (@Foxandxss)

Agenda

  • ¿Qué es enterprise y cómo lo hago?
  • Problemas comunes en proyectos enterprise
  • Monorepos
  • Demo 1
  • Solución propuesta
  • Demo 2
  • Consejos y trucos

¿Qué es Enterprise?

Un proyecto Enterprise más que por complejidad de dominio, sería un proyecto donde se involucran a muchas personas y muchas areas diferentes.

¿Qué problemas existen?

  • Proyectos con similitudes o diferentes plataformas
  • Diferentes herramientas
  • Versionado
  • Compartir código
  • INTEGRACIÓN

Monorepos

  • Proyectos similares bajo el mismo repositorio
  • Mismas versiones
  • Mejor integración
  • Permisos para distintas partes
  • Se pueden mezclar herramientas
  • Independencia entre partes de la app
  • Affected

Monorepo - Angular

¿Cómo conseguimos esto?

Nrwl - NX

Nx - Aplicaciones

  • App Angular
  • App React
  • App Nest
  • App Typescript
  • App Escritorio / Web / Móvil

Se pueden añadir extras si nos hiciera falta

Nx - Librerías

  • Feature Libraries
  • UI Libraries
  • Data-Access Libraries
  • Utility Libraries

¿Ventajas?

DEMO

Modo mock

// environment.mock.ts
mockServices: true

// app.module.ts
imports: [environment.mockServices ? MockServicesModule : []]

// https://github.com/angular/in-memory-web-api

Trazas del router

// environment.mock.ts
logRouter: false

// app-routing.module.ts
imports: [RouterModule.forRoot(routes, { enableTracing: environment.logRouter })]

Trazas HTTP

@Injectable()
export class LoggingHttpInterceptor implements HttpInterceptor {
  requestId = 0;

  constructor(private logger: LoggerService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return environment.logHttp ? this.interceptLogging(request, next) : next.handle(request);
  }

  private interceptLogging(request: HttpRequest<any>, next: HttpHandler) {
    const id = this.requestId += 1;

    this.logRequest(id, request);
    return next.handle(request).pipe(
      tap(response => this.logResponse(id, request, response)),
    );
  }

  private logRequest(id: number, req: HttpRequest<any>) {
    const m = `%c>>> (#${id}) ${req.method} ${req.url}`;
    const c = 'color: green; font-style: italic; font-weight: bold;';
    this.logger.log(m, c, req);
  }

  private logResponse(id: number, req: HttpRequest<any>, response: any) {
    const m = `%c<<< (#${id}) ${req.method} ${req.url}`;
    const c = 'color: blue; font-style: italic;';
    this.logger.log(m, c, response);
  }
}

Trazas Auth

private eventsSubject = new BehaviorSubject('Auth created');

...

this.events$ = this.eventsSubject.asObservable();

...

this.events$.subscribe(event => environment.logAuth && this.logger.log('Auth Tracing: ' + event));

...

logEvent(event: string) {
  this.eventsSubject.next(event);
}

Enlaces

¿Preguntas?

Made with Slides.com