Ontem, 05 de julho, aconteceu em São Paulo o tão esperado JS Experience 2018, evento do iMasters totalmente focado em JavaScript, e para deixar nossos leitores antenados, preparamos um artigo especial, resumindo o conteúdo apresentado nesta edição e disponibilizando os slides das palestras.

Com ingressos esgotados, esta edição recebeu mais de 800 pessoas de diversas áreas do desenvolvimento. O evento, realizado no Renaissance Hotel, começou às 09h30, com abertura de João Batista Neto, Tech Leader do iMasters, dando as boas vindas ao público, que lotou o auditório principal. O primeiro palestrante a subir no palco foi Derek Stavis.

Derek Stavis – JavaScript Event Loop além do setInterval

Você já ouviu falar que o Node.js tem um event loop? Que aplicações no browser são orientadas a eventos? Qual a diferença de um runtime que tem event loop e os que não tem?

Derek desmistificou todos esses paradigmas em sua talk, explicando como funciona o event loop do Node e Browser e mostrando quais APIs além do setInterval existem para agendar eventos. Para começar sua apresentação, o engenheiro de software resgatou os principais conceitos e apresentou as características da linguagem JavaScript.

Depois de resgatar o conceito de JavaScript, Derek explicou cada uma das funções abaixo e ilustrou com alguns exemplos nos slides de sua apresentação.

• Call stack
• Task queue
• Event loop
• Vendor APIs

O ponto alto de sua palestra chegou com a explicação dos conceitos de Event Loop, Task Queue e HTML Event Loop, onde o palestrante apresentou todos os passos do mainloop e a ordem que eles ocorrem.

“Devemos separar a linguagem JavaScript do que é um mainloop”

Durante a apresentação, o autor trouxe alguns desafios de forma bem-humorada para a plateia, com algumas perguntas sobre os códigos. Algumas respostas que pareciam óbvias, acabaram surpreendendo o público presente.

Slides: JavaScript Event Loop além do setInterval

Lucas Santos – Desmistificando herança e prototypes no JavaScript

Todo programador JavasScript já se deparou com algo chamado Prototype e muitas vezes já até precisou usá-lo sem saber!

Se você sempre quis saber tudo o que existe sobre o uso de herança e Prototypes no JavaScript de uma forma simples e prática, a segunda palestra do JS Experience 2018 foi feita pra você!

Lucas Santos começou sua apresentação descrevendo o que é Encapsulamento, Polimorfismo e falou também sobre alteração do objeto de acordo com a necessidade, seguindo para o terceiro pilar, chamado de Herança. Capacidade que envolve o instanciamento de um objeto.

Apresentou também os tipos originais e explicou o funcionamento de cada uma das funções abaixo em relação ao proto, padrão atribuído aos browsers.

• Array
• Function
• Objeto

Se você não pôde comparecer ao evento, aqui vai uma dica importante do palestrante:

“Não mexa no proto. Ao invés disso, podemos mexer no Prototype”

Ele também explicou o que é uma herança de protótipos, cadeia de protótipos e o fim dela, sempre exemplificando tudo nos slides da apresentação. Lucas encerrou sua apresentação falando sobre métodos globais, overload e seus problemas, e performance.

Slides: Desmistificando herança e prototypes no JavaScript

Maria Clara Santana – “Who watches the watchmen”: testando nossos testes

Voltando com força total após uma breve pausa para um break recheado de lanchinhos e docinhos, Maria Clara Santana subiu ao palco para falar sobre testes, em uma apresentação com diversas referências geeks. Maria começou apresentando alguns tipos de erros de software bastante comuns e seguiu para dois conceitos de testes: White-box testing e Black-box testing.

Em seguida, em uma parte muito divertida da palestra, ela apresentou o conceito de “Mutation testing” e os diversos tipos de mutantes:

• AAR (array for array replacement)
• ABS (absolute value inception)
• AOR (arithmetic operator replacement)
• UOI (unary operation insertion)

E mencionou outros, como:

• Array constant replacement
• Logical connector replacement
• Relational operator replacement
• Constant replacement
• Return statement replacement
• Statement deletion

E exemplificou o Original program, Test suíte e os diferentes tipos de Mutant.

Para encerrar a apresentação, Maria apresentou a ferramenta de testes chamada Stryker e explicou as vantagens e desvantagens dos testes.

Stryker

• Open source
• Active maintanence and improvements
• Supports most of the mainstream runners (karma, jasmine, etc),
• Doesnt support React

Vantagens dos testes 

• Application safety: ao checar os métodos internos, você consegue fazer uma avaliação de edge cases, e também consegue ter um design melhor dos testes.

