Concrete Logo
Hamburger button

Como foi o Coders on Beer de JavaScript no Rio?

  • Blog
  • 17 de Maio de 2018

Na última terça-feira (dia 15 de maio) chamamos os coders cariocas para falar sobre JavaScript com pizza e cerveja no nosso escritório do Rio de Janeiro. E parece que a galera gostou da ideia! A casa encheu e foi uma ótima oportunidade para todo mundo aprender um pouco mais sobre front-end e fazer networking.

Wallace Coelho começou a noite falando sobre Webpack. Primeiro ele apresentou os módulos, que são pequenos pedaços de código para facilitar o desenvolvimento, debug e teste, e depois mostrou como funciona a técnica de module bundling, que de forma bem resumida é o processo de unir um grupo de módulos e suas dependências em um único arquivo, para que o browser responda mais rápido.

Segundo Wallace, existem várias ferramentas que podem ajudar nessa tarefa, como o Browserify e o Rollup, mas a preferida dele é o tema da talk, o WebPack. E por que usar o Webpack? Segundo Wallace, porque ele compila arquivos de modo a tornar todos os tipos de arquivo (seja .jsx, .sass ou .ts) legíveis no browser.

A partir dessa introdução, Wallace entrou mesmo na ferramenta e explicou cada um de seus conceitos básicos (entry, output, loaders e plugins) antes de destacar as “cool things”: integração com o Babel, Tree Shaking, Code Splitting, Uglify e Source Maps. Você pode dar uma googleada em cada um desses tópicos, mas o mais relevante é que basicamente o WebPack pode deixar seu código mais limpo e mais funcional.

Antes de passar o bastão para o André, Wallace ainda comentou sobre o WebPack 4, que propõe builds até 98% mais rápidos (em casos extremos, mas com certeza entre 40 e 60% mais rápidos), plugins mais automatizados, suporte a JSON e Webassembly e zero (or less) configuration. Parece interessante, não? Se você quiser saber mais, aqui está a apresentação que ele fez.

Wallace Coelho falando de WebPack.

Aí foi a vez do André Araújo, nosso Renato Russo, que falou sobre CSS in JS, ou como estilizar aplicações modulares. Ele começou explicando o Caos (ou a abordagem tradicional, o bom e velho CSS), no qual os desenvolvedores podem estar criando um monstro com folhas de estilos caóticas e sem padrão e só perceber isso tarde demais. Neste cenário, o código é extremamente difícil de manter, temos altos índices de gambiarra, um único arquivo e muitos conflitos durante o versionamento.

Para resolver esse problema e ter uma CSS mais escalável, criamos convenções e outras formas de escrever, como os pré-processadores, que André chama de “o bom e novo CSS”. Ele explicou que arquiteturas e convenções como o ITCSS, RSCSS e o BEM ajudam a manter o código mais legível e fácil de manter, enquanto pré-processadores como o LESSCSS e o SASS tornam as folhas de estilo mais enxutas e agilizam o processo de estilização. É claro que ele explicou essa sopa de letrinhas aí detalhando cada uma das convenções e pré-processadores, mas se você quiser saber mais dá uma olhada na apresentação dele.

Depois André ainda falou sobre CSS modules, que é capaz de criar escopo dinamicamente em tempo de build nas classes CSS, antes de finalmente entrar no tema propriamente dito “CSS in JS”. Ele mostrou que o CSS usando JavaScript tenta resolver o problema de aplicações complexas e modulares de uma maneira diferente, criando estilos em tempo de execução e inserindo o resultado no HTML usando a tag <style/>.

A partir daí André partiu para JSS e style-components, explicando as características de cada uma das abordagens, e terminou com um ensinamento:

“Não existe uma maneira correta de se fazer aplicações, mas a abordagem mais adequada para cada situação.” (Araújo, André. 2018)

André Araújo com CSS in JS.

Chegamos à última talk do nosso Coders, que foi com Miguel Albernaz falando sobre como transformar código com ASTs, ou “Abstract Syntax Tree”, árvore de sintaxe abstrata. Abstrato demais? Bom, basicamente são estruturas de dados usadas em compiladores para representar a estrutura do código. O AST é geralmente o resultado da análise de sintaxe de um programador.

E por que se importar com isso? Também para ter um código mais enxuto e funcional. Miguel mostrou na prática como isso funciona por meio de um hands-on, para fechar em grande estilo o nosso encontro. Quer saber mais? Dá uma olhada na apresentação dele aqui.

Miguel Albernaz falando sobre ASTs.

E assim chegamos ao fim de mais um evento cheio de conhecimento compartilhado e networking. Se você estava aqui, deixe nos comentários seu feedback (ou pode responder a este form também). Se você não veio, não sabe o que perdeu =P Fique atento às nossas redes sociais para saber dos próximos! Até logo =)

A Concrete é uma empresa da Accenture especializada no desenvolvimento ágil de produtos digitais. No capítulo de JavaScript nós trabalhamos com metas possíveis, porém desafiadoras. Fazemos parte de um time multidisciplinar, autogerenciado e auto-organizado e focamos no aprendizado contínuo, seguindo sempre práticas ágeis e lean de desenvolvimento. Nosso objetivo é transformar ideias em resultados concretos, com excelência! Quer fazer parte? Acesse: concrete.com.br/vagas