FrontinBH 2014

Bom demais da conta. É a sensação que fiquei depois de retornar de BH pra São Paulo. Foi meu primeiro "frontin" fora do meu estado. E realmente já estou ansioso pra voltar ano que vem!

Pela primeira vez senti de perto como a comunidade de programadores é grande e como a nossa área pode fazer coisas incríveis com relação a eventos e conteúdo de qualidade.

Me esforçarei em resumir tudo que presenciei no sábado, dia 26/07, dia do FrontinBH, por mais que haja tanta coisa boa pra contar.

A viagem

Quando pisei em Congonhas e fiz o embarque já encontrei um "conhecido de internet" no mesmo vôo, o Felquis, criador do DevCast. Apesar de sempre trocar ideia pelos grupos de Facebook nunca tínhamos nos falado pessoalmente.

Já no avião, olhando à direita, vi um maluco com um Macbook Pro aberto com vários adesivos de N linguagens, programando em pleno vôo. "Esse cara vai pro FrontinBH", pensei comigo. Mas acabei nem falando com ele.

No ônibus de Confins pra BH acabei confirmando minha tese e conhecendo o Cirdes, co-founder do Eventick. E aí, fomos eu, Felquis e Cirdes conversando sobre tudo (e minha esposa, que é dentista, só ouvindo =D). Falamos de ambiente de trabalho, mercado, novas ideias, projetos... foram mais de 40 minutos num meetup no busão =D.

Começamos super bem, pensei.

A cidade

Belo Horizonte é super simpática. Tem um ar interiorano em contraste com a agitação de cidade grande. A coisa mais impressionante é o carisma do pessoal. Seja no atendimento ou numa conversa qualquer em algum lugar a simpatia do mineiro é marcante. Além do sotaque que é um show à parte.

Não faltam pontos pra visitar, seja de dia ou à noite. No domingo, dia que retornei pra SP, fui ao mercadão - LOTADO! -, ao Palácio da Liberdade - cheio de história e muito bem conservado - e ao Centro Cultural do Banco do Brasil, numa exposição sobre a ditadura. Pena que estava chovendo e não aproveitei mais pontos turísticos no entorno da Praça da Liberdade.

À noite, a Savassi é o ponto recomendado. Ali tem de tudo que você imagina no quesito bares e restaurantese pra todos os gostos, e aí fica difícil de escolher.

O evento

O local do FrontinBH foi muito bem escolhido, próximo às avenidas principais de Belo Horizonte. Além disso, a UniBH tem uma excelente estrutura. O teatro é bem aconchegante e espaçoso, com iluminação, projeção e som incríveis. A equipe que cuidou disso tudo merece respeito.

O pessoal da organização sempre muito simpático era bem pró-ativo e fui logo encaminhado para o checkin do evento sem muita dificuldade.

O almoço estava delicioso e também o coffee-break. O único ponto negativo é que as paradas para o café aglomeravam o pessoal nas mesas, que não eram muitas, tornando quase impossível chegar nos quitutes. Uma parte da culpa é dos programadores, viciados na bebida quente e preta.

As palestras

TL;DR

Em resumo, gostei de quase todas, mas as que se destacaram foram a de Designer e Front-end Dev: Prontos para Mudar seu Workflow?, Tracking.js: Uma Nova Dimensão e Everything is a polyfill: Automating a Maintainable Front End. Mas se quer mais detalhes, leia todo o resto do post =D.


UI TEST FRAMEWORKS

A primeira palestra foi sobre frameworks de testes para front-end. Inicialmente vimos um breve histórico de como as aplicações eram (bagunçadas, misturadas e confusas) e como ficaram (modularizadas e abstraídas).

Com isso, os testes pra front-end tornaram-se tão necessários quanto os de server side. Pra auxiliar ainda mais o desenvolvedor existem vários frameworks de testes, conforme listados na palestra: Jasmine, QUnit, Mocha, Buster.js.

