DWEC

Appearance

Herramientas y entorno de desarrollo ​

El desarrollo de aplicaciones web requiere diferentes herramientas para escribir, ejecutar, probar y depurar el código.

Durante el módulo utilizaremos principalmente:

  • Visual Studio Code como editor de código.
  • DevTools como herramientas de inspección y depuración del navegador.
  • Node.js como entorno de ejecución utilizado por nuestras herramientas de desarrollo.
  • npm para gestionar paquetes y dependencias.
  • nvm para gestionar versiones de Node.js.
  • Vite como herramienta de desarrollo y construcción de proyectos web.

Estas herramientas formarán nuestro entorno de desarrollo tanto para proyectos con Vanilla JavaScript como, posteriormente, con Vue 3.

Visual Studio Code ​

Visual Studio Code (VS Code) es un editor de código utilizado para desarrollar aplicaciones con diferentes lenguajes y tecnologías.

Entre sus funcionalidades encontramos:

  • Resaltado de sintaxis.
  • Autocompletado de código.
  • Navegación entre archivos.
  • Búsqueda y sustitución.
  • Terminal integrada.
  • Integración con Git.
  • Depuración.
  • Instalación de extensiones.

Un proyecto web puede abrirse directamente desde el terminal:

bash
code .

El punto . representa el directorio actual.

DevTools ​

Los navegadores actuales incorporan sus propias herramientas de desarrollo, conocidas habitualmente como DevTools.

Ya hemos utilizado algunas de ellas para explorar el navegador.

Entre las principales encontramos:

  • Elements: Permite inspeccionar y modificar temporalmente el HTML y CSS.
  • Console: Permite ejecutar JavaScript y consultar mensajes y errores.
  • Sources: Permite consultar el código y utilizar herramientas de depuración.
  • Network: Permite analizar las peticiones y respuestas de la aplicación.
  • Application: Permite inspeccionar almacenamiento y otros recursos.
  • Performance: Permite analizar el rendimiento de una aplicación.

Las DevTools permiten observar la aplicación mientras se está ejecutando en el navegador, por lo que serán una herramienta fundamental durante todo el módulo.

Node.js ​

Node.js es un entorno que permite ejecutar JavaScript fuera del navegador.

Podemos comprobar si está disponible utilizando:

bash
node --version

Y podemos ejecutar directamente un archivo JavaScript:

bash
node main.js

Sin embargo, en este módulo nuestro código de cliente se ejecutará principalmente en el navegador.

Utilizaremos Node.js sobre todo porque muchas de las herramientas actuales de desarrollo frontend funcionan sobre este entorno.

text
                 Desarrollo
                     │
                  Node.js
                     │
              npm / Vite
                     │
                     ↓
                 Proyecto
                     │
                     ↓
                 Navegador

INFO

Utilizar Node.js durante el desarrollo no significa que nuestra aplicación cliente se ejecute en Node.js.

Node.js ejecuta herramientas como Vite, mientras que el código de la aplicación cliente se ejecuta finalmente en el navegador.

Gestión de versiones con nvm ​

Los proyectos pueden requerir diferentes versiones de Node.js.

nvm (Node Version Manager) permite instalar y seleccionar diferentes versiones de Node.js en un mismo equipo.

Podemos consultar la versión activa:

bash
node --version

Y consultar las versiones instaladas mediante:

bash
nvm list

Para instalar una versión LTS podemos utilizar:

bash
nvm install --lts

Y seleccionarla:

bash
nvm use --lts

Archivo .nvmrc ​

Un proyecto puede indicar la versión de Node.js que debe utilizar mediante un archivo .nvmrc.

Por ejemplo:

text
22

Al entrar en el proyecto podemos seleccionar esa versión utilizando:

bash
nvm use

Esto facilita que diferentes desarrolladores utilicen una versión compatible de Node.js.

Versiones LTS

Las versiones LTS (Long Term Support) de Node.js reciben soporte durante un periodo prolongado y son habitualmente las recomendadas para trabajar en proyectos.

npm ​

npm es el gestor de paquetes utilizado habitualmente en el ecosistema Node.js.

