🏛️ Contexto histórico
Ideas/conceptos claves
IIFE
Viene de expresión de función ejecutada inmediatamente. Son funciones que se ejecutan tan pronto como se definen
Minificación
Es el proceso de eliminar todos los caracteres innecesarios del código fuente de lenguajes de programación interpretados o lenguajes de marcado sin cambiar su funcionalidad.
Bundling
Es un proceso donde se toma varios archivos y se unifican en uno solo aparte que puede estar minificado.
Motor de templates
Es una herramienta que te permite tomar archivos y tratarlos con JavaScript para obtener un resultado como un archivo.
Transpilación
Es convertir los archivos iniciales de un proyecto a archivos distintos para producción distintos de los originales.
TypeScript
Es un superconjunto de JavaScript, que esencialmente añade tipos estáticos y objetos basados en clases
Apuntes
- Cuando la web comenzó únicamente eran páginas de texto con algunas imágenes y enlaces
- Posteriormente, se implementó CSS para agregar estilos con el fin de organizar los elementos y estilizar los elementos
- Con el tiempo fue necesario agregar nuevas características a los sitios con JavaScript
- JavaScript dio un cierto dinamismo a la web
- Conforme iba a creciendo el código fue necesario llegar al tema de implementar módulos y librerías de JS para organizar de mejor manera el código
- Inicialmente, solo existía esta forma, que era usar una etiqueta de HTML donde se referenciaba al archivo o dentro de la etiqueta
<script src="modulo.js"></script>
- Esta era la forma más básica de hacer un módulo, cargando el archivo y ya estaba listo para usarse
- Pero con el tiempo de igual manera fue creciendo donde ya no se tenía un solo script sino una serie de etiquetas
<script src="modulo1.js"></script>
<script src="modulo2.js"></script>
<script src="modulo3.js"></script>
- El gran problema era que no se tenía ningún estándar para cumplir con este objetivo
- Al implementar esta manera se tenía unas reglas como ser:
- Al necesitar algo de un módulo primero se debe cargar para que otros módulos lo implementen
- Esto causaba problemas a la experiencia de desarrollo
- Difícil de leer
- Podía realizar muchos errores en caso de una equivocación en el orden de importación
- Había probabilidad de una colisión entre variables sobreescribiendo en cada archivo
- Por este motivo se buscó soluciones para este problema, de esta manera surgió IIFE
- Lo que aportaba esta solución era que las variables se quedaban en el contexto de la función, evitando la colisión de variables
Ejemplo de IIFE
var module = (function(){
var version = "1.0.0";
})():
// version es inaccesible
var module = (function(){
var version = "1.0.0";
return { version };
})():
// Salida inmediata:
module.version; // "1.0.0"
- Conforme fue avanzando el desarrollo web surgieron conceptos como
minificación- El cual ayudaba a la performance de la web en archivos grandes
- Si bien no cambia el funcionamiento, puede agregar caracteres como el punto y coma para que no haya conflictos al ejecutar el programa
// Sin minificar
var data = {
name: "Diana".
age: 27
};
// Minificado
var data={name:"Diana",age:27};
-
También surgió el concepto de
bundling- Su ventaja estaba que cuando un usuario ingrese al sitio solo descargue un archivo una sola vez, mejorando el performance
-
Posteriormente, también apareció node.js
- Permitió que las personas utilicen JavaScript del lado del backend
-
Con el diseño de node.js llego las herramientas de primera generación
- Node.js permite tiene un
motor de templates - Inicialmente, se utilizó con HTML (Jade, pug)
- Posteriormente, se implementó con CSS (Sass, Stylus) los cuales ayudaron a escribir código de estilos más fácilmente
- Node.js permite tiene un
-
De estos procesos sale el concepto de
transpilación -
Además, comienzan a surgir herramientas para que nos ayuden a automatizar estos procesos y también que se encarguen del orden de ejecutarlos
- Entre las herramientas de primera están Grunt o Gulp donde era necesario escribir scripts para automatizar este proceso
-
También surgen herramientas para generar código como ser yeoman generator acelerando el proceso de desarrollo y teniendo que mantener más herramientas
-
Comienzan a salir los primeros frameworks (Angular.js, Ember.js, Backbone.js)
- De esta manera el framework te proveía una estructura para trabajar
- Se empieza a tener la necesidad de tener muchas carpetas con múltiples archivos, estructurados de una cierta manera, los cuales se transpilaban para producción
-
En su momento aparece ECMAScript 6 y con ello Babel
- En primer orden se utilizaba en desarrollo ECMAScript 6 y posteriormente se usaba Babel.js para llevar el código moderno en una versión anterior para que todos los navegadores puedan ejecutarlo sin ningún problema
- De esta forma se tenían las últimas características de la web y tener retro compatibilidad
-
Posteriormente, comienzan a aparecer las herramientas de segunda generación (React, Angular 2, Eslint, Prettier, etc.)
-
Con ello aparece Webpack
- Mediante una configuración se pasaban los distintos archivos de desarrollo a código de producción
-
Entre las mayores desventajas de webpack estan:
- Lento
- Necesita bastante configuración
-
Por ello surgen alternativas de la comunidad
- Esbuild, el cual es un
bundler****bastante rápido escrito en Go - Parcel ⇒ Se enfoca en tener poca configuración
- Rollup ⇒ Se enfoca en poder generar una versión para producción bastante especializada cumpliendo estándares de la web
- Esbuild, el cual es un
-
También aparece TypeScript
- Es un lenguaje es de programación tipado el cual hace que varias librerías lo implementen
-
De esta manera se llega a la tercera generación de herramientas (Vite.js)
- Su objetivo es mejorar la experiencia de desarrollo teniendo una mejor velocidad y menor configuración
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?