O QUE APRENDEMOS NO MAIOR EVENTO DE JAVASCRIPT DO MUNDO

Nos dias 24 e 25 de Agosto rolou em Porto Alegre a sexta edição da maior conferência sobre Javascript do mundo. Durante quase 20 de horas de evento, se apresentaram em um palco único 24 palestrantes de peso, referências no assunto.

Eu e meu colega Milton saímos de lá cheios de aprendizados, anotações, insights e muita vontade de colocar tudo em prática. Como não é possível falar de todas, nós separamos 6 apresentações que mais chamaram a nossa atenção:

ADA ROSE CANNON — The Intersections of New Web APIs

Ada, developer advocate da Samsung, abriu o evento apresentando as novas APIs da web e as possibilidades que isso traz ao nosso dia a dia de desenvolvimento. Certamente novas ferramentas foram adicionadas a minha caixa, e o mais legal é que são todas nativas, sem imports. Começou pelo Grid CSS, um sistema de layout grid de duas dimensões nativo em css (linha e coluna), diferente do flexbox que atende apenas uma dimensão. Grid CSS é uma grande evolução em uma web onde performance é tão importante, sendo possível uma estruturação completa de layout e responsive design de forma bastante simples, sem ser necessário o uso de pesadas bibliotecas ou frameworks externos.

Depois, a desenvolvedora apresentou a Web animation API. Atualmente, a forma mais comum de se construir animações na web de forma semântica é por meio de CSS animation ou CSS transitions, no entanto, animações geralmente exigem interações via Javascript, o que dificulta o controle de eventos quando toda a animação é controlada por CSS. A Web animation API é bastante semelhante em aparência e comportamento à API CSS, mas é em Javascript, o que resolve os problemas de interação e eventos. Trabalhar com animações pode ser muito complexo e custoso devido à manipulação de classes CSS para controlá-las. O que essa nova API propõe é simplificar a criação e manipulação das animações, com todos os recursos do Javascript, como por exemplo o assincronismo.

Por fim, Ada falou sobre os Web-components, um conjunto de tecnologias nativas ao browser que permite a criação de elementos customizados através de novas tags HTML. Entre as principais funcionalidades dos web-components estão:

• Shadow-dons, que permitem esconder elementos HTML dentro da tag customizada,
• CSS em escopo fechado para que o CSS do componente não propague e para que o CSS da página não interfira no estilo do componente
• Eventos Javascript de callback, disparados quando um componente é adicionado, removido ou manipulado.

As tecnologias Web componentes permitem a componentização nativa na web, uma escrita mais semântica e em muitos casos pode substituir bibliotecas de componentização como React.

MONICA LENT — The tech behind a design system that scales

Monica é tech lead na SumUp — uma startup alemã de máquinas de cartão de crédito e pagamentos que tem como missão tornar essa operação mais simples em todo o mundo. Essa foi uma das palestras mais interessantes de todo o evento para mim, em termos de conteúdo e comparação com minha realidade aqui na Aurum. Ela apresentou formas de escalar times, produto e ainda aumentar a produtividade dos desenvolvedores e oferecer uma experiência consistente ao usuário. A SumUp tem dobrado o quadro de colaboradores a cada 12 meses e está espalhada por Berlin, São Paulo, Cologne e Sofia. Com isso, manter padrões de design, layout e código se tornou um grande desafio, como tanta gente entrando, diferentes timezones e cultura, manter padrões e produtividade é algo até difícil de se imaginar. Monica mostrou a maneira como a SumUp resolveu esse problema foi criando um design system, uma coleção de componentes reutilizáveis, guiados por padrões bem definidos.

O modelo consiste em quatro partes:

1.Biblioteca de componentes para parar de resolver problemas já resolvidos e, de fato, usufruir da reutilização

2. Documentação, o que torna mais simples para achar informações sobre a biblioteca, componentes já existentes e aplicações

3. Ferramentas que ajudam no processo de criação e evolução do framework

4. Processos bem definidos permitem contribuições constantes, ao mesmo tempo que a qualidade é mantida.

Essas partes combinadas propiciam eficiência, reusabilidade e informação. Com esses princípios de design system, a SumUp criou o projeto open source circuit.ui, que aplica todos esse conceitos. Essa palestra nos inspirou bastante, uma vez que (ainda que nas nossas proporções), estamos crescendo e, manter padrões, consistência e aumentar nossa produtividade é também nosso desafio. Conhecer a forma como a SumUp resolveu os mesmos problemas nos deu guidelines de como vamos resolvê-los na Aurum.

MATHIAS BYNENS — V8 internals for JavaScript developers

Mathias fechou o primeiro dia apresentando como funcionam as otimizações de Javascript no Google Chrome que, segundo ele, funcionam de forma bastante semelhante com todos os outros browsers. Estávamos com muita expectativa para essa palestra pois já seguíamos Mathias no canal do Youtube google chrome developers e havíamos recentemente acompanhado sua apresentação no último google I/O, onde ele falou sobre as novas features Javascript e otimizações na engine v8. Ver Mathias pessoalmente foi algo que por si só, já fez valer a viagem de Florianópolis para Porto Alegre para participar do evento. Ele deu muitas dicas de como podemos otimizar nossos códigos Javascript, como por exemplo cuidar para que nossos arrays tenham sempre o mesmo tipo. Mas a principal mensagem foi que devemos nos preocupar em sempre escrever um código o mais moderno possível, que internamente eles cuidam das otimizações.

ADAM BALDWIN — Becoming a security minded developer

