Introducción al web frontend

LA "web 2.0" se denomino a la extensa carga dinamica (paginas web con resultados basados en la interaccion del usuario), todo esta "magia es gracias al javascriupt... Pero JavaScript se adoptó ampliamente y necesitó un sistema de módulos para permitir el diseño de códigos modulares. El objeto global era/es propenso a errores y simplemente malo. 

De los creadores de javascrip nacio Nodejs, despues se integro NPM, con la creciente oleada se creo el browserfy, despues llegaron los bundlers como gulp y grunt, y finalmente tenemos hoy dia el webpack.

¿QUE ES NODEJS?

Node.js es un entorno de tiempo de ejecución que incluye todo lo que se necesita para ejecutar un programa escrito en JavaScript. Los creadores de js, hicieron que cualqueir codigo javascript en vez de requerir un navegador web se pudiese definir e incluso ejecutar como si de un aplicativo local.

Si desarrollas en php, java, net, nodejs.. es otro mas paralelo .. tal como por ejemplo hace php que puede ejecutar su servicio con “php -S localhost:3000” nodejs puede lo mismo con “npx http-server” o sino definiendo los parametros con un “app.js” y ejecutando “node app.js” segun el puerto que se defina.

¿Si tengo php, java etc, para que sirve nodejs?

Actualmente porque el popular npm viene consigo.. es la razon mas rapida, sin embargo..

Node.js utiliza un modelo de entrada (request) y salida (response) sin bloqueo controlado por eventos.

La finalidad de Node.js es en la creación de aplicaciones de red rápidas, ya que es capaz de manejar una gran cantidad de conexiones simultáneas con un alto nivel de rendimiento, lo que equivale a una alta escalabilidad, mas no programar operaciones pesadas como vonvertir un video 4k como ejemplo extremo, sino manejar 4 milllones de peticiones de 30kilobytes como ejemplo exacto, a esta cantidad de entradas respondera rapido todas las respuestas, cosa que en un servidor web producira bloqueos por todos los procesos internos que involucra.

¿Qúe es NPM?

NPM es un gestor de paquetes para Javascript. Es una especie de Maven (si usas Java te sonará) para paquetes Javascript, es decir, sirve para instalar y gestionar versiones de paquetes y librerías js.

NPM lleva mucho tiempo siendo el referente en cuanto a gestores de paquetes javascript, pero desde hace un tiempo le ha salido un competidor: Yarn.

¿Qúe es YARN?

El gestor de librerías js, es mucho más rápido y potente, pero sucede lo mismo que con whatapps vs telegram, el primero es muy malo pero la gente comun ya lo tine y ni sabe como es realmente.

Ironicamente, uanque yarn es mas rapido y seguro, depende de nodejs, asi que con tener nodejs ya tienes npm, lo cual ahorra mucho tiempo de aprendizaje y evita complicaciones.

Tree Shaking

Término base en la modularizacion de codigo, Se analiza los módulos (codigos js usados) en busca de imports y exports y cuando encuentra algún módulo que importa o exporta contenido y no es usado, lo descarta para evitar tener código muerto y gasto de recursos. Se basa en la estructura estática de la sintaxis del módulo ES2015 (alias harmony modules), es decir, importar y exportar. El nombre y el concepto han sido popularizados por el paquete acumulativo de módulos ES2015.

Su comprension en necesaria y base para la fabricacion de los “bundlers” los cuales son usados para producir CSS/JS para produccion.

BUNDLERS y modulos js

Se modulariza el codigo JS, en diferentes ficheros, de forma que cada fichero tenga una sola responsabilidad, y se usan con los imports de ES6, estos se organizan empleadon la tecnica de Tree shaking y Dynamic imports.

Los bundlers es empaquetar módulos (multiples fuentes) de JavaScript en un solo archivo. Los CDN son un ejemplo de esto. Pero son herramientas que los desarrolladores de frontend utilizan para empaquetar módulos de JavaScript y estos ejecutarse en el navegador (en vez de a mano en tu web). En resumen, mas todos los JS y CSS y generan un solo JS y/o CSS organizando el codigo comun. Hoy dia tenemos webpack, rollup, fusebox, parcel, etc

• JavaScript crecio demasiado, mucho codigo, y necesito ser modular, usar variables globales era propenso a sobreescrituras, produciendo errores.

• El paquete de módulos nos ayudó a combinar varios módulos de JavaScript en un archivo de JavaScript, e incluso ordenar la manera en que se cargan variables y porciones de codigo.

• Se definieron algunos: CJS y AMD aunque tambien UMD.

  • CJS (CommonJS) síncrona destinada a JavaScript del lado del servidor., como nodejs por ejemplo.

  • AMD (Asynchronous Module Definition) asíncrono destinado al navegador, como RequireJS por ejemplo.

  • UMD (Universal Module Definition). código JavaScript comun en las cabecerqas que permite cargar fuentes js no importa su ancla, sea al incio o final.

La mayoría de los paquetes de hoy en día tienen características muy similares. La única característica que varía entre ellos es árboles “shaking” CJS / ES. De todos los paquetes, Webpack tiene el soporte incorporado más consistente para árbol de los módulos ES y CJS. Google tiene el mas maduro.. pero es complicado de isnstalar.. pro ello todos hoyo ya adoptaron Webpack ya que rollup no tiene este feature muy maduro.

