Melhorando a manutenibilidade e escalabilidade do código com Módulos ES6

Continuando nossa série de artigos sobre ES6 (leia o último aqui), vamos falar hoje sobre módulos. O uso de módulos é uma das funcionalidades mais importantes introduzidas no EcmaScript 6.

Ele permite que você organize seu código em pequenos pedaços independentes, tornando ele mais modular e fácil de manter. Módulos fornecem suporte para exportar e importar valores sem poluir o namespace global.

Nós já tínhamos essa capacidade no JavaScript através de bibliotecas de terceiros como AMD e CommonJS, mas o ECMAScript 6, quando lançado, também trouxe essa habilidade.

Desenvolvimento

O recurso de exportação de módulos ES6 permite que você separe as preocupações em módulos diferentes, tornando o código mais modular. Por exemplo, você pode criar um módulo que contenha apenas funções de validação, outro que contenha funções para manipulação de dados e assim por diante.

export function validateCPF(cpf) {
    // code here
}

export function validateEmail(email) {
    // code here
}

export function transformToUTC(data) {
   // code here
}

Como os módulos são independentes, eles podem ser reutilizados em diferentes partes do projeto, o que beneficia a escalabilidade.

O recurso de exportação padrão (default) permite que você exporte um único valor ou objeto de um módulo, tornando mais simples a sua importação em outros lugares do código.

// tools.js
export default function calculator(x, y, option) {
    if (option === 1) {
        return sub(x, y);
    } else {
        return add(x, y);
    }
}

function add(x, y) {
    return x + y;
}

function sub(x, y) {
    return x - y;
}

import calculator from './tools.js';

console.log("Result: " + calculator(1, 3, 2));
// Result: 4

Ao utilizar o recurso de importação de módulos ES6, você pode usar o chamado wildcards. Ele permite que você importe um módulo inteiro e acesse todos os recursos por meio de uma notação * as algum-nome

// basic-operations.js
export function add(x, y) {
    return x + y;
}

export function sub(x, y) {
    return x - y;
}

export var pi = 3.1415;

import * as calc from './basic-operations.js';
console.log('Result: ' + calc.add(1, 2));

// Result: 3

Conclusão

Em resumo, os módulos ES6 são uma funcionalidade poderosa do JavaScript que podem melhorar significativamente a manutenibilidade e escalabilidade do código. Eles permitem uma melhor organização do código, simplificam o gerenciamento de dependências e permitem a reutilização do código em diferentes projetos e contextos. Com o uso correto dos recursos de exportação, importação, exportação padrão e wildcards, é possível criar um código mais modular, legível e fácil de manter.

Para mais informações

• ES modules: A cartoon deep-dive
• ECMAScript 6 Succinctly