Desvantagens

• Alto custo computacional
• Filtrar mutantes equivalentes ainda não é uma tarefa otimizada.

Slides: “Who watches the watchmen”: testando nossos testes

Igor Halfeld – Os segredos dos principais frameworks JS: Vanilla.js

E você? Está por dentro dos conceitos dos frameworks modernos? Já entende como angular/react/vue se fundamentam?

Em uma palestra bem humorada e repleta de memes, Igor Halfeld apresentou os segredos dos principais frameworks JS e explicou o que é JiT e AoT, ES6 Proxies, Object defineProperty e mostrou onde tudo isso é usado.

Para começar a apresentação, ele explicou o porquê do surgimento do framework Vanilla:

“Vanilla JS É! o JavaScript puro”

E logo em seguida se aprofundou nos frameworks Angular, React e Vue.js, contando um pouco da história e funcionamento de cada um.

Conceitos de DOM, Virtual DOM e os dois tipos de Data-binding, com uma demonstração de implementação dos dois tipos foram muito bem explicados durante a palestra.

No final de sua palestra, Igor focou em arquitetura de framework e explicou o que é preciso para que ele funcione bem, e trouxe para o público os conceitos de AST (Abstract Syntax Tree) e Tipos de compilação (JIT e AoT). Para encerrar em grande estilo, ele fez uma demonstração de um conversor de markdown para HTML.

Slides: Os segredos dos principais frameworks JS: Vanilla.js

Round Two!

Após uma pausa para recarregar as baterias, o JS Experience retornou com Rodrigo “pokemaobr” Cardoso, Community Manager do iMasters, que recebeu o público com um Stand-Up no auditório principal para a segunda parte do evento. Depois de arrancar muitas risadas e aplausos do auditório lotado, Rodrigo deu início à edição especial do 7Masters.

7Masters – JS Experience 2018

Tradicionalmente realizado no Hub do iMasters, o 7Masters deste mês ganhou uma nova casa e foi realizado no auditório principal do JS Experience. A edição especial recebeu as seguintes talks:

• Diego Pinho explicou um dos pontos mais confusos do JavaScript, a coerção de tipos e mostrou que nada no JavaScript é por acaso.
• William Bruno falou sobre programação funcional e explicou o que é esse conceito.
• Erick Wendel mostrou como gerenciar o fluxo assíncrono de operações JavaScript.
• Ana Bastos apresentou a recursão em JavaScript e mostrou como lidar com tail-call optimization em loops recursivos utilizando a técnica de trampolines.
• Alan Cezar falou sobre a importância da segurança para desenvolvedores na web e como otimizá-la.
• Carol Soares mostrou como utilizar práticas de código com JS puro e se livrar gambiarras e frameworks.
• Carolina Pascale explicou o conceito de Serverless e os principais benefícios deste conceito.

Ao término dessa edição especial do 7Masters, foi aberta uma rodada de perguntas para os sete mestres presentes no palco.

Juliana Negreiros – Jogos em JavaScript com WebGL

Já pensou em criar jogos 3D no browser usando Javascript?

Gamers de plantão, essa é a palestra!

Juliana Negreiros explicou o que é o WebGL, onde começar e onde podemos aplicá-lo. Para isso, ela apresentou um projeto de desenvolvimento de um jogo de labirinto 3D com WebGL, e explicou ao longo da palestra o funcionamento dessa API de renderização de gráficos 2D e 3D.

WebGL (Web Graphics Library)

“Web Graphics Library é, basicamente, um padrão nativo que existe nos brownsers que permite a criação em 3D”

Prós

• Cross-browser
• Inúmeros Frameworks
• Gratuito

Contras

• Complexo
• Custoso
• Navegador requer aceleração de hardware

Juliana também mostrou como o WebGL funciona e o que ele pode fazer na prática com os recursos de Cena e Câmera. Para finalizar, ela apresentou um jogo chamado Endless Runner, e explicou como ela trabalhou no desenvolvimento do jogo.

Slides: Jogos em JavaScript com WebGL

Luiz Fernando Rodrigues – Do jQuery aos microfrontends: os desafios de manter uma aplicação web

Temos diversas ferramentas e técnicas para construir aplicações escaláveis, mas depois de quase uma década de desenvolvimento, como manter uma aplicação sem reescrever tudo?

Luiz Fernando Rodrigues apresentou algumas características que uma aplicação web deve ter e falou sobre os principais desafios, erros e acertos ao desenvolver um produto usando JavaScript.

“Uma aplicação web deve ser atrativa, simples de usar, acessível e rápida”

