¿Que es un módulo?, ¿que es un módulo Javascript?, ¿por qué es tan importante modularizar?, ¿cómo hacemos para modularizar en Javascript?, éstas y muchas muchas otras preguntas vamos a estar respondiendo en este post.
En el principio de los tiempos, la gente vivía en cavernas, cazaba su alimento y codificaba todo en un único y gigante archivo de miles y miles de líneas. Pero eso le traía muchos muchos problemas:
- Era difícil mantener la calidad del código: Mientras más crecía el archivo, mas difícil resultaba mantenerlo ordenado, agregarle más código (y que siga ordenado) y arreglar problemas que fueran surgiendo (y de paso, que siga ordenado).
- Si estabas trabajando en equipo, y junto otra persona, tenían que modificar el mismo archivo, era una pesadilla.
- Daños colaterales: Si el código estaba todo junto en un mismo archivo había muchas (y digo muuuuchasss) probabilidades de que si tocabas algo, esto afectara a otra parte del código que ni sabías.
- Era muy muy difícil testear un código con tantas líneas. Para testear tu código, si todo es una sola unidad, lo que tenías que hacer es testear esa unidad, o sea TODO. Y eso es muy complejo. Es mucho mas fácil y controlable testear pequeñas partes.
- Reutilizar código: Mientras más código, mayor probabilidad de que haya errores, por eso se busca reutilizar código que ya sabemos que funciona, esto nos ahorra muchos dolores de cabeza. Ahora bien, ¿cómo podemos reutilizar código si está todo junto en un solo archivo? ¿y si dos personas necesitan hacer lo mismo pero cada uno lo hace a su manera? (un código que hace lo mismo estaría escrito de dos formas distintas), ¿y si vos o alguien ya hizo algo y lo quisieran reutilizar? ¡buscarlo en todo el código sería un infierno!
Bueno, espero con todos estos puntos haberte convencido de que no es bueno codear todo en un solo archivo.
Es por eso que se modulariza el código, pero ¿qué es un módulo exactamente?
Un módulo es un conjunto de código y de datos relacionados lógicamente. Encapsula (o encierra) detalles de la implementación (o sea, de la forma en cómo está escrito el código), de esta forma el que usa el módulo no necesita saber «cómo esta hecho» el módulo, sino solamente «cómo se usa«. Y como sólo se necesita saber «cómo se usa» un módulo, lo único que se expone al mundo exterior es la forma de usarlo. Finalmente, combinando varios módulos se pueden crear aplicaciones mucho más grandes.
¿Cuáles son las ventajas de modularizar?
- Crear bloques de código (o conjunto de archivos), en vez de tener un gigante único archivo: esto hace mucho mas fácil entender el código, ya que son pedazos mas pequeños de código. Además, también es mas fácil entender los módulos, ya que se pueden pensar como unidades de funcionalidad. Por ejemplo, en un auto, una rueda, el motor, un asiento o la caja de cambios, cada uno de esos elementos es un módulo; en vez de pensar en piezas mucho mas pequeñas como pueden ser tuercas, tornillos, chapas, aceite, y todas las partes del motor por separado, es mucho mas fácil pensarlo como una unidad.
- Encapsulación: mientras la API que se exponga no cambie, podemos cambiar todo el código que queramos sin que la otra parte (el módulo o quien sea que use este módulo) deje de funcionar. Es como si una persona fuera a un cajero electrónico, mientras no cambie la pantalla y los botones para hacer sus operaciones bancarias, el banco puede cambiar todo lo que esta dentro del cajero y el usuario ni se enteraría.
- Reusabilidad: los módulos, cuando se crean, se piensan (o se deberían pensar) para que sean reutilizables, para que otros módulos -en vez de escribir diferentes piezas de códigos para resolver el mismo problema-, escriban un código una sola vez y usen ese mismo código en los diferentes lugares en que sea necesario (mientras menos código, menos errores en tu aplicación ;) )
Un momento… y ¿cuáles son las desventajas de modularizar?
Bueno sí, modularizar tiene sus desventajas también:
- La principal, es administrar las dependencias entre módulos, como por ejemplo, la siguiente (pero no se asusten, existen muchas herramientas para administrar módulos).
Dependencia de módulos en Javascript
- Otra desventaja (al menos en Javascript) es el empaquetado de los módulos (esto lo explicamos más adelante). Y también para esto existen muchas herramientas que te facilitan la vida.
Tipos de modularización que existen en Javascript
Cuando se creó Javascript, los códigos eran pequeños y relativamente fáciles. Pero con el paso del tiempo, se empezaron a hacer aplicaciones cada vez más grandes, lo que llevó a incluir módulos en Javascript. Y al incluir módulos, vinieron también los problemas de empaquetado y distribución de nuestra aplicación (esto lo vamos a explicar más adelante junto con su solución).
IIFE (Immediately-invoked function expressions) o Expresión de una Función Ejecutada Inmediatamente
El patrón para modular en ECMAScript 5 o ES5 (¡no se asusten! es otra forma en que se conoce al Javascript viejo) es IIFE. Ésta era la forma rebuscada de modularizar en Javascript, cuando no había ninguna herramienta para modularizar.
Los pasos para aplicar este patrón son los siguientes (podés ver la imagen para guiarte mejor):
- Definimos una función en Javascript normalmente
- Rodeamos esa función con paréntesis, esto es para hacerla «ejecutable» al mismo tiempo que la creamos
- Como la función es ejecutable… Pues ¡La ejecutamos! Sí sí, se puede hacer eso :D
- Como no nos interesa utilizar a nuestra función en ninguna otra parte del código (porque ya lo hacemos acá) le borramos el nombre de la función, ¡La hacemos anónima!
Esta era la antigua forma de modularizar en Javascript (aunque todavía se usa), pero con la evolución de Javascript llegaron nuevas herramientas y mejoras en el mismo lenguaje, como las siguientes:
Module Formats vs Module Loaders
¿Qué es un Module Format?
Básicamente es la sintaxis (o la forma) de cómo definir un módulo, en nuestro caso un módulo Javascript. La sintaxis es independiente de cómo se carga y ejecuta el módulo (Module Loaders), peeeeroooo el que carga el módulo debe entender cuál es la sintaxis de cómo definir (o crear) un módulo.
Entonces… ¿qué es un Module Loader?
Son, en general, librerías Javascript que entienden la sintaxis de creación de tu módulo, y son los encargados de cargar y ejecutar tu módulo usando la sintaxis anterior.
Module Format
Éstos son los tipos de Module Format más comunes:
| No Nativo (son una librería externa y hay que importárselos al proyecto) | Nativo (vienen en el propio lenguaje Javascript a partir de la versión 2015) |
| AMD (Asynchronous Module Definition): Se usa principalmente para crear módulos para ser ejecutados en un browser. Como su nombre lo indica, está pensado para cargar los módulos asincrónicamente, o sea, sin un orden secuencial, sino que se van cargando (en el browser) a medida que éste los vaya necesitando. |
ES2015 (ECMAScript 2015): Ésta es la forma de definir módulos en la nueva versión de Javascript (ES2015). Viene embebida en el lenguaje, a diferencia de los otros Module Format que eran externos al lenguaje y había que importarse las correspondiente librería de forma externa. Tiene una sintaxis parecida a CommonJS aunque con algunas diferencias. Para que las versiones viejas de Javascript lo entiendan hay que convertir el código de ES2015 a ES5. |
| CommonJS: Este Module Format es usado mas comúnmente en código Javascript para ser ejecutado del lado del servidor (por ejemplo, en Node) | |
| UMD: Este formato está pensado para cargar el mismo módulo del lado del cliente (browser) y del lado del servidor. No es muy utilizado. |
nota: existen mas tipos de Module Format, solo se nombran las más comunes
Module Loaders
Estos son los Module Loaders mas conocidos
- RequireJS (AMD): Este Module Loader entiende AMD
- SystemJS: Este Module Loader entiende AMD, CommonJS y UMD)
Cabe aclarar que no todos los Module Loaders soportan todos los Module Format, así que tené cuidado con la configuración que elijas.
Module Bundlers
¿Qué hacen los Module Bundlers?
Los Module Bundlers resuelven los mismos problemas que los Module Loaders, pero lo hacen cuando se construye la aplicación (build time), a diferencia de los Module Loader que lo hacen cuando se ejecuta la aplicación (run time)
Los Boundlers resuelven la cadena de dependencias de tu código…
… pero en vez de bajar la dependencia cuando la necesita, como lo hacen los Module Loader, lo hace cuando se construye la aplicación (build-time) en el orden correcto.
Otra cosa que hacen los Bundlers es combinar módulos en unos pocos archivos. También, achican los archivos para que sean mucho mas livianos (sacándole espacios en blanco y comentarios por ejemplo)
Alguno de los Module Bundlers más conocidos son Browserify y Webpack
Conclusión
Entender cómo funcionan los módulos en Javascript y su evolución, nos ayuda a entender cómo están hechas las aplicaciones Angular y por qué están hechas de esta forma.
Entender el por qué de las cosas nos ayuda a entender y mejorar.
¡Hasta la próxima!
Suscribíte a la Newsletter!
Si te suscribís, nunca te vas a perder un post Y vas a tener acceso a mi contenido exclusivo de forma totalmente gratuita. ¡Suscribite!
gustavodohara.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Gustavo Dohara como responsable de esta web.
Finalidad de la recolección y tratamiento de los datos personales: gestionar el alta a esta suscripción y remitir boletines periódicos con información y oferta prospectiva de productos o servicios propios y de terceros afiliados.
Legitimación: Consentimiento del interesado. Destinatarios: Mailchimp. Puedes consultar aquí su política de privacidad. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en gustavo@gustavodohara.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad