Automatização de tarefas utilizando Gulp de forma contextualizada

Há algum tempo criei um repositório no Github com o propósito de ter uma forma customizada da utilização do Gulp. Basicamente é um jeito ainda mais prático de utilizar esse task runner.

Link do projeto para utilizar/contribuir: https://github.com/andersonaguiar/GulpFile

Este projeto foi implantado em vários projetos pessoais e também no e-commerce da Arezzo, onde se teve um ganho tremendo em criação e entendimento das tasks.

Ficou com dúvidas?

Vídeo

Slides

Automating Large Applications on Modular and Structured Form with Gulp from Anderson Aguiar

Meu primeiro post do ano irá mostrar como juntar duas tecnologias sensacionais que por consequência “bombaram” no ano de 2014. Será um post direto ao ponto(é recomendado saber o básico de ambos, pois não entrarei em detalhes), o Backbone traz consigo a camada de view, e a implementa de maneira funcional. O objetivo do post é mostrar a possibilidade de substituir essa view pelo React. Focarei na parte prática, mostrarei um projeto exemplo, que mostra como trabalhar com ambos e integrá-los em sua aplicação.

Então vamos lá, para contextualizar uma breve introdução sobre as duas tecnologias:

Backbone

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Fonte: http://backbonejs.org/

Como você já deva saber, basicamente, Backbone é uma lib que traz o Javascript de forma bem definida(Models, Views, Collections, Routers, Events…), te dando formas bem declarativas para criar uma aplicação padronizada e totalmente conectada, de quebra, ainda serve tudo isso em uma API RESTFul.

React

A Javascript library for building user interfaces
Fonte: http://facebook.github.io/react/

Como a própria descrição já diz, UI. Ou seja, pensou em React, logo remeta a camada de visualização, ponto. Por ser responsável “apenas” pela parte da View, o React é extremamente espetacular no contexto em que ele age, digo isso pois ele trata:

Virtual DOM + Diff

A VDOM(Virtual DOM) que pode ser estudada a fundo em virtual-dom, dentro do React é trabalhada da seguinte forma:

A partir da criação da cadeia de componentes do React é inicializado a VDOM, tendo isso, o React mantém duas VDOMs, a VDOM antiga e a nova VDOM. O diff acontece quando é modificado algum state mapeado dentro da cadeia de componentes, a VDOM antiga será comparada com a que houve modificação de estado(a nova VDOM), será verificado onde ocorreu a diferença, e inserido na árvore DOM de fato.

Componentização

Tudo no React é trabalhado através de componentes, isso é muito bom, pois temos reutilização dos mesmos. Similar ao conceito de Web Components.

Reativo

Age em decorrência de modificações de estados de seus componentes. Alterou estado, o render é invocado.

Porque eu devo utilizar React como view do Backbone se o mesmo já possui sua própria camada de View?

Perfeito. Essa é a pergunta chave para saber se é viável ou não integrar React à sua aplicação Backbone. Para responder a essa pergunta você deve se fazer outras duas perguntas:

“Minha aplicação precisará manipular a DOM com muita frequência?”

“Eu quero componentizar meus elementos sem ter que ficar criando templates pra tudo?”

Smithsonian Image

Se as duas respostas forem não, então você só deve continuar a ler esse post para fins de conhecimento, pois a View do Backbone já atende muito bem sua necessidade, seja ela feita com o default Underscore, ou qualquer outro template.

Mas se a resposta for sim… meu amigo… React “vai cair que é uma luva”. Com seu render “inteligente” ele irá sempre fazer o diff do que foi modificado antes de tocar na DOM, ou seja, se você está mudando o texto de um span frequentemente, ele NÃO irá recriar todo o elemento na DOM, irá apenas criar uma nova VDOM e ver se tem diferença da VDOM antiga, nesse caso foi apenas o conteúdo interno da tag, então o render irá agir apenas nele.

Quais os ganhos? Performance e componentização.

Projeto exemplo

Criei um repositório de exemplo no Github, onde o mesmo foi clonado a partir do Car List do Sérgio Siqueira. Modifiquei para o cenário de pesquisa básica dos veículos, para que possa ser pesquisado os veículos pela placa e pelo modelo. Os eventos acontecem pelo onKeyUp nos inputs de pesquisa. Vamos partir para a parte explicativa…

Para iniciar, podemos clonar o projeto

git clone https://github.com/andersonaguiar/backbone-react-example.git

