Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Aplicaciones full stack con Angular, NestJS y Nx

Aplicaciones full stack con Angular, NestJS y Nx

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

March 06, 2021
Tweet

Transcript

  1. 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
  2. @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.
  3. @brolag Pero... ¿por qué?

  4. @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
  5. @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
  6. @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.
  7. @brolag Descargo de responsabilidad ⚠ No debemos aplicar una única

    solución para todos los proyectos. El martillo dorado es nocivo para la salud.
  8. @brolag Nuestras herramientas

  9. @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.
  10. @brolag NestJS

  11. @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
  12. @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
  13. @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
  14. @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.
  15. @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.
  16. @brolag Pero recordemos... ⚠ Nunca debemos aplicar una solución sin

    antes tener un problema. La sobreingeniería también es una mala práctica.
  17. @brolag ...y con ustedes: ¡Nx!

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

    Jeff Cross y Vctor Savkin, ambos ex- Googlers.
  19. @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
  20. @brolag Configurando nuestro espacio de trabajo npx create-nx-workspace@latest

  21. @brolag Configurando nuestro espacio de trabajo

  22. @brolag Configurando nuestro espacio de trabajo

  23. @brolag Configurando nuestro espacio de trabajo

  24. @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.
  25. @brolag Añadiendo la capacidad para NestJS yarn add --dev @nrwl/nest

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

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

    api --frontendProject=books-ui
  28. 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
  29. npx nx g @nrwl/workspace:lib data @brolag Compartir código entre aplicaciones

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

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

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