Módulos en ES2015
Afortunadamente, el equipo de ECMA (encargado de la estandarización de Javascript) decidió abordar el tema de los módulos.
El resultado se puede ver en la última versión del estándar Javascript: ECMAScript 2015 (anteriormente conocido como ECMAScript 6). El resultado es sintácticamente agradable, y compatible con ambos modos de operación (de forma síncrona y asíncrona).
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
La directiva import permite traer módulos al ámbito actual. Esta directiva, en contraste con require y define es no dinámica (es decir, no se puede llamar en cualquier lugar). La directiva export, por otro lado, puede usarse para explícitamente hacer públicos los elementos.
La naturaleza estática de import y export permite a los analizadores estáticos construir un árbol completo de las dependencias sin ejecutar código.
PROS
- Soporta la carga síncrona y asíncrona.
- Es sintácticamente simple.
- Está integrado en el lenguaje mismo (eventualmente será soportado en todos lados sin necesidad de bibliotecas).
- Soporta dependencias circulares.
CONS
- Aún no está soportado en todos lados.
Implementaciones
Desafortunadamente no todos los intérpretes de JS soportan ES2015 en sus versiones estables.
Sin embargo, existen «transpiladores» (transpilers) que añaden este soporte.
Un ejemplo es el preset ES2015 para Babel. Babel es un transpiler, y ES2015 preset es un plugin que permite transformar código ES2015 (ES6) en ES5 (la versión típica de Javascript soportada por todos los navegadores desde hace varios años).
Un cargador universal: System.js
¿Deseas que tu proyecto funcione adecuadamente para todos los casos?
System.js es un cargador universal de módulos, que soporta CommonJS, AMD y los módulos de ES2015.
Una mejor alternativa
Hoy en día, Webpack ofrece lo mismo que System.JS y mucho más.
Webpack es un empaquetador de módulos que además optimiza nuestros archivos para producción, minificándolos y uniéndolos según se requiera (de hecho permite usar loaders para realizar más tareas durante este proceso).
Usar SystemJS y conseguir lo mismo que permite Webpack implicaría usar adicionalmente Gulp, o «SystemJS builder» para empaquetar nuestro proyecto para producción.
Finalmente
Los sistemas de módulos para Javascript surgen como una necesidad de los mismos programadores, de encapsular distintas funcionalidades en «bloques de código» reutilizables. Estos bloques son llamadas módulos y es importante contar con un mecanismo para gestionar las dependencias entre estos módulos.
Es así como surgen especificaciones, que buscan definir un formato para la importación y exportación de módulos, como CommonJS y AMD.
Estas especificaciones tienen sus correspondientes implementaciones con ligeras diferencias.
A fin de poner un poco de orden ante tanto caos, aparece una nueva versión del estándar Javascript: ES2015 (antes conocido como ES6).
Genial. ¿Entonces por qué tanto lío?
Lo que pasa es que no todos los navegadores han terminado de implementar este estándar de forma estable, y una gran cantidad de usuarios usa versiones antiguas.
La solución entonces está en «transformar nuestro código» en código que todos los navegadores puedan entender, haciendo uso de transpilers. O bien usar polyfills para darle a los navegadores la capacidad de entender características que aun no han implementado.
Existen muchas alternativas, pero una herramienta que ha tenido bastante acogida últimamente es Webpack. Esto es porque Webpack no solo soluciona este problema. También optimiza la ejecución de tareas, de empaquetar nuestro código y dejarlo listo para producción.
Pero Javascript no está únicamente en el lado del cliente. Las especificaciones también aplican a Javascript en el lado del servidor. Es por eso que en este artículo hemos mencionado a NodeJS.
Llamado a la acción
El ecosistema de Javascript cambia muy amenudo.
Esto se debe en gran parte a que las compañías tecnológicas más destacadas (entre ellas Facebook, Google, Twitter, Instagram) están siempre en búsqueda de mejores herramientas. Dejan de usar una para adoptar otra mejor, o crear su propia versión propuesta.
Pero no hay que temerle a estos cambios. Al final, son muchas formas de hacer «casi» lo mismo.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