Instalar os vendors definidos no bower.json

bower install

It’s done.

Explanação do código

Irei pontuar onde o React estará agindo e de que forma(todos os títulos abaixo serão links para o code no Github).

Para aplicar o React, a primeira coisa a se fazer em um projeto com Backbone é apagar o diretório de views, pois quem fará esse papel será o React.

app.js

Esté é o nosso arquivo de inicialização, é nele que está sendo definido o Router e os renders dos componentes do React.

router.js

Aqui é puro Backbone, está sendo definido apenas as rotas que a aplicação vier a ter, no nosso exemplo não existe nenhuma rota, apenas o initialize para trazer nossa lista de carros assim que a página for carregada.

E como a aplicação saberá quando deverá renderizar?

No nosso projeto a delegação, o disparo e a observação de eventos, acontecerá em dois arquivos: filter e cars.

filter.js

Esse será o nosso arquivo que conterá o componente do topo, o formulário de filtro.

Delegação dos eventos

Os eventos estão atribuídos em dois lugares: no Formulário(que pelo efeito de bubbling atingirá os inputs) e no Botão Filtrar.

Disparo de eventos

Sempre que a ação de filtrar for acionada, a mesma chamará o método _filter, que por sua vez irá disparar ao Backbone o evento customizado filter:cars.

cars.js

Esse será o arquivo que terá o componente cars(como lista) e o car(como elemento individual).

Observação de eventos

E para finalizar o ciclo, a observação de eventos ocorrerá no componente Cars assim que o mesmo já estiver “montado”, sempre que o evento customizado de filtro for disparado, será modificado o state, pela atualização da collection de cars de acordo com os filtros passados através do form.

Palavras finais

Nesse exemplo a listagem de carros ficou reativa a mudança de estado de filter. Conseguimos combinar o poder das duas tecnologias. Criamos nossos componentes, não tocamos na DOM sem necessidade, e aproveitamos o cartel de soluções do Backbone(eventos, routes, etc).


Agradecimentos:

Além dos materiais encontrados na internet, da aplicação de ambas as tecnologias em projetos pessoais e profissionais na DIV64, das participações nos encontros da nossa maravilhosa comunidade FloripaJS, a qual está munida de grandes profissionais, gente com sede de conhecimento e de compartilhamento, e também de amigos.

Dois caras eu preciso destacar, eles contribuíram bastante para o meu aprendizado, são eles: Gabriel Zigolis e Sérgio Siqueira, gente assim faz a diferença na comunidade, agir sem estrelismo e compartilhar a essência do que somos e do que nos fazem cada vez mais profissionais.

O conhecimento.

E aí, curtiu? Comente o que achou da junção dessas duas tecnologias ;)

Faxina…

Essa semana estava organizando vários documentos no Dropbox e me assustei com a relação de plugins que eu havia instalado no meu Sublime Text 3(eram mais de 40 :O), então resolvi fazer uma LIMPA e compartilhar minha lista de “sobreviventes” aqui no site com vocês.

Com certeza boa parte dos plugins que irei apresentar aqui a maioria de vocês já conhecem, mas um ou outro é possível que dê para pescar, então vai lá:

Lista

#Emmet

Claro… o velho e bom Emmet ex Zen Coding. Como abandoná-lo?

Emmet

#WakaTime

Esse é muito legal, ele observa o tempo que você fica no Sublime e gera relatórios de horas, linguagens que você utiliza, entre outros. O site do plugin é WakaTime.com

WakaTime

#Side​Bar​Enhancements

Esse cara dá uma tunada nas opções do clique direito do mouse em cima dos arquivos e diretórios, listando uma série ações úteis!

Side​Bar​Enhancements

#CSSComb

Quem não tem o hábito de organizar seu CSS, ou que trabalha em equipe, esse plugin é ótimo para ter uma padrão de código onde a forma que você entregará é a mesma que você irá receber o código.

A configuração padrão dele é a exibida na imagem, mas é configurável.

CSSComb

#Color Highlighter

Pra quem quer ter uma base de qual melhor cor pra colocar na página, basta clicar em cima do valor declarado :D

Color Highlighter

#Dracula Theme

Por enquanto estou utilizando o tema do Dracula, achei bacana a combinação das cores.

Dracula Theme

*Estarei atualizando esse post sempre que achar que cabe algum outro plugin aqui.

Minha lista completa de plugins pode ser obtida nesse link: https://github.com/andersonaguiar/plugins-sublime-text