• webpack:

  • utiliza el mapa de módulos

  • utiliza la función de envolver cada módulo

  • tiene un código de tiempo de ejecución que pega el módulo entre sí

• rollup:

  • un paquete más plano y más pequeño

  • no utiliza la función de envolver el módulo

  • El orden importa, requiere una clasificación basada en la dependencia

  • la dependencia circular puede no funcionar

¿QUÉ ES WEBPACK?

Es un Module Bundler que permite exportar tus módulos a archivos estáticos como javascript, css, etc, haciendo que sea posible pasar el código del servidor al navegador. Asimismo, permite hacer tareas similares a Gulp, lo cual nos deja concluir que WebPack es el siguiente paso a browserfy y Gulp. Webpack depende de nodejs y se instala con npm.

Webpack, Tree Shaking y Dynamic imports

Es que Webpack no puede saber a priori si el dynamic import va a llegar a ser usado en algún momento, por lo que en esos casos no puede aplicar Tree Shaking y no puede descartar dynamic imports que no vayan a ser usados jamás. POR ENDE AL USAR WEBPACK HAY QUE TENER CLARO QUE SE USARA Y EN QUE MODO.

¿Que es Grunt?

Programa para automatizar tareas repetitivas como la compilación de css, la ejecución de test, en un fichero “grunfile.js” se definen estas y con un comando las ejecutamos. Esto es definir cadenas de tareas, si una rompe la otra no sigue. Depende de nodejs y se instala con npm.

¿Que es Gulp?

Programa para automatizar tareas de desarrollo, no solo tareas comunes repetiivas, se basa de pipe (tuberías de Unix) en un fichero la entrada “default” hacia mas entradas vez de ir encadenando tareas, por ello modificar el flujo es sencillo y además el código resultante es muy fácil de leer: Depende de nodejs y se instala con npm.

Para iniciados lso recomendables son Gulp y webpack para despeus de ganar experiencia.

ENTONCES para todo siempre necesito NODEJS:

a) INSTALACION DEBIAN

curl -sSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -

echo "deb https://deb.nodesource.com/node_14.x $(lsb_release -s -c) main" >> \
/etc/apt/sources.list.d/50nodejs.list
echo "deb https://deb.nodesource.com/node_16.x $(lsb_release -s -c) main" >> \
/etc/apt/sources.list.d/50nodejs.list
echo "deb https://deb.nodesource.com/node_18.x $(lsb_release -s -c) main" >> \
/etc/apt/sources.list.d/50nodejs.list
echo "deb https://deb.nodesource.com/node_20.x $(lsb_release -s -c) main" >> \
/etc/apt/sources.list.d/50nodejs.list
apt-get update
apt-get remove nodejs npm
apt-get install nodejs

OJO: aqui colocamos varias versiones de nodejs/npm y con el comando solo instalara la 20, para versiones mas veijas debe especificar la version en elk comando apt-get simplemente

Notese que si tiene debian versiones viejas puede usar aun la version de nodejs 8.X o 9.X segun el caso, y obviara cualqueir version nueva. Visite los grupos de telegram para estas versiones.

b) INSTALACION ALPINE

Hay dos opciones.. el directo tar: https://unofficial-builds.nodejs.org/download/release/v12.18.3/ o https://unofficial-builds.nodejs.org/download/release/v14.8.0/ escogiendo el archivo que contiene la palabra “muslc” . O sino instalando desde los repos Alpine asi:

cat > /etc/apk/repositories << EOF; $(echo)
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/main
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/community
http://dl-cdn.alpinelinux.org/alpine/v3.12/main
EOF

apk update

apk install nodejs npm

cat > /etc/apk/repositories << EOF; $(echo)
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/main
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/community
EOF
apk update

Notese que si tiene un alpine linux viejo.. desde alpine linux 3.4 hasta 3.10 se puede usar el paquete desde alpine 3.12 para instalarlo en alpine linux versiones viejas y estar al dia.

TAMBIEN YARN SE PUEDE COMO PAQUETE:

a) INSTALACION DEBIAN

curl -sSL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" >> \
/etc/apt/sources.list.d/50yarnjs.list
apt-get update
apt-get install --no-install-recommends yarn

El paquete depende de uan tipo de “node” que puede ser “nodejs” o el mismo que yarn provee, para ello se realiza alias node=nodejs.

b) INSTALACION ALPINE

Hay dos opciones.. el directo curl -o- -L https://yarnpkg.com/install.sh | bash . O sino instalando desde los repos Alpine asi:

cat > /etc/apk/repositories << EOF; $(echo)
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/main
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/community
http://dl-cdn.alpinelinux.org/alpine/v3.12/main
EOF

apk update
apk install yarn

cat > /etc/apk/repositories << EOF; $(echo)
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/main
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/community
EOF

apk update

Notese que si tiene un alpine linux viejo.. desde alpine linux 3.4 hasta 3.10 se puede usar el paquete desde alpine 3.12 para instalarlo en alpine linux versiones viejas y estar al dia.

EDITADO: update to 2024-01