{"id":24987,"date":"2024-04-09T00:29:36","date_gmt":"2024-04-08T23:29:36","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/comparativa-y-consecuencias-es-modules-vs-commonjs-en-javascript\/"},"modified":"2024-06-03T18:44:01","modified_gmt":"2024-06-03T17:44:01","slug":"comparativa-y-consecuencias-es-modules-vs-commonjs-en-javascript","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/","title":{"rendered":"Comparison and Consequences: ES Modules vs CommonJS in JavaScript"},"content":{"rendered":"<p>In the ins and outs of application development with JavaScript, two protagonists stand out in the management of dependencies and modules: ES Modules (ESM) and CommonJS (CJS). Their evolution and rivalry have had significant repercussions on the JavaScript ecosystem, shaping not only the syntax of the code, but also the architecture and performance of applications.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#Los_Fundamentos_de_CommonJS_y_ES_Modules\" >The Fundamentals of CommonJS and ES Modules<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#Aspectos_Tecnicos_Sintaxis_y_Caracteristicas\" >Technical Aspects: Syntax and Features<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#CommonJS_Sencillez_y_Compatibilidad\" >CommonJS: Simplicity and Compatibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#ES_Modules_Evolucion_y_Estandarizacion\" >ES Modules: Evolution and Standardization<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#La_Batalla_por_la_Adopcion\" >The Battle for Adoption<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#Rendimiento_e_Implicaciones_Practicas\" >Performance and Practical Implications<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#Impacto_en_el_Desarrollo_de_Librerias_y_Frameworks\" >Impact on the Development of Libraries and Frameworks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#Compatibilidad_y_Polyfills\" >Compatibility and Polyfills<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#Comunidad_y_Ecosistema\" >Community and Ecosystem<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#ES_Modules_en_Nodejs\" >ES Modules in Node.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#El_Futuro_de_los_Modulos_en_JavaScript\" >The Future of Modules in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/comparison-and-consequences-is-modules-vs-commonjs-in-javascript\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Los_Fundamentos_de_CommonJS_y_ES_Modules\"><\/span>The Fundamentals of CommonJS and ES Modules<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let&#039;s start by deciphering what exactly CommonJS and ES Modules are. CommonJS is a de facto standard that emerged with Node.js to make it easier to create reusable modules. Its syntax is easy to recognize:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const moduleA = require(&#039;moduleA&#039;); module.exports = { doSomething: function() { \/\/ Code } };<\/code><\/pre>\n<p>On the other hand, ES Modules is the official ECMAScript standard for importing and exporting modules, and it looks something like this:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">import moduleA from &#039;moduleA&#039;; export function doSomething() { \/\/ Code }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Aspectos_Tecnicos_Sintaxis_y_Caracteristicas\"><\/span>Technical Aspects: Syntax and Features<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"CommonJS_Sencillez_y_Compatibilidad\"><\/span>CommonJS: Simplicity and Compatibility<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The heyday of CommonJS was due to its native compatibility with Node.js and its simplicity. There was no need to set up a build system, which meant you could write and run your code immediately. Additionally, CommonJS loaded modules synchronously, closely tied to the event-driven architecture of Node.js.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"ES_Modules_Evolucion_y_Estandarizacion\"><\/span>ES Modules: Evolution and Standardization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The introduction of ES Modules brought with it a more declarative and static system. ESMs are loaded asynchronously, which is ideal for the browser allowing code-splitting and lazy-loading. This approach is more predictable at compile time and favors optimization by JavaScript engines.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"La_Batalla_por_la_Adopcion\"><\/span>The Battle for Adoption<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The transition from CommonJS to ES Modules was not instantaneous. Initially, the Node.js community was deeply rooted in CJS, and there were significant challenges in interconnecting the two systems. Build and transpilation tools like Babel and Webpack had to offer support for both modules, creating a kind of bridge between the past and the present.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Rendimiento_e_Implicaciones_Practicas\"><\/span>Performance and Practical Implications<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In terms of performance, asynchronous loading of ESM can result in a noticeable improvement in the loading time of web applications. Additionally, thanks to the static nature of ESM, treeshaking tools can better remove dead code, thus reducing the final package size.<\/p>\n<p>But not all is perfect. The drawback comes from the complexity that can arise when integrating legacy module systems with ESM, sometimes having to resort to hybrid solutions or compatibility layers that can affect performance.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Impacto_en_el_Desarrollo_de_Librerias_y_Frameworks\"><\/span>Impact on the Development of Libraries and Frameworks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With the advent of ESM, many library and framework maintainers have migrated or had to offer support for both module systems. This has increased the complexity of maintenance, but has also opened doors for new libraries to be built from scratch with ESM, taking advantage of its benefits.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Compatibilidad_y_Polyfills\"><\/span>Compatibility and Polyfills<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Compatibility remains a crucial issue. Although modern browsers support ESM, the fact is that CJS dominates Node.js. This has led to the creation of polyfills and the implementation of features in Node.js to facilitate interaction with ESM, such as the introduction of the field <code>&quot;type&quot;: &quot;module&quot;<\/code> in the <code>package.json<\/code>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Comunidad_y_Ecosistema\"><\/span>Community and Ecosystem<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The impact of this duality of modules transcends the code; It affects communities, educational resources and decision-making in new projects. Since both systems coexist, developers must be familiar with the differences and possible interoperability problems.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"ES_Modules_en_Nodejs\"><\/span>ES Modules in Node.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Node.js began offering experimental support for ES Modules since version 8.5, and stable support arrived with version 13.2. Although Node.js still uses CommonJS by default, the trend indicates a slow but sure movement towards ESM.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"El_Futuro_de_los_Modulos_en_JavaScript\"><\/span>The Future of Modules in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The future seems to be leaning towards ES Modules, but CommonJS is unlikely to disappear anytime soon given the vast number of existing modules. Older packages still require the old system, and it will be a matter of time before ESMs completely dominate.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Choosing between CommonJS and ES Modules is not just a matter of preference; has significant implications on the structure and performance of applications. As the ecosystem evolves, so does the knowledge required to navigate it effectively. While ES Modules seem to be the way to go, the coexistence of both systems underscores the importance of understanding the impact and role of each in the JavaScript ecosystem.<\/p>\n<p>To stay up to date with these changes and more details of JavaScript development, feel free to visit my blog at <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. And if you have questions or need advice on your projects, contact me through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">nelkodev.com\/contact<\/a> and I will help you with whatever you need.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the intricacies of JavaScript application development, two players stand out in dependency and module management: ES Modules (ESM) and CommonJS (CJS). Their evolution and rivalry have had significant repercussions on the JavaScript ecosystem, shaping not only code syntax but also application architecture and performance. [\u2026]<\/p>","protected":false},"author":1,"featured_media":24988,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207],"tags":[205,898,1604,1656,185,899,2208],"class_list":["post-24987","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","tag-blog","tag-commonjs","tag-comparativa","tag-consecuencias","tag-javascript","tag-modules","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=24987"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24987\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/24988"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=24987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=24987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=24987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}