Front in Floripa 2014

Publicado por Lívia Amorim e Luciano Marcelino no dia dev

No dia 21 de novembro fomos à segunda edição do Front in Floripa, onde nos aprofundamos em diferentes conceitos e ferramentas relacionadas com front-end. Logo de início foi possível perceber a evolução da comunidade de desenvolvimento de Santa Catarina. No ano anterior, a maioria do público era de desenvolvedores full-stack e designers (UI/UX) e pouco se falava em performance e processo. Neste ano, o público era de desenvolvedores front-end e as palestras mais maduras com relação ao assunto. Listamos abaixo alguns dos pontos mais relevantes de cada apresentação:

Otimizando a performance do front-end em uma aplicação real

André Júnior, desenvolvedor da nossa plataforma de marketing digital, colaborou com um case de performance no RD Station. Ele iniciou sua apresentação intrigando a plateia:

Desenvolvedores focam em pequenos ganhos de milissegundos no back-end, sendo que o problema de performance está no front-end que demora 10 vezes mais para carregar.

Foram levantados diversos pontos de melhoria em perfomance, desde os mais complexos até os de ganho rápido, dentre eles:

  • Ferramentas de insight (onde está o problema da minha app?)
  • Importância de levantar métricas de performance
  • Compressão Gzip
  • Carregar somente o necessário
  • Compressão de imagens e criação de sprites
  • Concatenação e minificação de arquivos JavaScript e CSS

André Júnior palestrando no Front in Floripa

Como os browsers funcionam

Filipe Zimermann, da Nextt, falou sobre cada um dos passos do Crital Rendering Path, adicionando um último passo para a composição de layers.

Critical Rendering Path

Uma das principais dicas práticas sobre performance foi a utilização de seletores curtos. Isto porque, ao aplicar as regras de estilo, o browser tende a priorizar a renderização de regras mais específicas. Por exemplo:

1
2
3
4
div * {...} //bad
.list li {...} //bad
.list-item {...} //good
#list .list-item {...} //good

StriderCD - Integração Contínua e Deploy contínuo com JS

Renato Vasconcellos e Sebastian Ferrari falaram sobre o workflow de trabalho seguido na Taller. Abordaram, também, temas como TDD/BDD, Git e o funcionamento do Strider CD – ferramenta open source criada para facilitar processos de integração e deploy contínuos.

ReactJS: Keep Simple. Everything can be a component!

Pedro Nauck falou sobre ReactJS, uma biblioteca JavaScript criada pela equipe do Instagram para facilitar a construção de interfaces através de componentes. Embora a ferramenta seja conhecida por fornecer um ganho de performance nas aplicações, o palestrante focou no uso de pequenos módulos para criação de uma estrutura visual. Ele também deixou claro que, apesar de outros desenvolvedores compararem ReactJS com AngularJS, elas são ferramentas distintas: React é uma biblioteca e, Angular, um framework.

Introduzindo o Typers

Typers é um projeto open source de gerenciamento de fontes criada por Guilherme Oderdenge. Inspirado no npm e no Bower, o Typers instala e remove fontes de licença aberta com comandos simples. Por exemplo:

1
2
3
typers init
typers search montserrat
typers install montserrat

Como o projeto tem apenas um mês e está em fase de MVP (produto mínimo viável), a ferramenta ainda é bastante limitada. Além de usar uma base de terceiros, (o Google Fonts) não é possível pré-visualizar a fonte escolhida ou optar pelas famílias de determinada fonte.

Arquitetura para aplicações Web com AngularJS

João Marcelo falou sobre alguns conceitos de arquitetura que usou no desenvolvimento front-end com AngularJS. Dentre esses conceitos estavam o de Gateway Pattern, utilizado na comunicação da aplicação com o banco/servidor; e Proxy Pattern, opção para buscar informações diretamente da internet. João também falou sobre o uso de Controllers e de Rest APIs com AngularJS.

Turbinando sua produtividade com Backbone e RactiveJS

Gabriel Zigolis explicou sobre Backbone, a diferença conceitual entre biblioteca e framework e como o Backbone tem o intuito de aproximar o JavaScript da orientação a objetos. A biblioteca é leve e foi inspirada no movelo MV*. Zigolis demonstrou alguns exemplos práticos e, em seguida, falou sobre RactiveJS.

RactiveJS é uma biblioteca JavaScript para componentes UI. Gabriel demonstrou como a biblioteca facilita a implementação de data binding e aumenta a produtividade do desenvolvedor, pois age diretamente na renderização da página e tem um código limpo.

Throttle & Debounce Patterns in web apps

Almir Filho explicou que ambas as técnicas, Throttle e Debounce, servem para evitar a execução excessiva de requisições ao banco de dados. O Throttle funciona como uma válvula: ele executa a função na primeira chamada e espera um determinado tempo até executar a próxima, ignorando qualquer evento nesse tempo. Já o Debounce, recebe a primeira chamada de um evento para a função e espera um determinado tempo até executá-la. Caso outro evento ocorra, ele ignora a chamada anterior e recomeça a contagem, até que chegue ao fim sem novas chamadas. Somente então ele executa a função.

A primeira é muito utilizada nos casos de onscroll e onmousemove. Enquanto a segunda é aplicada em casos de onkeydown ou onclick.

Conheça algumas das novas features, no ES6

Felipe Nascimento apresentou algumas novidades do JavaScript ES6. A apresentação foi dividida em três categorias: Prototypes, Syntax e Features.

Um dos pontos que mais chamou atenção foi uma alternativa para iterar sobre um array utilizando o for ... of ...: ES5

1
2
3
4
5
6
7
8
var arr = ["a", "b", "c"];
arr.lastOne = "z";

for (var _iterator = arr[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) {
  var i = _step.value;

  console.log(i);
}

ES6

1
2
3
for (let i of arr) {
   console.log(i);
}

Uma das vantagens dessa iteração é que os elementos provenientes do DOM que compõem o objeto são ignorados. Felipe também falou da definição de variáveis utilizando let, de arrow functions, entre outras novidades.

Na parte das Features, o palestrante apresentou a possibilidade de uso de Promises, muito útil para evitar a recorrência e “concatenação” de Callbacks em ações assíncronas. Além disso, ele apresentou os generators e discutiu a possibilidade da criação de classes no JavaScript ES6. Foi ressaltado que, por trás dos panos, o uso de classes em Javascript é feito através do uso de determinados patterns, como Revealing Module Pattern, atualmente já utilizado por muitos desenvolvedores.

Lívia Amorim

Lívia Amorim

UI/UX Designer

Luciano Marcelino

Luciano Marcelino

Tech Leader

Comentários