Usaremos Babel pra sempre

“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:

https://gist.github.com/cmilfont/2c17803534c6f22bcac1ccad0cbc2fb9#file-es6-js

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 é:

https://gist.github.com/cmilfont/f33962f158c10bb09d7d62a080566623

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

https://gist.github.com/cmilfont/ed86c9b820b50fbeeb537c1795d68407

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:

https://gist.github.com/cmilfont/cb8afa7285b2b38a7d05210fe132b721

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:

https://gist.github.com/cmilfont/5522f59f8684e6fd8dcd9cbbc1565133

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

https://gist.github.com/cmilfont/f3e97901bc0fff650317b4d44faa0775

Meu .babelrc para compilar esse código.

https://gist.github.com/cmilfont/523d03d6bf4f7cfc32d455f8190fd423

Código transformado para ES7 com Decorator:

https://gist.github.com/cmilfont/9d47f37efe39f583db8bfd216634a379

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.