Desafio

Agora é modinha esse negócio de desafios, eu nunca havia feito isso, mas então pra entrar um pouco na onda dessa frescurada, mas em um contexto de desenvolvimento.

Dracula Theme

Então eu lanço o desafio de postar quais plugins utilizados no sublime, aos amigos:

Diogo Moretti, Gabriel Zigolis, Bruno Possidonio, Felipe Fialho, Fernando Daciuk, Pedro Nauck e Eduardo Mattos.

Obs.: Pode ser um post no site ou um comentário aqui embaixo com o link do seu Package Controll.sublime-settings :)

Recomendo a todos fazerem essa “limpa”, pois vários dos plugins que instalamos é que achamos úteis a primeiro momento mas depois cai em desuso e fica fazendo lixo.

Finalmente tirei um tempo para mudar a cara do meu site e de quebra já aproveitei para “transformá-lo” no meu blog pessoal.

Pois bem, esse será o primeiro post do blog e também a primeira vez que participo desse grande evento que é o BrazilJS, o objetivo desse post é fazer um compilado breve do que aconteceu no evento, as talks, as experiências que tive, as pessoas que conheci e o meu feedback.

A viagem

A ida até o evento foi meio torturante pois fomos de carro, saímos de Florianópolis o Bruno Possidonio e eu, paramos em Garopaba para dar carona ao Pedro Nauck e fomos até Porto Alegre, o horário de saída foi em torno de 14:15 de quarta-feira e chegamos por volta de 20:30, ou seja, foi uma viagem de mais ou menos 6 horas de chão. Na volta o início foi um pouco tenso, pois havia muita neblina na estrada mas depois da metade ela se dissipou fazendo com que o restante da viagem fosse bem tranquila, o Pedro ficou para o encontro da Mozilla, chegamos em Florianópolis 01:40, levamos 5 horas.

Encontro ZOFE

Depois de descarregar as coisas no hotel e nos ajeitar, fomos direto ao encontro do ZOFE que aconteceu no Bilhar Porto Dez. O encontro com o pessoal foi muito legal, deu pra rir bastante e fazer um ótimo networking regado de muita conversa, sinuca e bebida(que não pode faltar). Galera muito bacana, alguns eu já havia tido contato pela internet mas nunca pessoalmente, e outros conheci no networking que o evento propiciou, alguns dos feras são: Gabriel Zigolis, Victor Ferraz, Thiago Ferreira, David Alberto(o gringo companheiro de trabalho do Diogo), Guillermo Rauch criador do SocketIO(e Argentino), Átila Fassina, Eduardo Matos e vários outros que conheci no bar que não me lembro o nome, pois estava alterado devido às cervas tomadas que a SendGrid pagou para o pessoal inscrito :P

O evento

O evento foi bom demais! Ótima estrutura, site, vários brindes, oportunidades de emprego, grandes patrocinadores, só galera fera, cobertura, comunicação e algumas ótimas palestras.

A escolha do local do evento foi fantástica, não compareci na primeira edição mas sei que foi no mesmo lugar então o local está aprovadíssimo. A organização do evento está de parabéns, tudo muito bem pensado Jaydson e Felipe Nascimento detonaram!

Palestras

As palestras na grande maioria foram fantásticas! Vou falar de algumas que realmente eu curti demais.

Data-binding [R]evolution com o Léo Balter que falou sobre várias coisas legais e também sobre ES6/ES7, onde o item marcante foi o Object.observe e o exemplo de player utilizando o Object.observe com fallback para proxies.

Single page apps com o Eduardo Lundgren, onde foi anunciado o SENNA ferramenta incrível para criar esse tipo de aplicação de forma rápida, onde a requisição será apenas o conteúdo que precisa ser carregado nas surfaces definidas, tendo Bookmarkability e SEO, History Navigation, UI feedback e outras features.

O Renato Mangini falou sobre os Service Workers onde o mesmo é implementado via JavaScript na primeira vez que o usuário acessa a página, a partir daí ele roda em background, muito foda!

AST, CST e Ferramentas Incríveis com o Miller Medeiros que dispensa comentários, o cara é foda! Explicou como os parsers funcionam, mostrou o parser mais utilizado em JavaScript, o Esprima, apresentou seu projeto esformatter que traz um pouco a ideia de deixar o padrão de código também em um arquivo de configuração, fazendo com que o resultado do código seja o mesmo para todos da equipe. E pra finalizar apresentou o NodeFy para conversão de padrão de módulos AMD para o esperado pelo Node.js.

