Transpilando com Babel

Disclaimer: use o create-react-app se for aprender com React ou aguarde enquanto publico sobre o Webpack para os demais projetos.

Esse tutorial eu utilizarei o Browserify para explicar como funciona o Babel, a ferramenta que tornou possível o futuro hoje.

O que é o Babel?

É uma ferramenta que transforma código Javascript (e até de outras linguagens) para uma versão específica que você queira executar, como ES5 que é de 2009 e praticamente funciona em todos os navegadores que existam.

Vamos criar um Hello World em React usando uma extensão da linguagem que ele trás, o JSX, para um código que os navegadores entendam. Vou usar uma versão mais nova do Javascript, o ES6 que roda nativamente no Chrome, Firefox, Edge e demais navegadores modernos.

Transpilar

Para “transpilar” o código antes já que a sintaxe JSX não é reconhecida, usará o Babel que sabe como portar. Transpilação é um neologismo das palavras compilação e transformação.

Crie uma arquivo chamado package.json com comando npm init.

https://gist.github.com/d25d214894ec4de895d104ca06670cb3

Ele fará algums perguntas para definir os parametros básicos do package. Se preferir pode deixar tudo em branco e vai só apertando Enter.

Usando o gerenciador de pacotes do nodejs, o npm, execute em um terminal a instalação do Babel e suas dependências na raiz do projeto.

https://gist.github.com/93124ac30791fabf6a96c82b322b4599

Presets e plugins

O Babel por si só é uma plataforma de “transpilação”, você precisa de presets que são um conjunto de plugins com as instruções específicas de uma linguagem que deseja portar pra javascript e plugins que são extensões das linguagens, geralmente uma funcionalidade especifica que deve ser transpilada. Utilizará o preset babel-preset-react para o projeto.

Para este tutorial você utilizará a escrita de código com a sintaxe do Javascript 6 que apesar de algumas versões de navegadores não darem suporte pleno pode ser traduzido para versões anteriores. Execute agora a instalação desses presets.

https://gist.github.com/7f439f2e780c0a078c1bec6041bd0765

O preset de stage é o nível que será transpilado em relação a especificação, sendo o zero a proposta inicial que pode até a não ser especificada e o nível 3 a indicação que já tem um candidato maduro para a próxima versão.

Por fim instale as bibliotecas do React.

https://gist.github.com/ec2fd4016dbb987c8f80071c5b915db8

O package.json deve ficar com a seguinte estrutura graças a instrução save passada que indica ao npm que deve salvar uma entrada no arquivo com a versão instalada de cada biblioteca.

Além disso uma pasta node_modules foi criada e será aonde as bibliotecas de dependência do projeto ficarão. As versões podem ter alguma diferença para o seu arquivo, essas versões são as existentes durante a escrita deste tutorial.

https://gist.github.com/052ee9675f07edf7ec36ff65b4c7183f

Hello World

Crie uma pasta chamada app.

No seu editor, escreva a function seguinte para imprimir o clássico Hello World na tela e salve no arquivo app/app.jsx.

https://gist.github.com/5a9815bed3b9f9d052edfab788a58aa4

ReactDOM faz a renderização da interface, que é a biblioteca responsável em “colar” a árvore de componentes chamados Virtual DOM (aguarde post sobre Virtual-DOM) na página.

https://gist.github.com/8dfedb6fe669ca1b40caaca4cfb97812

O código completo para gerar o Hello World.

https://gist.github.com/a085fde1a8e7aa6832fc7cf0b2232144

Crie uma pasta chamada public aonde armazenará todos os arquivos estáticos como o javascript gerado que vai pra produção.

Salve um arquivo nessa pasta chamado index.html para testar o código com o seguinte HTML.

https://gist.github.com/d4966178a18d54c48ca7e41e7440c4d0

Crie uma pasta assets/js dentro da public que será o local do arquivo final transpilado.

Agora no mesmo terminal, executa a instrução com a biblioteca babel-cli que é o executável do Babel, informando qual arquivo deve transpilar e a opção -o indicado que o arquivo bundle.js será gerado. Além disso a opção — presets para indicar que linguagens corretas serão utilizadas.

