Aplicaciones full stack con Angular, NestJS y Nx

FULL-STACK APPLICATIONS USING ANGULAR, NESTJS AND NX Alfredo Bonilla -
@brolag Web Practice Lead - Gorilla Logic Co - Organizer - Angular Costa Rica # N G C O N F H O N D U R A S 2 0 2 1

@brolag Objetivo Construir una aplicación utilizando TypeScript tanto en el
front end como en el back end y poder compartir código entre ambas partes.

@brolag Pero... ¿por qué?

@brolag Repasemos algunos problemas comunes... Historias de usuario que requieren
trabajo en distintas partes del stack Problemas de comunicación entre desarrolladores back end y desarrolladores de interfaces Alta carga cognitiva para nuevos desarrolladores en el equipo

@brolag Más problemas.... Dificultad a la hora de mantener dependencias
Código repetido en varias partes del stack Diferentes esquemas de buenas prácticas

@brolag La solución Encontrar la manera de poder utilizar los
mismos patrones, lenguajes, paquetes y experiencia tanto en el back end como en el front end.

@brolag Descargo de responsabilidad ⚠ No debemos aplicar una única
solución para todos los proyectos. El martillo dorado es nocivo para la salud.

@brolag Nuestras herramientas

@brolag NestJS Nest.js es un framework de Node.js bastante robusto
que combina elementos de OOP, programación funcional y programación funcional reactiva. Es decir, tiene baterías incluídas justo de la misma manera que nuestro viejo amigo Angular.

@brolag NestJS

@brolag Ventajas Contamos con una estructura robusta y dogmática para
nuestras aplicaciones de Node.js Podemos utilizar patrones muy similares tanto en el front end como en el back end Es más sencillo inlcuir a nuevos miembros a nuestro equipo de desarrollo

@brolag Más ventajas Podemos aplicar un cojunto de buenas prácticas
uniforme para el front end y el back end Tenemos TypeScript por defecto Eventualmente podemos compartir dependencias y tipos en caso de que nuestro proyecto crezca en complejidad

@brolag Mono Repos Cuándo existen muchos proyectos en una organización
y existen varios equipos trabajando entre sí es complicado mantener al día distintos repositorios con sus respectivas dependencias

@brolag Mono Repos Implementar una estrategia de mono repositorio nos
va a permitir centralizar el código de nuestras diferentes aplicaciones un único repositorio permitiendo así compartir código entre nuestras aplicaciones.

@brolag ¿Por qué utilizar un mono repo? Facilidad para compartir
código entre aplicaciones. Un mejor manejo de dependencias a lo largo de distintos proyectos así como la compatibilidad de sus versiones. Permite mayor fluidez en el trabajo entre distintos equipos.

@brolag Pero recordemos... ⚠ Nunca debemos aplicar una solución sin
antes tener un problema. La sobreingeniería también es una mala práctica.

@brolag ...y con ustedes: ¡Nx!

@brolag Nrwl Nrwl es una compañía de consultoría fundada por
Jeff Cross y Vctor Savkin, ambos ex- Googlers.

@brolag Nx Nx es un conjunto de herramientas diseñadas para
el manejo de mono repositorios, esta basada en Angular Schematics, por lo tanto no solamente ofrece una estructura robusta para matener el código de nuestros distintos proyectos sino que además es bastante potente a la hora de generar código repetitivo

@brolag Configurando nuestro espacio de trabajo npx create-nx-workspace@latest

@brolag Configurando nuestro espacio de trabajo

@brolag Creando un API con NestJS Si ejecutamos el comando
nx list podremos observar las distintas opciones que nos ofrece Nx para generar código.

@brolag Añadiendo la capacidad para NestJS yarn add --dev @nrwl/nest

@brolag Creando un API con NestJS npx nx g @nrwl/nest:app
api --frontendProject=books-ui

Ahora podemos ver nuestro espacio de trabajo conteniendo el código
de un api NestJS. Además de esto tenemos una configuración de proxy creada automáticamente. @brolag Creando un API con NestJS

npx nx g @nrwl/workspace:lib data @brolag Compartir código entre aplicaciones

@brolag Demo https://github.com/brolag/fullstack-angular-nest-nx

APLICACIONES FULL STACK CON ANGULAR, NESTJS Y NX Gracias por
su atención # N G C O N F H O N D U R A S 2 0 2 1

Aplicaciones full stack con Angular, NestJS y Nx

Aplicaciones full stack con Angular, NestJS y Nx

Alfredo Bonilla

More Decks by Alfredo Bonilla

Other Decks in Programming

Featured

Transcript

FULL-STACK APPLICATIONS USING ANGULAR, NESTJS AND NX Alfredo Bonilla -

@brolag Objetivo Construir una aplicación utilizando TypeScript tanto en el

@brolag Pero... ¿por qué?

@brolag Repasemos algunos problemas comunes... Historias de usuario que requieren

@brolag Más problemas.... Dificultad a la hora de mantener dependencias

@brolag La solución Encontrar la manera de poder utilizar los

@brolag Descargo de responsabilidad ⚠ No debemos aplicar una única

@brolag Nuestras herramientas

@brolag NestJS Nest.js es un framework de Node.js bastante robusto

@brolag NestJS

@brolag Ventajas Contamos con una estructura robusta y dogmática para

@brolag Más ventajas Podemos aplicar un cojunto de buenas prácticas

@brolag Mono Repos Cuándo existen muchos proyectos en una organización

@brolag Mono Repos Implementar una estrategia de mono repositorio nos

@brolag ¿Por qué utilizar un mono repo? Facilidad para compartir

@brolag Pero recordemos... ⚠ Nunca debemos aplicar una solución sin

@brolag ...y con ustedes: ¡Nx!

@brolag Nrwl Nrwl es una compañía de consultoría fundada por

@brolag Nx Nx es un conjunto de herramientas diseñadas para

@brolag Configurando nuestro espacio de trabajo npx create-nx-workspace@latest

@brolag Configurando nuestro espacio de trabajo

@brolag Configurando nuestro espacio de trabajo

@brolag Configurando nuestro espacio de trabajo

@brolag Creando un API con NestJS Si ejecutamos el comando

@brolag Añadiendo la capacidad para NestJS yarn add --dev @nrwl/nest

@brolag Creando un API con NestJS npx nx g @nrwl/nest:app

@brolag Creando un API con NestJS npx nx g @nrwl/nest:app

Ahora podemos ver nuestro espacio de trabajo conteniendo el código

npx nx g @nrwl/workspace:lib data @brolag Compartir código entre aplicaciones

npx nx g @nrwl/workspace:lib data @brolag Compartir código entre aplicaciones

@brolag Demo https://github.com/brolag/fullstack-angular-nest-nx

APLICACIONES FULL STACK CON ANGULAR, NESTJS Y NX Gracias por