Mauricio Wolff com a palestra Limpando CSS gigantes com JS mostrou o cssi: CSS Selector Scene Investigation uma ferramenta poderosa escrita em Node.js onde o mesmo utiliza no Booking.com para remover seletores repetidos e/ou não utilizados e mostra os commits que colocaram os seletores e qual sua data de modificação, além de mostrar um relatório com informações relevantes de antes e depois da “limpeza”.

Making 3D Graphics Accessible com o Ricardo Cabello (Mr. Doob) o criador do Three.js, definitivamente essa fez a galera pirar! Ele mostrou como simplificar a forma de escrever aplicações em 3D, o poder que o HTML5 + JS nos dá e também que poucos imaginariam ver esse tipo de animação sendo feita no navegador sem a utilização de flash. A palestra foi muito rica de exemplos :)

The 7 Principles of rich web applications com o Guillermo Rauch, nessa palestra foi focado fortemente em UX, feedbacks e ótimas práticas para criar aplicações ricas. Demonstrou seu grande conhecimento na camada que a maioria dos fronts desconhece, rede.

Mais detalhes das palestras podem ser encontradas no site do Jean Carlo, onde o mesmo fez um excelente live posting:

Observações

O evento em si valeu muito a pena mas não posso deixar também de expressar as partes que não gostei do evento, até porque é com base em feedbacks que esses eventos crescem mais e mais. Então vamos lá:

  • Senti falta de mais conteúdo técnico(voltado para JavaScript, já que é sobre isso que o nome do evento trata), ocorreu palestras que não tinham nada a ver com JavaScript, não teve muita abordagem de Node.js(um assunto que está tão forte hoje em dia).

  • Achei que algumas palestram fugiram do escopo e até houve repetição de assuntos falados por outros palestrantes.

  • Não basta somente trazer pessoal de fora bom, eles precisam saber externalizar o que sabem, enquanto alguns falavam, a grande maioria dava de ver que não estavam gostando, é claro que é impossível agradar a todos, mas quando a maioria não gosta algo de errado tem.

  • Algumas palestras pareciam terem sido feitas um dia antes do evento, enquanto a grande maioria se dedicou criando uma apresentação foda, outros não transpareceram isso.

Resumindo: Tirando esses detalhes, o evento foi FOOOOODAAAA!! 2015 estarei presente de novo com certeza!

Quinta-feira, 21/08/2014

RENATO MANGINI - Why ServiceWorker may be the next big thing:

CHRIS MILLER - Frontend at Scale - The Tumblr Story

NICK DESAULNIERS - Intro to GFX: Raw WebGL
http://nickdesaulniers.github.io/RawWebGL/#/

JÖRN ZAEFFERER - Effective jQuery http://jzaefferer.github.io/effective-jquery/#1

CHRIS MILLS - Web versus native: round 1?
http://www.slideshare.net/chrisdavidmills/web-versus-native-round-1

MAURICIO WOLFF - Limpando CSS gigantes com JS https://speakerdeck.com/bitbonsai/braziljs-2014-talk

EDUARDO LUNDGREN - Single Page Applications Done Right
https://speakerdeck.com/eduardolundgren/single-page-applications-done-right

GUILLERMO RAUCH - undefinned

Sexta-feira, 22/08/2014

JACOB PAGE - From commit to prod in 5 minutes https://docs.google.com/presentation/d/1S_VJO1ReIyRduN9S6PoWlv4kTvCX2FbC-5EaPleLQVk/pub?start=false&loop=false&delayms=10000#slide=id.p

RICARDO TOMASI - Frontend was always my favorite color https://speakerdeck.com/ricardobeat/frontend-was-always-my-favorite-color

JONATHAN SAMPSON - Mastering IE’s updated F12 tools http://presentboldly.com/jonathansampson/mastering-f12-in-internet-explorer

ROB DODSON - The Web Component Ecosystem https://speakerdeck.com/robdodson/the-web-component-ecosystem

LEONARDO BALTER - Data-binding [R]evolution http://leobalter.github.io/data-binding-slides/output/#1

MILLER MEDEIROS - AST, CST e Ferramentas Incríveis
http://slides.millermedeiros.com/braziljs/ast/#/

YEHUDA KATZ - A Day in the Life of an Ember Developer

RICARDO CABELLO (MR. DOOB) - Making 3D Graphics Accesible