Aplicaciones full stack con Angular, NestJS y Nx

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@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.

Slide 3

Slide 3 text

@brolag Pero... ¿por qué?

Slide 4

Slide 4 text

@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

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

@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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@brolag Nuestras herramientas

Slide 9

Slide 9 text

@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.

Slide 10

Slide 10 text

@brolag NestJS

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@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

Slide 14

Slide 14 text

@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.

Slide 15

Slide 15 text

@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.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

@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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@brolag Configurando nuestro espacio de trabajo

Slide 22

Slide 22 text

@brolag Configurando nuestro espacio de trabajo

Slide 23

Slide 23 text

@brolag Configurando nuestro espacio de trabajo

Slide 24

Slide 24 text

@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.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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