Além dos frameworks, alguns utilitários foram citados, como o Karma, Chai, Sinon.js, entre outros.

A dupla também citou alguns conceitos como Spies, Stubs, Mocks e Fakes, terminando a palestra com exemplos de configuração de testes e demonstrando alguns cenários.

Minha opinião

Achei a palestra bem objetiva, com um review rápido da importância do teste no desenvolvimento e dos frameworks de teste.

O único ponto ruim foi que, no final, quase não deu tempo de demonstrar o código dos testes. Acredito que foi mais um erro de timing do que de conteúdo. Outro ponto foi o de mostrar a implementação e o teste lado-a-lado no editor, que atrapalhou um pouco também, pois não conseguimos visualizar bem as duas telas.

Tirando esses dois itens, é excelente saber que tem uma galera sempre incentivando e fazendo testes por aí, e o que é melhor, demonstrando como fazer. Gostaria de ver mais gente com essa pegada e falando mais sobre o assunto!


NODE IN THE BROWSER USING BROWSERIFY

O Browserify apareceu como surpresa pra mim. Nos últimos meses tenho trabalhado com javascript modularizado, mas usando praticamente só o Require.

Ele atua basicamente no reuso de módulos do Node, só que no browser.

O Browserify se encarrega das especificidades do browser ao portar core libraries do Node. Por exemplo, ele se encarrega de adaptar o http (library do core do node) para o XMLHttpRequest.

Resumindo, a palestra foi responsável por um dos memes mais usados do dia:

magic

Minha opinião

Realmente o Browserify é mágico. Já tinha lido sobre, mas a palestra foi bem sucinta ao explicar objetivamente o que é e como funciona.

Yamil conseguiu prender a atenção de todo mundo e me convenceu a usar o Browserify em breve.


ALÉM DA WEB

Essa palestra foi um show-off de como o browser não é o limite para desenvolvimento.

Michael apresentou vários casos de como podemos levar conteúdo pra fora do browser, não deixando os conceitos de front-end de fora, e reforçando a ideia de programar uma vez e rodar seus programas em vários lugares.

Ele também foi responsável por outro meme do evento, por conta da pouca familiaridade com português. Library então virou Livraria =D.

Um case que ele demonstrou foi o do Sound Node, um projeto open source que utiliza a API do SoundCloud, que surgiu da necessidade de ter um App desktop (que o SoundCloud descontinuou depois de um tempo).

Minha opinião

Essa talk foi bem generalista, e focou em mostrar mais o que um desenvolvedor consegue fazer além de um site. PhoneGap, Leap Motion e até o Tessel foram comentados rapidamente. Valeu pela demonstração das possibilidades que temos hoje.


DESIGNER E FRONT-END DEV: PRONTOS PRA MUDAR SEU WORKFLOW?

Junto com a apresentação do pessoal do Github foi a palestra mais bem feita - falando sobre layout e design dos slides.

Falando um pouco sobre a história do desenvolvimento web, desde o webmaster, webdesigner, webdevelopers e os flanelinhas de layout, a dupla mostrou que os desafios de antes são totalmente diferente dos atuais. Numa época, tínhamos 1 browser, 1 device, 1 forma de navegar.

O designer não tinha controle das alterações e da qualidade do produto final, feito no Photoshop ou outro programa pra criação de layout.

Os dois palestrantes venderam a ideia de pular a etapa da criação do layout e do recorte desse layout para HTML e CSS. Pra isso, demonstraram várias ferramentas de layout que exportam o markup e CSS, diminuindo o tempo de desenvolvimento e correção de possíveis erros de interface, como o Webflow.

Resumindo, o programador precisa focar no código e nas funcionalidades ao invés de remontar layout e de detalhes que são de responsabilidade do designer.

Com essa adaptação no workflow da empresa deles, o aumento de produtividade dos projetos foi de 40%.

Minha opinião

