Front in Floripa 2015

Publicado por Lívia Amorim e Leonardo Risch no dia dev

Logo do Front in Floripa 2015

No dia 5 de dezembro fomos à terceira edição do Front in Floripa – o maior evento sobre front-end de Santa Catarina. A Resultados Digitais foi apoiadora do evento que contou com 8 palestras sobre temas relacionados a área, como JavaScript, CSS e Web Animations. Além das nossas impressões, a seguir você confere o resumo e – para os interessados em aprofundar nos temas – alguns links de cada palestra.

JavaScript Secrets

Na primeira talk do dia, Fernando Daciuk apresentou algumas dicas de Javascript que podem ser muito úteis no dia-a-dia e que podemos acabar esquecendo de pôr em prática em nossos projetos.

Daciuk mostrou, por exemplo, a técnica para verificar o tipo da variável utilizando o método toString checando a string de saída e por que isso é mais confiante que o typeof. Além dessa dica, o palestrante também explicou a diferença de utilizar funções do array que possuem o comportamento semelhante às funções nativas do Javascript, como por exemplo o for(nativo) e o forEach(função do Array), entre outras. As vantagens de utilizar "use strict"; também foi um dos pontos altos da talk.

Foi bem bacana a explicação sobre cada ponto levantado, principalmente para o pessoal se policiar e melhorar seus projetos com as dicas apresentadas.

Descobrindo o futuro do CSS com cssnext

Nesta Lightning Talk, eu (Lívia) mostrei algumas das novas funcionalidades do CSS nível 4, a nova versão do CSS. Como ela está em rascunho, ainda vai levar um tempo até que todos os navegadores deem suporte – e todos os usuários atualizem.

De Volta Para o Futuro

Para começar a testar as novas propriedades e pseudo-classes, apresentei o cssnext, um transpiler de CSS4 para o CSS3. Também recomendei o grunt-cssnext para automatizar a transposição do código.

Algumas das funcionalidades suportadas pelo cssnext:

Por fim, recomendei não usar o cssnext em grandes projetos. Ainda é provável que algumas funcionalidades mudem – o que pode deixar seu projeto depreciado. Portanto, use-o com moderação. :wink:

Not So Static Assets

Guilherme Souza apresentou o projeto open-source iniciado por ele, o DSS.

O projeto ficou mais conhecido quando apareceu nos trendings do Github. Ele construiu um exemplo simples alterando a cor conforme o movimento de scroll do mouse e apresentou algumas variáveis disponíveis para utilização no CSS, explicando, respectivamente, o que cada uma fazia.

Você pode ver um exemplo aqui.

Real time com Socket.IO, Angular e Node.js

Rodrigo Branas apresentou esta talk sobre Socket.io, AngularJS e NodeJS.

Durante a palestra, Branas interagiu com o público e criou um exemplo baseado em um modelo de Chat. Durante a dinâmica, o palestrante explicou conceitos de como aplicar métodos para execução em tempo real – onde o usuário possa conversar com outro no chat e conseguir visualizar a resposta instantâneamente. A diferença entre Short Polling e Long Polling também foi abordada.

Como toque final, Rodrigo subiu a app para o Heroku e o pessoal conseguiu interagir, testar e descontrair bastante junto à ferramenta. Você pode encontrar o código fonte no GitHub.

Web Animation

Henrique Müller e Filipi Zimermann, ambos da Nextt, falaram sobre a importância de animações nas interfaces. Elas podem trazer mais foco e clareza para a informação – além de dar um toque de sofisticação ao design como um todo.

Uma forma de começar a animar interfaces é usando CSS Animations e a Web Animations API. No caso da WAAPI, ainda são poucos os dispositivos que dão suporte à funcionalidade. Outras ferramentas de animação apresentadas brevemente foram: CreateJS, Phaser, SnapSVG e Animatron.

The Power of WebGL - Hackeando sua GPU com JavaScript

Nesta talk, Raphael Amorim mostrou como funciona a GPU e como podemos usufruir da tecnologia utilizando WebGL. Apresentou alguns exemplos de projetos já realizados e comentou os malefícios se for usado sem o devido cuidado, por exemplo, esquentar a máquina a ponto de queimá-la. Outro momento interessante foram os projetos apresentados utilizando WebVR, onde conseguimos ter uma noção do que vem por aí.

Ionic Adventures

Juarez Filho, da madewithlove, explicou um pouco sobre Ionic, um framework para a criação de aplicativos mobile. Ele permite o desenvolvimento de aplicativos híbridos, ou seja, que rodem em diferentes dispositivos com um único código base.

A principal diferença entre os aplicativos nativos e híbridos é a proeficiência requerida sobre diferentes dispositivos. Ter equipes que desenvolvam para iOS e Android, por exemplo, exige mais recursos que uma equipe trabalhando no ambiente web.

O palestrante apresentou algumas ferramentas que podem auxiliar no trabalho com Ionic, dentre elas o Creator, o Ionic View e o Ionic Lab.

Lapidando o Globo Play

Nesta palestra, Jean Carlo Emer contou um pouco sobre o GloboPlay, um produto de vídeos da TV Globo lançado no dia 3 de novembro. O projeto mobile first foi desenvolvido com uma abordagem de progressive enhancement. Essa é uma estratégia que visa fornecer o básico para dispositivos menores, de baixa resolução e/ou com acesso limitado à internet. É a melhor alternativa para oferecer uma navegação fácil para smartphones, por exemplo.

O GloboPlay também foi desenvolvido em React com o objetivo de oferecer uma experiência fluida aos usuários (por conta do Virtual DOM). Além disso, a biblioteca também permitiu que o projeto fosse facilmente escalável devido ao encapsulamento do código em componentes menores.

Conclusão

O Front in Floripa deste ano foi fantástico! As palestras foram de altíssimo nível e, a organização, impecável. Todo o esforço dos organizadores (Aurélio Saraiva, Diogo Moretti e Gustavo Isensee) com certeza alavancou a comunidade de Front-End de Santa Catarina. Já estamos ansiosos pela próxima edição! :smile:

Lívia Amorim

Lívia Amorim

UI/UX Designer

Leonardo Risch

Leonardo Risch

Full Stack Developer

Comentários