JavaScript Moderno

Last updated Jan 22, 2023 Edit Source

• Javascript

El Codigo hoy en dia ya no se escribe en un solo script, hoy en dia, se utilizan distintas herramientas.

Un modulo es una pieza de codigo reutilizable que encapsula detalles.

Mediante estos, podemos crear componentes que son reutilizables dentro de otros modulos. Hoy en dia incluso podemos utilizar modulos externos instalados desde un manejador de paquetes como npm.

npm es un simple CLI que tiene acceso a un repositorio para manejar estos paquetes.

Un modulo puede tener imports y exports. Mediante los imports traemos cosas de otro modulo y mediante export exponemos cosas a otros modulos.

Los import establecen las dependencias que nuestro modulo tiene.

A partir de ES6 tenemos modulos integrados en JavaScript, estos son guardados en archivos y cada archivo representa un modulo.

1
2
3
4
5
6
7
8
9

// module 1
export const function1 = function() {
	console.log('Executed a function')
}

const price = 23;
const pe = 24;

export { price, pe };

1
2
3
4
5

// Module 2
import { function1, price as p } from './path/to/source.js'

console.log(p);
function1();

Existen dos formas de exportar, en linea y por multiples

1
2
3
4
5
6
7
8

// 1
export const variable = 3;

// 2
const variable2 = 4;
const variable3 = 5;

export { viarable2, variable3 }

Adicionalmente, tambien podemos importar de distintas formas

1
2
3

import * as Script from './path/to/script.js'

Script.variable2;

Es una forma de exportar bastante simple que te permite expotar cualquier cosa de un modulo sin necesidad de darle un nombre. De esta forma, podemos darle el nombre que queramos (Funciona similar a las funciones anonimas en Java)

1
2
3

export default function () {
	console.log('Some function!')
}

Lo que debemos hacer es no mezclar entre los Named Experto y los Default Export

En los modulos todas las variables son privadas para el modulo. La unica forma de que otro modulo acceda a ellas, es si este las exporta. Siempre se ejecutan en modo strict y this se refiere a undefined. Ademas, podemos realizar imports y exports de los modulos,

Para declarar modulos necesitamos establecerlos en la etiqueta script:

1

<script type="module">

1. Se lee el archivo de JS
2. Se importan todos los modulos necesarios de forma sincrona (Debido a que estos son hoisted).
3. Se descargan los modulos
4. Se vinculan los imports y exportes entre los modulos
5. Se ejecuta el archivo de JS original

Hoy en dia, los archivos en javascript tambien incluyen un proceso de Build en el cual usualmente se comprime el codigo de javascript para garantizar que se ejecute de forma satisfactoria y ademas se transpila el codigo a una version anterior de javascript para que lo realice.

Las dos herramientas mas populares para realizar este proceso de construccion son:

• webpack
• parcel

Era un patron utilizado hace tiempo en JavaScript para exponer solo una parte publica como un modulo, para ello, se utilizaba una IIFE, y el mecanismo de Closures.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const Module = (function() {
	const var1 = 3;
	const var2 = 4;

	const func = function() {
		console.log('this is a module')
	}

	const privateFunc = function() {
		console.log('This func will not be exported')
	}

	return {
		var1,
		var2,
		func,
	}
})

Es otra forma de lidiar con los modulos, NodeJS los utiliza desde su nacimiento, por tanto, es importante entenderlos. Adicionalmente, la gran mayoria de los modulos disponibles en npm utilizan CommonJS.

Funcionan tal y como los modulos de ES6, solo que estos, utilizan una sintaxis especial de importe y exporte

1
2
3

export.func = function () {
	console.log('This function is exported')
}

1

const { func } = require('./path/to/script.js');

Es un CLI que nos permite acceder al repositorio de NPM para manejar los paquetes (dependencias) de nuestro proyecto.

Antes se solian agregar scripts a nuestro HTML, la desventaja que esto nos trae esque tenemos que manejar las actualizaciones manualmente, conseguir los paquetes es dificil, manipularlo en HTML tambien es complejo.

Para iniciar con npm, tenemos que usar el comando npm init. Esto creara un archivo package.json en donde se guardaran las dependencias y otras configuraciones de npm.

Para instalar un paquete necesitamos utilizar el comando npm install <package_name>. Un shorthand interesante que hace lo mismo es npm i <package_name>

Recordemos que este utiliza CommonJS packages con lo que debemos de buscar paquetes que sean compatibles con ES6 o debemos utilizar un module bundler (Como Parcel) para que funcionen,

Una forma de instalar todos los paquetes contenidos dentro de un package.json es utilizar el comando install sin ningun paquete, es decir npm install haria el trabajo.

Es otra herramienta de construccion que se encuentra en npm. Para instalacion igualmente utilizamos npm:

1

npm i parcel --save-dev 

El argumento –save-dev nos sirve para especificar que esta es una dependencia que solo va a estar disponible en un ambiente de desarrollo.

Mediante esta herramienta podemos empaquetar todos los distintos modulos en un solo unico archivo de javascript, ademas, podemos importar CommonJS Modules y podemos utilizarlos en nuestra aplicacion.

Es un transpilador que sirve para pasar sintaxis de ES6 a la version de ES5, es decir, solo convertira las partes que sea posible convertir devuelta a caracteristicas de ES5. Cosas como las Promise, el metodo .find() de los arrays no pueden ser transpiladas. Para ellas, necesitamos el mecanismo de Polyfilling.

Babel esta disponible de forma automatica con Parcel.

Parcel incluye autoconfiguracion para Babel, mediante un preset. El preset por defecto es preset-env.

Para utilizar el mecanismo de Polyfilling podemos utilizar el paquete core-js

1

npm i core-js

Mediante este podemos utilizar la libreria core-js para importar funcionalidades que son posteriormente insertadas a los prototipos de los distintos elementos que aun no estan incluidos en ES5.

1

import 'core-js/stable';

Es otro paquete de npm que nos sirve para hacer Polyfilling de codigo asincrono

1

npm i regenerator-runtime

1

import 'regenerator-runtime/runtime';