https://gist.github.com/d5a47230755e8de24a9d8880668baf07

Se voce abrir o arquivo gerado, verá a instrução de return da função com JSX em app.jsx, que era:

https://gist.github.com/69e8c165b20a24e1173948ad7a4c4f05

Traduzida do JSX para o Javascript que os navegadores entende:

https://gist.github.com/65e18708caeb21b38cfa8d29c69f3894

Altere a sintaxe usando uma abordagem em ES6, não se preocupe em entender ainda. Escreva a function Root como no código seguinte:

https://gist.github.com/fd9897153a553d2fe4a525dfc941220a

Antes de executar a tradução, aproveite esse momento pra utilizar um recurso que o nodejs disponibiliza para execução desses scripts. Crie uma entrada no package.json chamada scripts para colocar a tarefa de tradução. O arquivo ficará como:

https://gist.github.com/561c0c008bee825bf8c1e6e777e0f0ee

Não precisa mais invocar o comando a partir do caminho completo da biblioteca babel-cli porque o nodejs já entende que em suas tarefas ele pode encontrar esse comando dentro da pasta node_modules.

Agora basta executar a instrução:

https://gist.github.com/d2cffdf2a4f8fbf44ac024413d8d7f0e

Ainda é necessário incluir o React no html para o exemplo funcionar, enquanto não monta o ambiente ideal, acrescente o react e o react-dom diretamente de uma CDN disponível.

https://gist.github.com/a73d142dbf30523b4f84ab564c1e7c9f

Agora abra o index.html direto no seu navegador (open public/index.html no terminal deve funcionar) e deverá ver a mensagem Hello World na tela

Preparando um ambiente ideal

Uma grande conquista da comunidade em torno do Javascript foi a maturidade de uma biblioteca chamada browserify que transporta o código executado em um terminal no seu sistema operacional para um código reconhecido pelos navegadores. Hoje temos uma evolução com o Webpack, mas fica pra um próximo artigo.

Portanto em vez de utilizarmos as dependências a partir de um CDN, podemos utilizar o NodeJS para importar as bibliotecas e incluir no arquivo final transpilado junto com seu código.

No terminal, instale o browserify:

https://gist.github.com/7691e3c2933a9329987e987d54365657

Para não termos necessidade de passar parâmetros para o babel, podemos criar um arquivo chamado .babelrc na raiz do projeto com o seguinte conteúdo:

https://gist.github.com/b618b0f076993ba415e02be461b7693e

Instale também um pacote chamado babelify que é quem faz a ligação entre o babel e o browserify:

https://gist.github.com/9fdf718cc1f461d71fd35972cac34711

Esse pacote é um transformer, um mecanismo que o browserify utiliza semelhante ao princípio do preset do babel, ele executará o transformer babelify para processar por meio do babel e transpilar o código no mesmo processo de portar para o navegador.

No seu arquivo package.json, edite a task pra ficar assim:

https://gist.github.com/6ba62086c51994c18447cb17eae4fb05

No seu arquivo app.jsx agora pode colocar as importações das dependências:

https://gist.github.com/6ca124e401f29e79b1d457b8dd132fba

Retire as dependências do index.html voltando ao código inicial:

https://gist.github.com/fa971c3c10e64444b71ce9f5d61a5c3b

Se estivesse utlizando o preset es2015 o código seria totalmente portado para o ES5 que todos os navegadores existentes conhecem.

Esse preset vem com um conjunto de plugins que traduzem tudo, já que escolhemos manter a sintaxe do ES6 e privilegiar apenas os navegadores modernos, precisamos instalar um plugin que resolve o import/export do Javascript novo.

Se você tentar executar o build novamente vai se deparar com o seguinte erro:

https://gist.github.com/f3459b0b45aecf2860d86446e5e4ee82

Então instale um plugin (estaria no preset es2015) que resolve isso.

https://gist.github.com/474e88caf8c74c7d2ec6b0cd87bb23a1

Inclua o plugin no seu arquivo .babelrc:

