Angular para
Enterprise

Arquitectura

Cosas a considerar

Feature Modules

devpato

Codigo Compartido

2 tipos

Codigo compartido por app

Codigo Compartido en proyectos

devpato

Codigo compartido por app

devpato

Librerias y monorepos

devpato

Librerias de Angular

donde search-lib es el nombre de tu librerias

ng generate library search-lib

devpato

Codigo compartido en projectos

Registro de NPM en Enterprise

devpato

cool!

devpato

Librerias de Angular

lo bueno

  • Publica y comparte estas librerias con otros equipos o proyectos.

devpato

Librerias de Angular

lo malo

Actualiza tu proyecto con la version nueva de tu libreria

Mantener tu proyecto actualizado con la ultima version de la librerias

devpato

Angular Monorepos

Monorepos es una forma de construir aplicaciones donde todo tu código vive bajo el mismo repositorio. Todos tus proyectos van a utilizar las misma version de código.

Que es un Monorepo?

devpato

Angular Monorepos

La misma version de librerias para todas las apps.

Facil de mantener tus aplicaciones que utilizan librerias

No conflictos entre tus versiones de librerias

lo bueno

devpato

Donde construir mis librerias?

  • Monorepos.
  • Repositorio

Cuidado usando librerias

  • Cada librarias debe tener su CD/CI individual
  • Cada CI/CD debería manejar las version de la librerias
  • Asegurase que utilizas la version correcta de la libreria

devpato

Empezando con Nx

npm install -g nx
npx create-nx-workspace@latest thisdot

Instala Nx Globalmente

Crea una Nx Workspace

devpato

Creando una App

Agrega la habilidad de crear aplicaciones de Angular en NX:

ng add @nrwl/angular --defaults

Now create your Angular app

ng g @nrwl/angular:application employees

devpato

Estructura de Nx Workspace

Las apps de Angular

Bibliotecas usadas por Angular

devpato

Estructura del proyecto

devpato

Empezando con Nx

devpato

Interface de los Empleados

En tu linea de comando

ng g @nrwl/workspace:lib employee

Ve a libs/data/src/lib/employee.ts

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

devpato

Creando una biblioteca de UI

ng g @nrwl/angular:lib ui

devpato

Un componente en la biblioteca

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

devpato

El archivo index.ts

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

Biblioteca UI

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

Activos compartidos

devpato

Activos Compartidos

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

devpato

devpato

Tutorial

https://tinyurl.com/wt2kmqb

Lazy Loading

Lazy Loading

devpato

Angular Ivy

devpato

https://www.telerik.com/blogs/first-look-angular-ivy

Seguridad en Angular

devpato

  • Manten tus versiones de Angular actualizadas
     

  • No modifiques Angular en tu proyecto
     

  • Evita APIs en tu proyecto que Angula marco como “Security Risk.”

https://angular.io/guide/security

Seguridad en Angular

devpato

https://auth0.com/docs/quickstart/spa/angular2

Otras cosas a considerar

  • NgFor Trackby

  • Subscribirte en las vistas (async)

  • Detección OnPush Change

  • Esquemas Angular

devpato

NgRx

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;
      }
    }
  }
}

Checa mi articulo

https://tinyurl.com/w5nv8pz

Angular para Enterprise

By Patricio Vargas

Made with Slides.com

Angular para Enterprise

  • 125

More from Patricio Vargas