Para começar sua apresentação, ele contou um pouco de sua trajetória profissional até chegar na empresa em que trabalha atualmente. Em seguida, falou sobre os principais desafios de manter uma aplicação web e apresentou um case real já ultrapassado, onde:

• O HTML era gerado no servidor.
• A camada de estilo era escrita com Less para facilitar a criação de temas.
• O comportamento era feito com JavaScript puro e bibliotecas como a clássica jQuery.

Em seguida, mostrou as vantagens e desvantagens do AMD como sistema de módulos.

Prós

• Tinha uma ótima comunidade de apoio em torno da principal implementação: RequireJS.
• Bibliotecas como jQuery e Lodash faziam uso da implementação.
• Evita que o usuário baixe script desnecessário.

Contras

• “Esconde” tamanho da aplicação.
• Bibliotecas que não dão suporte padrão dificultam o uso.
• Após chegada do ES Modules, ficou custoso reescrever tudo.

Luiz também deu algumas dicas para times de desenvolvimento que trabalham em projetos para manter aplicações web.

Dores

Antes de tudo, é preciso saber onde estão as dores do time. Uma das maneiras de resolver é criar débito técnico. Os débitos técnicos ajudam a identificar o quanto os times estão investindo em soluções paliativas e também servem para documentação de históricos.

Recurso – Modelo de maturidade

É um modelo que ajuda a determinar a eficácia de um software e onde ele pode ter um desempenho melhor.

Projetos de Big Picture

A cada trimestre, desenvolvedores faziam proposta de projetos em que eram priorizadas por eles mesmos e cada projeto poderia ser executado por dois desenvolvedores.

Para finalizar sua apresentação, Luiz apresentou as vantagens e desvantagens do Microfrontend:

Prós

• Provê uma maior autonomia para os times tomarem suas próprias escolhas.
• Nos deu a possibilidade de testarmos novas tecnologias e paradigmas.
• O build/deploy é, consequentemente, bem mais rápido que o momento.

Contras

• Ainda é algo novo e pouco explorado pelo mercado. Muito do que fizemos foi dentro de casa.
• Precisamos de disciplina e muito alinhamento para evitar retrabalho dos times.

“Valorize as pessoas. Pessoas acima de tecnologia, acima de processos. Tenha empatia; é disso que estamos precisando”

Slides: Do jQuery aos microfrontends: os desafios de manter uma aplicação web

Marina Limeira – Consumindo GraphQL + gerenciando o estado de aplicações utilizando Apollo

Na etapa final do JS Experience 2018, Marina Limeira, Engenheira de Software na Nubank trouxe a essência do GraphQL para o palco do evento. Ela explorou alguns conceitos e vantagens que fizeram o Nubank adotar essa tecnologia e apresentou o Apollo, uma biblioteca tanto client-side quanto server-side para aplicações que utilizam essa tecnologia.

GraphQL

• Agnóstico a linguagem, tanto pra cliente quanto para servidor
• Query language para APIs
• Alternativa ao REST
• Schema funciona como um contrato entre o cliente o servidor

APOLLO-LINK-STATE

“Se não estivéssemos utilizando GraphQL, não utilizaríamos o apollo-link-state”

Slides: Consumindo GraphQL + gerenciando o estado de aplicações utilizando Apollo

William Grasel – Publicando Projetos OpenSource em JavaScript

Já teve interesse de publicar algum projeto no NPM e ficou em duvida como gerenciar as versões, como funcionam as licenças de software, como configurar integração continua, o que precisa ser testado, como gerar o build correto, além de gerenciar issues e pull requests sem ficar louco?

Quem assistiu a palestra de encerramento de William Grasel pôde aprender a fazer tudo isso da maneira certa, automatizando tudo o que for possível para publicar projetos de maneira rápida e sem medo!

William Grasel começou sua palestra trazendo uma breve história sobre JavaScript Modules, explicando como funcionam as famosas licenças de software e mostrando que elas não são um bicho de sete cabeças.

Em sua talk, ele ressaltou a importância dos testes e onde eles devem ocorrer para gerar um build correto, e mostrou como gerenciar issues e pull requests da melhor maneira possível.

Slides: Publicando Projetos OpenSource em JavaScript

Agradecemos a participação de todos os convidados e palestrantes presentes nesta edição do JS Experience 2018 – foi um prazer. Quaisquer dúvidas e sugestões serão muito bem vindas. Comente logo abaixo ou venha tomar um café conosco e conhecer o Hub.

Fiquem ligados, o próximo evento do iMasters está chegando! Nos vemos na InterCon 2018!

We are developers!