Usaremos Babel pra sempre

Christiano Milfont
2 min readAug 15, 2016

--

"Pra sempre" em se tratando de Web significa coisa de 1/2 a 1 década, e sim, usaremos Babel pra sempre.

Nos cursos da Produto Reativo (Modelo de educação técnica que venho realizando dentro da sede da Greenmile para a comunidade Cearense) a Babel é a pedra filosofal para trazer o futuro pra hoje, um aluno certa vez falou uma sacada genial quando eu falo das vantagens de usar ES7 já:

"Milfont, então sempre usaremos Babel, porque quando os Browsers estiverem compatíveis com ES7 já teremos ES8 ou mais…"

Perfeito, principalmente porque a ES7 (ou ES2016) já foi publicada e até agora o Chrome (com 97%) ainda está próximo da compatibilidade 100% com a ES6 (ou ES2015) exemplificando essa frase. O Edge com 95% na frente dos outros concorrentes me enche de esperança na humanidade e um futuro longe das distopias.

Mostre código, por favor

Visualiza o código React seguinte em ES6 clássico como recomendado:

Independente de recursos fantásticos como Async/Await, são pequenos detalhes de recursos sintáticos que melhoram a manutenção de código.

Começamos com recurso de propriedades tanto de instância quanto de classe disponível no ES7. Analisando esse código anterior, o padrão ES6 é:

A nova versão inclui propriedades de classe e instância com a seguinte sintaxe:

E para não precisar sobrescrever o constructor para fazer o Bind de functions da própria instância podemos usar o recurso de Fat Arrow Function na variável de propriedade que faz o autobind:

Eu não sou favorável de usar outras linguagens para "transpilar" para Javascript, apesar de ser simpático com ClojureScript. Por questões de princípios, prefiro aprender e fazer com EcmaScript que tem todos os recursos dessas outras linguagens e me manter o mais próximo possível da Spec.

Mas um recurso específico eu gosto de usar nos meus projetos, o Decorator, que apesar de ter ficado ainda fora da ES7 eu tenho certeza que cedo ou tarde entrará na linguagem e a forma de consumir praticamente será a mesma que usamos hoje em dia.

Código para ligar o componente React com o Redux:

Usando Decorator (já que a API permite) melhora a legibilidade:

Meu .babelrc para compilar esse código.

Código transformado para ES7 com Decorator:

A Babel é ferramenta que permite uma transição gradual e "tranquila" para o futuro como nunca antes conseguimos, meu maior objetivo é criar mecanismos para nos manter atualizados dentro da realidade saudável, porque não temos como refazer todos os projetos sempre a cada mudança de mindset/tecnologia.

Fico na dependência do Babel pra sempre sem problema na consciência por essa ferramenta até agora conseguir me ajudar nesse objetivo.

--

--

Christiano Milfont

Diretor de Produtos Digitais e consultor em Transformação Digital.