https://gist.github.com/e028e15fd6dbf09dd82cff2432cf018e

Executando novamente o comando para gerar o arquivo bundle.js transpilado:

https://gist.github.com/0db7541f80c3876a5f8553dab5338c40

O seu arquivo bundle.js agora tem todas as dependências necessárias para utilizar esse código no navegador.

Gerando o bundle.js automaticamente a cada mudança

Esse processo de transpilar é contínuo, portanto não é produtivo ficar executando a task de build a cada modificação.

Instale uma biblioteca chamada watchify que fica observando as mudanças e executando o browserify pra você:

https://gist.github.com/732bbdfafd3f0f8ddbf0d8b0a6b41b2e

Agora inclua no package.json a configuração para o babelify conseguir executar o browserify:

https://gist.github.com/fd2588ce28c1879c074e44ed348fa90c

Edite o seu arquivo package.json para executar com o watchify criando mais uma task com nome de watch:js:

https://gist.github.com/65a90cebe0afed53817bec6cf2139cfc

O parâmetro -m gerará um mapa entre o código original e o transpilado dentro do bundle.js num formato que os navegadores entendem para facilitar o debugging.

O parâmetro -d informa que o processo de watch deve ficar executando e aguardando as modificações.

O parâmetro -v significa que o modo é “verboso”, todas as informações de erro e tradução devem ser lançadas no terminal.

O parâmetro -o significa o arquivo de saída que será gerado como no babel e no browserify.

Agora voce executar a task no terminal e deixar traduzindo:

https://gist.github.com/72734f9f5e799d3407f7a2c1274a3108

Realize qualquer mudança no arquivo e veja no terminal o reflexo da sua alteração, como por exemplo:

https://gist.github.com/8345893d699a72975f0616a0cb32c426

A saída do terminal ficará com algo assim:

https://gist.github.com/974f19b1035c4bb27ff3373df3b5dc59

Considerações finais

O Browserify já sente o peso da idade e é aconselhado usar o Webpack, mas é excelente para demonstrar o Babel porque as outras ferramentas escondem os detalhes, o que não é errado.

Espero que esse artigo/tutorial ajude principalmente a desenvolvedores Backend que querem conhecer o fantástico e admirável mundo novo.


Originally published at gist.github.com.

JSX, a resposta do React pra resolver definitivamente um problema

Uma pergunta do Kewerson Hugo no meu post “Os músculos do Javascript” me lembrou de escrever sobre algo que parece tão simples, mas esconde nuances importantes que menosprezamos e deixamos de explicitar.


Respondendo diretamente: Template literals só resolve interpolação de strings e nada mais.

Em vez de fazer coisas como o primeiro código, pode interpolar valores em uma string usando o acento grave como marcador dessa string como pode ver no código seguinte.

https://gist.github.com/cmilfont/09b0623feaa3b6caaf1a01914747e3d4#file-template-concat-js

Engines de Template

Desde 1990 quando o HTML foi criado que ninguém tinha pensado (e se pensou não entregou) levar o XML pra dentro da linguagem para montar templates em vez do contrário como fizeram com PHP, JSP, ASP e todos os seguintes.

Há alguns poucos anos eu palestrei uma Lightning Talk no QCONSP sobre estratégias de engines de template em javascript.

Já na época eu contava mais de 20 existentes, não importa que estratégia era, tudo se resumia a no fim das contas concatenar/interpolar strings com estratégias mais elaboradas.

Templates não existem mais

Em 2013 quando o React surgiu eu lembro de um grande amigo, Mozart Diniz, me perguntar:

“- Milfont, o que acha desse React?”

E eu na minha ignorância usando meus preconceitos, respondi:

“- não vai dar em nada, idiotice”

Como sempre o idiota sou eu e talvez por isso eu seja pobre, na hora o que me veio a mente foi Javascript Obstrutivo™.

Interfaces Gráficas

Na própria página do JSX na documentação do React eles são bem humildões e dizem que é apenas um assucar sintático para o React.createElement.