Não sou fã de programas que exportam código, mesmo que seja apenas de marcação e estilo. Isso era quase que a proposta do Dreamweaver, e todos sabemos a quantidade de lixo que era produzido nesse processo. É certo que hoje as ferramentas disponíveis são bem mais evoluídas, mas não podemos esquecer de outros fatores como semântica, acessibilidade, hierarquia das informações, microformats... Não é tão automático assim montar um markup como foi passado na palestra, mas sim, é oneroso.

UPDATE -> O Victor Arthur comentou que é possível escolher as tags do markup no Webflow. Já é um bom começo :)

Outro ponto é que não ficou muito claro o processo de alterações pós-exportação. Digo isso porque, no caso do desenvolvedor alterar um item do código exportado pela primeira vez, e haver outra exportação feita pelo designer, a dor de cabeça pra fazer esse merge é grande.

Finalizando, acho que essa realidade pode ser aplicada em sites menores e que precisam de um tempo menor pra serem desenvolvidos (que é o caso de agências de publicidade). Para serviços ou sites de grande porte, na minha visão, é uma realidade distante e problemática.


DA TELA RETINA AO GOOGLE GLASS

Pedro já chegou com a deixa do responsive ser obrigação. Demonstrou como funciona o retina display e pincelou o Device Pixel Ratio.

Logo depois vimos o Google Glass nesse contexto responsive e adaptivo. Uma das coisas interessantes que ele levantou é que não há input de dados no "ray-ban" da Google, além de mostrar alguns "gestures" do Glass.

Só pra deixar aqui registrado, o media-querie dele é:

device-width: 640px
device-height: 360px
width: 427px
height: 240px
orientation: landscape
-webkit-device-pixel-ratio: 1.5

Resumindo, a frase final foi "crie experiências não importa a tela". Gostei.

Minha opinião

Concordei praticamente com tudo o que o Pedro falou. Reponsive não pode ser apenas versão mobile de um site. É muito mais do que determinados tipos de device acessando.

Precisamos pensar num contexto geral de acessibilidade quando desenvolvemos interface. Não importa o tamanho ou capacidade, o conteúdo precisa ser acessível.


TRACKING.JS: UMA NOVA DIMENSÃO

De longe a palestra mais AWESOME do dia. Já tinha visto Tracking.js numa palestra do Eduardo Lundgren na BrazilJS do ano passado (ou seria retrasado?) e achei incrível, mas a versão 1.0 realmente surpreendeu.

O Tracking.js está definido hoje como algoritmos de computação visual, baseados em APIs dos browsers mais modernos. Em resumo, ele pode ser usado pra reconhecimento facial, de objetos e cores, detecção facial, realidade virtual, tudo usando algoritmos avançados em Javascript.

De cara ela já deixou uma dica sobre performance de Arrays tipados no JS, que são bem mais rápidos pra esses tipos de algoritmos que trabalham com muito processamento de informação.

Minha opinião

Isso sim é MÁGICO! Não tenho muito o que falar, apenas veja o site e descubra por si só: http://trackingjs.com/.


DESAFIOS NA ARQUITETURA END-TO-END JAVASCRIPT

  • palestrante: Ricardo Mello
  • link: não disponível

Se houve uma palestra difícil de entender foi essa. Ricardo começou falando sobre as dificuldades de um projeto, por ser muito "quebrado" em pedaços e como isso afeta o tempo de desenvolvimento. Ele nomeou isso de o "pesadelo da fragmentação".

A princípio achei que a solução que ele propunha era filosófica, mas no meio da palestra foi apresentado o Wakanda, que no fundo é uma IDE pra desenvolvimento rápido de aplicações.

O palestrante demonstrou como é rápido o processo de criação da aplicação e a simplicidade em criar relacionamentos entre modelos de dados.

No final da palestra, ele demonstrou como é simples utilizar uma livraria dentro do ambiente do wakanda, e demonstrou o tracking.js, palestra praticamente anterior a dele.

Minha opinião