Podemos comprobar su versión con:

bash
npm --version

npm permite, entre otras operaciones:

  • Instalar dependencias.
  • Actualizar dependencias.
  • Ejecutar scripts del proyecto.
  • Gestionar la información y configuración del proyecto.

Las dependencias de un proyecto se definen normalmente en el archivo:

text
package.json

Por ejemplo, después de descargar un proyecto podemos instalar sus dependencias mediante:

bash
npm install

Esta instrucción crea normalmente un directorio:

text
node_modules/

que contiene los paquetes utilizados por el proyecto.

WARNING

El directorio node_modules puede contener una gran cantidad de archivos y no debe almacenarse normalmente en el repositorio Git.

Las dependencias pueden volver a instalarse utilizando la información del proyecto y ejecutando npm install.

Vite ​

Vite es una herramienta de desarrollo para proyectos web modernos.

Nos proporciona, entre otras funcionalidades:

  • Un servidor de desarrollo.
  • Recarga rápida durante el desarrollo.
  • Gestión de módulos.
  • Procesamiento de recursos.
  • Construcción de la aplicación para producción.

Podemos crear un proyecto utilizando:

bash
npm create vite@latest

Vite permite seleccionar diferentes tecnologías.

Durante las primeras unidades utilizaremos proyectos de Vanilla JavaScript.

Posteriormente podremos utilizar la misma herramienta para crear proyectos con Vue 3.

text
Vite
├── Vanilla JavaScript
└── Vue 3

Proyecto con Vite ​

Una vez creado un proyecto, accedemos a su directorio:

bash
cd project-name

Instalamos sus dependencias:

bash
npm install

Y arrancamos el servidor de desarrollo:

bash
npm run dev

Vite mostrará una dirección local similar a:

text
http://localhost:5173/

Podemos abrirla en el navegador para ejecutar la aplicación.

Una estructura básica de proyecto puede ser:

text
project/
├── index.html
├── package.json
├── public/
└── src/
    └── main.js

La estructura exacta dependerá del tipo de proyecto y de su configuración.

Servidor de desarrollo ​

Durante el desarrollo no trabajaremos normalmente abriendo directamente index.html mediante una dirección file://.

Vite proporciona un servidor de desarrollo local que sirve nuestra aplicación mediante HTTP.

text
VS Code
   │
   ↓
Archivos del proyecto
   │
   ↓
Vite
   │
   ↓
Servidor de desarrollo
   │
   ↓
http://localhost:5173
   │
   ↓
Navegador

Cuando modificamos los archivos, Vite puede reflejar rápidamente los cambios en la aplicación durante el desarrollo.

Desarrollo y producción ​

Durante el desarrollo utilizamos:

bash
npm run dev

Cuando queremos generar una versión preparada para su despliegue utilizamos:

bash
npm run build

Vite procesa el proyecto y genera los archivos necesarios para producción.

Habitualmente se almacenan en un directorio:

text
dist/

Podemos distinguir así dos fases:

FaseObjetivoComando habitual
Desarrollo.Programar, probar y depurar la aplicación.npm run dev.
Producción.Generar los archivos que se desplegarán.npm run build.

Flujo de trabajo ​

El flujo habitual que utilizaremos durante el módulo será:

  1. Seleccionar la versión de Node.js necesaria.
  2. Instalar las dependencias del proyecto.
  3. Abrir el proyecto con VS Code.
  4. Iniciar el servidor de desarrollo con Vite.
  5. Abrir la aplicación en el navegador.
  6. Modificar el código desde VS Code.
  7. Comprobar los cambios en el navegador.
  8. Utilizar las DevTools para inspeccionar y depurar la aplicación.
text
VS Code
   │
   │ editar
   ↓
Código fuente
   │
   ↓
Vite
   │
   │ servir
   ↓
Navegador
   │
   ↓
DevTools
   │
   │ analizar / depurar
   └──────────────────> Código fuente

Este entorno nos permitirá utilizar un flujo de desarrollo similar tanto con Vanilla JavaScript como posteriormente con Vue 3.