/ javasccript

Que rayos es npm y como se usa en el frontend

Pequeña descripción para esos profesionistas que recién salieron de la roca, tienen más de 40 años ó simplemente son de esos que "solo hacen backend" con el lenguaje de toda su vida

node

Así es, empezaremos por node, este es sólo el entorno de ejecución de los comandos de JavaScript, digamos que es el intérprete, este usa la implementación de Chrome llamado V8

Entonces, con node podemos ejecutar JavaScript fuera del browser, por lo que podemos usarlo desde línea de comandos

npm

Npm es -muy descriptivamente- node package manager: Administrador de Paquetes de Node

Como su nombre lo indica, administra los paquetes de node, estos pueden ser usados de dos formas:

  • global - Realiza la instalación de los paquetes en todo tu ambiente local, esto quiere decir, que si intentas correr tu código en otro computador, es posible que no funcione
  • local - Utiliza el archivo package.json para indicar las características de la dependencia: el nombre y la versión

ejemplo backend

Supongamos que queremos hacer un backend de node con express

Primero hay que inicializar el proyecto de npm, esto va a crear un archivo inicial de package.json

# crear carpeta del proyecto
mkdir test
# vamos a la carpeta
cd test
# inicializamos el proyecto
npm init -y

Analizando el output

Wrote to ~/test/package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

El nombre del proyecto se iguala al del folder contenedor, la versión inicial se asume a 1.0.0, entre otras cosas, por ahora, no tenemos ninguna dependencia instalada, así que instalemos express localmente, esto no es una decisión aleatoria, dado que express es necesario para correr el software, no podemos asumir que todos los desarrolladores la tendrán instalada, por lo que es necesario indicar la dependencia en nuestro proyecto

# instalar localmente express
npm install --save express

Lo que hará este comando es ir por todos los archivos fuentes necesarios para correr la librería que instalamos, si listamos nuestro directorio notaremos que se ha generado un folder llamado node_modules, este será siempre excluído de los repositorios de código y se debe resolver en cada instalación

Ahora veamos la sección de scripts, básicamente los scripts son comandos de bash para ejecutarse, existen muchas herramientas que podemos utilizar para no tener que hacer todo un build script desde una sola línea, pero por ahora nos enfocaremos en su forma más simple

  "scripts": {
    "hello": "echo \"hello\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },  

Entonces, después de agregar el entry anterior hello, podemos correrlo de la siguiente forma: npm run hello

Sin embargo, hay un key de script que no requiere utilizar el subfijo run, este es start, así que lo más común es que hagas lo siguiente:

  "scripts": {
    "start": "echo \"starting the app\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },  

De tal manera que puedes correrlo como npm start

Sólo para completar el ejemplo, crearemos un archivo main.js con el siguiente contenido:

const express = require('express')

const app = express()

app.listen(8080, _ => console.log('listening on port 8080'))
app.use('*', (req, res) => res.json({ msg: 'hello' }))

Entonces, modificamos el script tal que: "start": "node main.js", finalmente lo corremos con npm start y podemos verificar que el servidor esté arriba desde localhost:8080

frontend

Bien, hasta ahora ya vimos como se crea un backend mock con el dichoso node, pero cómo y porqué c@$$jo se usa para el frontend?

Pues por el mismo hecho que es importante llevar las dependencias para el backend, el frontend, con tanto framework / librería / SDK, es mejor tenerlo administrado desde un lugar

Por ejemplo, imagina que el CTO escuchó que está muy bonito algo llamado react y que hay algo que se llama JavaScript polimórfico y como es una persona muy ocupada, te ha dejado a tí que revises como anda

Entonces, seguimos la misma mecánica:

  • Creamos el proyecto
  • Instalamos las dependencias
  • Agregamos un script para arrancar el proyecto

Y ya está, tienes tu ejemplito corriendo

No hacemos el ejemplo con el frontend porque realmente necesitamos más cosas, un servidor de desarrollo, configuraciones de recursos estáticos, generar un template, etc. El mundo del frontend se ha vuelto un tanto complejo, no? Y tú escribiendo las mismas queries con join separados por coma

changes-sql-query

Aún así, incluímos la referencia de crear una aplicación de react usando npm, con las bases mostradas aquí deberías ser capaz de levantar un ejemplo localmente