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-apiTrazas 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?
Enterprise Angular con Nrwl
By Jesus Rodriguez