É óbvio que JSX funciona muito bem com o Virtual-DOM, um assucar sintático pra montar a árvore DOM virtual dentro da sua árvore de componentes e usar uma linguagem ubíqua falando e mostrando as mesmas estruturas pra ir modelando o mindset de “dados sempre da raiz pras folhas”, unidirecional, etc.

Mas o que não percebemos até gastar algumas horas é o quão maravilhoso é esquecer de templates e considerar que XML agora é uma extensão bem vinda dentro da linguagem como cidadão de primeira classe no Javascript.

Atributo vira propriedade, tag vira classe na compilação, isso é só mais uma sintaxe Javascript, baby!

Se é linguagem, eu posso escrever uma ferramenta que compile, analize, verifique, me notifique e complete código.

Valores morais e boas práticas

Como template não existe mais, o que temos é um componente em uma linguagem que tanto devs quanto designers entendem (parcialmente pelo menos).

Por isso bato muito no curso de React sobre evitar trazer as más práticas da época do template pra o JSX, código como o seguinte é fácil de entender e talvez até o designer que não saiba programar consiga com algum esforço.

https://gist.github.com/cmilfont/60e77f8c7836aed63f98e4dbdd30fcc0

Em vez disso, escreveria como o seguinte.

https://gist.github.com/cmilfont/52026518d75b846c56d335ccbc484280

Parece bobagem a primeira vista, mas é civilizatório, acredite.

Quando um código em sintaxe XML cresce você decompõe em sub-componentes e tenta evitar dentro da marcação ter algum fluxo em outra sintaxe, apenas demarcações.

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

Os seus containers mais avançados com ciclo de vida se tornam também mais limpos e claros para todos os envolvidos no projeto.

Eu não consigo mais trabalhar com HTML fora do meu código Javascript.

Uso WebStorm (com essa extensão pra React) e Atom (no Atom o Nuclide e a extensão React por causa dos snippets dele).

Experimenta e me diz o que achou do JSX.

Ah, com o Babel, seja Webpack ou Browserify, você consegue usar em qualquer projeto.


Ah, pra quem se incomodou com assucar essa é a grafia correta. Jornais antigos demonstram isso.


Processo democrático no CEJS

Inaugurando um formato inédito (até que provem ao contrário nos comentários), fizemos uma chamada para submissão diferenciada no CEJS 2017 que ocorrerá no dia 13 de maio.

Uma reclamação constante ano após ano era qual processo e que critérios os coordenadores usavam pra escolher os palestrantes pra conferência CEJS.


Pois bem, apesar do Brasil não ter tradição no processo democrático, convocamos as ruas (inscritos no evento até aquele momento) para assistirem uma apresentação de 15 minutos (aproximadamente) no formato de Lightning Talk sobre o que o candidato gostaria de compartilhar no dia 11 de fevereiro. Palestra focada em apresentar o cerne do assunto e deixar o suspenso pra grande conferência.

P2115300

Apresentação.

Todas as submissões apresentadas já se encontram no site. Confira!

Dois palestrantes por motivos de força maior não puderam apresentar, infelizmente. Apesar da chuva forte no dia, outra falta de tradição cearense, umas 30 e poucas pessoas compareceram para exercerem sua cidadania.

Lista de LTs submetidas

Escolha

Aqueles que participaram do dia da apresentação tiveram uns 15 dias aproximadamente para votarem nas 3 melhores. O resultado final:


Os 3 escolhidos pelo povo foram:

  1. PWA já é possível? por Christiano Milfont com 77,3%.
  2. Criando aplicações componentizadas com Polymer por Felipe Sousa com 68,2%.
  3. Lidando com Efeitos Colaterias com Redux Saga por Filipe Costa com 63,6%.


ps. Para provar que o processo é democrático de verdade, até coordenador do evento teve que respeitar e participar do pleito.

Apesar do povo escolher sabiamente, aqueles que não votaram na escolha do partido foram devidamente encaminhados para o serviço de inteligência para disciplina em campos de reeducação.

Mais eventos ocorrerão antes da conferência, no CEJS é assim, o evento ocorre no ano inteiro.