Frontend Architecture

Este repositorio contiene un ejemplo de una arquitectura frontend para una SPA.

Explicaciones ms detalladas estrn disponibles en el libro Frontend Architecture de @iagolast

Work in progress

Ni el libro ni el repositorio estn terminados de momento.

Getting started

Pre-requisites

Node 20

Installation

npm install

Build for production

npm run build

Run for dev

npm run dev

Repo details

Dev tools

node: Permite ejecutar javascript typescript sin un navegador.
nvm: Permite instalar y usar diferentes versiones de node simultaneamente.
build:
- vite: Es una herramienta que permite construir y compilar el proyecto.
code style:
- Prettier: Es una herramienta que permite formatear el cdigo.
- Eslint: Es una herramienta que permite detectar errores o problemas potenciales en el cdigo.
testing:
- vitest: Es una herramienta que permite ejecutar tests
- testing-library: Permite ejecutar test interactuando con la app de forma similar a como lo hara un usuario.
- user-event: Permite simular a un usuario interactuando con la aplicacin.
- msw: Permite simular llamadas a servidores.

Libraries

TBD

Folder structure

.vscode: : Contiene configuraciones y opciones para VSCode.
- De esa forma todas las personas que trabajan en el proyecto, tienen la misma configuracin.
- extensions.json: Contiene las extensiones que se recomiendan para el proyecto.
- launch.json: Contiene la configuracin para debuggear el proyecto.
- settings.json: Contiene las configuraciones especficas del editor.
  - Por ejemplo, que al guardar se auto-organicen los imports y se formatee el cdigo.
node_modules: Contiene las dependencias npm del proyecto.
public: Contiene los archivos estticos del proyecto.
src: Contiene cdigo del proyecto.
.editorconfig: Es un archivo que sirve para que diferentes editores de cdigo se comporten de la misma forma.
- Por ejemplo, decidir usar tabuladores en lugar de espacios o aadir una linea al final de cada archivo.
.eslintrc.cjs: Es un archivo de configuracin de eslint.
- EsLint es una herramienta que sirve para detectar errores o problemas potenciales en el cdigo.
- Ejemplos: variables sin usar, o asignar en lugar de comparar (=) vs ===
.gitignore: Es un archivo que le dice a git que archivos o carpetas no debe subir al repositorio.
.nvmrc Es un archivo que le dice a nvm que versin de node debe usar.
- Es importante que todos los desarrolladores usen la misma versin de node para evitar problemas.
.prettierrc: Es un archivo de configuracin de prettier.
- Prettier es una herramienta que sirve para formatear el cdigo.
- A diferencia de EsLint, Prettier no detecta errores, solo formatea el cdigo.
index.html: Es la nica pgina HTML del proyecto.
package-lock.json: Contiene informacion exacta de las dependencias del proyecto.
package.json: Es un archivo que contiene informacin del proyecto y sus dependencias.
README.md: Es un archivo que contiene informacin til sobre el proyecto.
tsconfig.json: Es el archivo de configuracin de typescript.
tsconfig.node.json: Es el archivo de configuracin de typescript especfico para los comandos de node.
vite.config.ts: Es el archivo de configuracin de Vite. La herramienta que se usa para compilar el proyecto.
vitest.config.ts: Es el archivo de configuracin de Vitest. La herramienta que se usa para probar el proyecto.

SRC

En esta carpeta encontramos el cdigo del proyecto.

El punto de entrada es main.tsx que a su vez monta una aplicacin React App.tsx en el elemento root del index.html. Al tener App aislado podemos realizar tests unitarios que imitan casi perfectamente el comportamiento de usuarios interactuando con la aplicacin.

main.tsx: Punto de entrada de la aplicacin.
App.tsx: Componente padre de la aplicacin.
router.tsx: Contiene las rutas de la aplicacin (usando react-router).
assets: En esta carpeta se encuentran recursos estticos que pueden ser procesados por vitest.
types:: En esta carpeta encontramos los objetos de dominio de la aplicacin representados como tipos de typescript.
services:: En esta carpeta encontramos los servicios de la aplicacin.
- Los servicios representan los casos de uso de la aplicacin.
- Se implementan mediante funciones puras y nicamente dependen de los objetos de dominio.
client: En esta carpeta se encuentra el codigo del cliente que se encarga de comunicarse con el servidor.
- Tenemos un nico cliente que se encarga de comunicarse con el servidor.
- Las credenciales se extraen automticamente de localstorage y se aaden a cada peticin.
- Se utiliza Axios
repositories: En esta carpeta encontramos los repositorios de los recursos de la aplicacin.
- Un repositorio es una abstraccin que nos permite interactuar con un recurso.
  - Por ejemplo, un repositorio de usuarios nos permite obtener, crear, actualizar y borrar usuarios.
- Similar al patrn repositorio
queries: En esta carpeta encontramos las queries y las mutaciones de los recursos de la aplicacin.
- Podemos pensar en una adaptacin del patrn CQRS
- Una query es una dependencia declarativa de un recurso asncrono.
- Una mutacin es una funcin que contiene "efectos secundarios".
components: En esta carpeta encontramos los componentes que reutilizamos de forma global en la aplicacin.
pages: En esta carpeta encontramos componentes asociados a rutas (pgina)
- Por ejemplo auth.page.tsx es el componente asociado a la ruta /auth.
- Cada pgina tiene su propio directorio donde encontramos los siguientes archivos:
  - name.page.tsx: Componente de react que representa la pgina.
  - name.test.tsx: Tests unitarios del componente.
  - name.controller.tsx: Controlador de la pgina.
  - name.route.tsx: Informacin de la ruta.
  - components: En esta carpeta encontramos los componentes o pginas hijas que se usan en esta pgina.
    - si un componente se usa en ms de una pgina, se debe mover a la carpeta components de la aplicacin.
    - Este proceso se repite de foma recursiva.
    - Los imports hacia arriba estn prohibidos.
    - De esta forma podemos controlar el alcance de los cambios --> Cambios en una carpeta no afectan a sus hermanos.
      - En el ejemplo cambios en /pages/auth/dashboard/ no afectan a /pages/auth/login/