Talvez seja porque Ricardo more na França, mas foi difícil entender em alguns momentos a fala dele.

Me perdi várias vezes na empolgação do palestrante em demonstrar o produto e acabei entendendo apenas que o wakanda é uma IDE completa pra modelagem, instanciação e desenvolvimento de um projeto. As outras coisas apresentadas giraram em torno dessa explicação.

Achei legal o conceito, mas como comentaram no Twitter, me lembra muito a propaganda do Delphi. Daí, dá um certo medo. Mas pode ser apenas preconceito. O correto é utilizar a ferramenta, testar e aí sim opinar sobre.


PADRÕES THROTTLE E DEBOUNCE EM APLICAÇÕES WEB

Almir apresentou dois tipos de problemas que temos no Javascript, que são o controle de frequência de eventos e da quantidade deles - Throttle e Debounce respectivamente.

Explicando o conceito do que cada um é, foram exibidas algumas formas de contornar o problema dos dois casos.

Uma das palestras técnicas e que mais mostraram o que todo desenvolvedor quer, que é código (SHOW ME THE CODE!).

Minha opinião

Gostei bastante das formas de solução propostas pelo Almir, além da didática aplicada na palestra.

Com certeza vou aplicar algo nos meus projetos, já que os problemas com os eventos que ele citou são bastante comuns - onclick, onscroll, onkeypress - que, se não forem controlados podem prejudicar a performance da aplicação.


EVERYTHING IS A POLYFILL: AUTOMATING A MAINTAINABLE FRONT END

A dupla levantou alguns problemas com o uso exagerado de polyfills e como isso afeta a manutenção do código.

Foi sugerido a aplicação de alguns truques pra facilitar o desuso de um polyfill, conforme os browsers vão avançando e o uso de browsers antigos pelos usuários for caindo.

Uma das técnicas é usar um objeto com as datas de expiração e da versão do browser, pra que, dentro do seu código, você utilize isso pra usar/carregar ou não um módulo ou executar um trecho de código.

Uma dica preciosa é: saiba quais browsers você suporta. Isso facilita o processo de QA e do uso de polyfills para bugs ou implementações de APIs que não funcionam em determinados browsers.

Minha opinião

As duas palestrantes demonstraram uma abordagem nova, pelo menos pra mim, com relação ao polyfill.

Gostei dos slides e do desgin, que deixaram o conteúdo bem claro, transmitindo muito bem a mensagem.

Com certeza vou sugerir isso pra galera da MustacheLabs =}.


JAVASCRIPT ♥ UNICODE

Talvez a mais técnica das palestras, essa foi, sem dúvida, de explodir cabeças.

Mathias demonstrou os problemas do Unicode no Javascript e sugeriu várias formas pra fazer com que os caracteres especiais sejam formatados de forma correta.

Uma das coisas que ele citou, foram as operações de String, como o length que podem ser diferentes em alguns casos, mesmo com o visual do símbolo parecer um único caractere. Isso pode influenciar, por exemplo, num contador de caracteres de texto.

Pra entender melhor vale a pena clicar no link da palestra e ler com muita calma. O post é sensacional!

Minha opinião

Gostei da palestra, e acredito que fechou com chave de ouro. Achei um conteúdo de altíssimo nível e, mesmo assim, Mathias conseguiu explicar de forma tranquila os conceitos.

É de extrema importância sabermos esses probleminhas do Javascript e conseguir contorna-los.

Finalizando

Após um longo texto, você consegue perceber quanto conteúdo em apenas UM dia? O FrontinBH foi intenso dessa forma.

Parabéns aos organizadores Bruno de Magalhães, Davidson Fellipe, Giovanni Keppelen e Victor Ferraz e a todos os voluntários e envolvidos nesse evento. Foi muito massa!

Espero que continuem com o nível lá em cima, pra gente voltar ano que vem, com toda certeza!


OBS -> Tem uma galera que já fez posts do evento também. Confere aí nos links:

comments powered by Disqus