O segundo dia da conferência foi aberto pelo Adam Baldwin, que é Head of Security na NPM Inc. Adam falou em sua palestra como se tornar um desenvolvedor com mindset de segurança, e deu dicas de como podemos melhorar a segurança de nossas aplicações utilizando o NPM.

Para se tornar um desenvolvedor com mindset de segurança, Adam sugere utilizar um framework dividido em hábitos, processos e ferramentas.

As dicas giraram em torno da constatação de que somos criaturas de hábitos, e se não temos o hábito de pensar em segurança quando desenvolvemos, isso pode ser adquirido através de alguns passos.

Para mudar nossos hábitos precisamos de lembretes (reminders), rotina (routine) e recompensas (reward)

Na parte de processos a sugestão é utilizar check-lists para verificar se todos os pontos foram observados. Ele também falou sobre utilizar um Modelo de Ameaças (Threat Modeling) se fazendo as seguintes perguntas:

“Quão ruim um ataque pode ser?”

“Quão fácil é reproduzir o ataque?”

“Quanto trabalho é preciso para lançar o ataque?”

“Quantas pessoas serão impactadas?”

É importante também dar bastante atenção à revisão de pull requests, que muitas vezes são negligenciados.

Neste processos devemos pensar nas entradas e saídas possíveis do código que estamos analisando, quais dependências e novas tecnologias foram adicionadas e se existem testes.

Por fim Adam apresentou uma funcionalidade do NPM que ajuda a melhorar a segurança das aplicações Node: o npm audit. Através deste comando, é possível ver falhas de segurança tanto no projeto quanto nas dependências utilizadas, e até mesmo é possível corrigir alguns problemas utilizando o comando npm audit fix.

KYLE SIMPSON (@GETIFY) Keep Betting On JS

A talk de Kyle Simpson foi um convite a continuar insistindo no Javascript. Kyle é o criador da série “You don’t know JS”, que são livros que ensinam Javascript dividindo as funcionalidades da linguagem em pequenas partes. Na apresentação ele contou como foi o seu início com o desenvolvimento Javascript, e quais foram as motivações para escrever a série.

Kyle também destacou as mudanças que ocorreram no Javascript ao longo dos anos, até chegarmos em um cenário de divisão: de um lado Javascript como linguagem, do outro Javascript como plataforma. Outra coisa que foi destacada na palestra foi o lado humano da programação, nas palavras de Kyle “Programing is not about tech, is about people”. O que ele quis dizer foi que devemos pensar sempre nos nossos usuários quando estamos desenvolvendo, tanto nas questões de usabilidade/acessibilidade quanto até na infraestrutura que estes usuários terão para interagir com a aplicação (dispositivos e velocidade de conexão por exemplo).

Por fim, o que pudemos tirar da palestra foram algumas apostas que devemos fazer neste ecossistema de desenvolvimento Javascript que são: PWA (progressive web apps), acessibilidade para alcançar um número maior de usuários e continuidade no meu aprendizado e desenvolvimento, sempre buscando aprender de forma incremental.

MILSON JUNIOR React. Em busca da arquitetura ideal

Na busca por uma arquitetura ideal ao se trabalhar com React, Milson contou como foi sua experiência trabalhando com o framework e os problemas que encontraram que levaram ele e seus colegas de IQ360 a mudarem a arquitetura do Front-end das aplicações. A palestra começa com Milson dizendo que “Não existe arquitetura ideal”, e isso é completamente verdade, pois nem sempre o que funcionou para eles, vai funcionar para outras empresas. Além disso ele também ressaltou a importância de não se apegar a determinados frameworks e que nenhuma solução é definitiva, sempre devemos aprender os fundamentos e propor mudanças quando necessário.

Milson também fez uma pequena introdução sobre React e algumas divisões importantes nos componentes que criamos utilizando este framework. Ele classificou os componentes em dois tipos:

Dumb Components: que possuem somente a camada de visualização, não tem estado e nenhuma lógica.

Container Components: estes por sua vez agrupam os dumb components e possuem estado e lógica.

Esta seria a forma como todos que começam no React aprendem a trabalhar, porém o principal problema é que se um container component é muito complexo, as coisas começam a se misturar e os arquivos ficam muito grandes.

A solução para estes problemas veio da redefinição da arquitetura proposta por Milson nesta talk, onde utilizando a biblioteca Recompose, ele sugere isolar as camadas de:

• Data: onde as requisições para carregamento de dados são feitas
• State: camada que controla o estado do componente
• Handlers: camada que lida com handlers e métodos de controle
• Hooks: responsável por gerenciar o ciclo de vida do componente
• Props Mapper: mapeamento das propriedades do componente

Apesar deste modelo de arquitetura funcionar muito bem na separação das camadas, o próprio Milson disse que esse nível de complexidade aumentou a curva de aprendizado dos novos membros da equipe.

Conclusão

Definitivamente, é impossível dizer que as palestras tiveram temáticas uniformes. Cada speaker trouxe uma informação nova e agregou em um aspecto diferente. Alguns focaram no futuro do JavaScript, nas tendências e tópicos novos.Outros mostraram como o lado pessoal e humano da programação é tão ou mais importante que a parte técnica.

Um dos pontos altos do BrazilJS foi ver desenvolvedores de diversas nacionalidades e de grandes empresas trocando conhecimento com os participantes. Não era difícil se esbarrar com alguém da Google e ver que, além de um profissional extremamente talentoso, ele ainda era acessível para tirar dúvidas. O evento também promoveu bastante network entre os participantes mais engajados.

Esperamos estar lá novamente no próximo evento, e que seja tão bom quanto foi neste ano.