B R A S I L

eMag
A Prxima Gerao de

HTML5 &
JavaScript
JavaScript
Ferramentas essenciais do desenvolvedor JS
Frameworks JavaScript MVC
A Web responsiva: Entrevista
React na vida real do Codecademy
Web independente de resoluo com SVG
eMag

Contedo
APRESENTAO

A MODERNA CAIXA DE FERRAMENTAS DO DESENVOLVEDOR JAVASCRIPT

Uma breve excurso pela histria

Frameworks

4
4
5
6

jQuery
AngularJS
ReactJS

Ambientes de desenvolvimento JavaScript

6
7
8
9

Sublime Text
WebStorm
Brackets
Atom

Ferramentas de construo e automatizao

10

Bundling e Minification

10
10
10
11
11

Bundling
Minification
Quando empacotar e minimizar
Mapeamento de arquivos fonte

Linting

11

Automao com Grunt

11

Automao com Gulp

12

Concluses

13

PAINEL VIRTUAL: FRAMEWORKS JAVASCRIPT MVC

14

ENTREVISTA: MATTHEW CARVER SOBRE A WEB RESPONSIVA

24

REACT.JS NA VIDA REAL DO CODECADEMY

27

O que React?

27
27
27
28
28

O React trata o DOM

O React pensa declarativamente em componentes
O React casa com as marcaes do JavaScript
As informaes fluem em uma direo

Anatomia de uma aplicao React

28

Consideraes para grandes aplicaes Fluxo da informao

31

Integrao

32

Por que React?

32
32
32
33
33
33

Componentes fceis de entender

SEO Facilitado
Compatibilidade com o legado e flexibilidade
Menos cdigo repetitivo
Comunidade forte

InfoQ Brasil

Concluses

33

CAMINHANDO PARA UMA WEB INDEPENDENTE DE RESOLUO COM SVG

34

Designers

34

Ideal para cones independente de resoluo

Redimensionamento melhorado mesmo em pequenas dimenses
Elementos SVG podem ser alterados manualmente
Ferramentas de cdigo aberto

Desenvolvedores
Independncia de resoluo e reusabilidade
Animao
Interatividade
Uso em linha (inline)
Mais formas de sprites
Comparando a verso dos mesmos arquivos

34
35
36
37

37
37
37
38
38
39
39

Fontes para aprendizado

39

Suporte a antigos navegadores

40

Concluses

40

eMag: HTML5 & JavaScript

Apresentao
O JavaScript est em constante evoluo, e quase todas as semanas surgem novos frameworks e
bibliotecas. Recentemente a maior mudana na linguagem veio com o ECMAScript 6, que foi finalizado em 2015.
O desenvolvedor web moderno precisa conhecer muito mais do que antes e ficar parado no
opo. Esta eMag procura ser um guia nessa direo. Na seleo de artigos do InfoQ, temos a colaborao dos desenvolvedores que constroem as aplicaes web mais avanadas para aplicar o que
eles aprenderam em nosso prprio trabalho.
David Haney do StackOverflow comea com uma descrio do que a caixa de ferramentas do
desenvolvedor JavaScript em 2015. As IDEs so apenas o incio. Foi-se o tempo de colocar o jQuery
no projeto como primeira e nica biblioteca JavaScript. Se agora o AngularJS, ReactJS ou outra
tecnologia que surgiu nos ltimos dez minutos, David Haney nos lembra que a escolha da biblioteca JavaScript um passo importante. Adicione gulp, linters, empacotadores e minificao a caixa
de ferramentas, e o desenvolvedor moderno pode entregar alta qualidade, JavaScript e CSS rpidos
perfeito para a web moderna.
Dio Synodinos, editor do InfoQ, organizou um painel virtual com lderes da comunidade JavaScript, com o objetivo de conversar sobre os frameworks MVC. Foram abordados os tipos de problemas que os frameworks resolvem; mobile, desempenho e fluxo de trabalho. O artigo fornece
uma viso rpida de trs dos teclados dos desenvolvedores JavaScript mundiais.
Muito desta eMag sobre JavaScript, mas o JavaScript hoje no seria nada sem o HTML5. Esperamos construir aplicaes web e sites que funcionam no apenas em navegadores desktop, mas tambm em mltiplos dispositivos mveis. Entrevistamos Matt Carver, autor do livro The Responsive
Web, para conhecer os desafios envolvidos na construo de sites web responsivos.
Continuando, Bonnie Eisenman relata a histria de como a Codecademy comeou a usar React.js
em produo. Criado pelo Facebook, o React.js possui um dos mais rpidos sistemas de renderizao, e isso comeou a chamar a ateno dos desenvolvedores de todas as partes. Por outro lado, h
muitos exemplos e demonstraes de brinquedo, que no demonstram o real significado do que
um aplicativo precisa em produo. Com base numa experincia real, com demandas, Eisenman
apresenta o que funciona e o que no funciona juntamente com uma descrio de como introduzir
o React em seu aplicativo web.
As telas retina, com altssima densidade de pixels, agora so realidade. Embora isso seja excelente
para os usurios, os designers e desenvolvedores precisam lidar com imagens em uma gama muito
mais ampla de resolues. Angelos Chaidas nos guia pelo uso do SVG para combater o trabalho
excessivo e aborda o uso de animao e interao, alm de fornecer detalhes de como esses processos se encaixam no fluxo de trabalho.
O HTML e o JavaScript esto entre as partes mais antigas da web, mas ainda esto mudando a cada
dia e continuam ganhando em importncia. Esperamos que essa eMag possa ajudar os leitores a
chegar mais rapidamente ao estado da arte do desenvolvimento web.

InfoQ Brasil

A moderna caixa de ferramentas do

desenvolvedor JavaScript
por David Haney, traduzido por Rafael Sakurai

A caixa de ferramentas de um moderno desenvolvedor JavaScript vem mudando muito nos ltimos
20 anos. De IDEs a ferramentas de automatizao, h diversas opes para os desenvolvedores.
O JavaScript uma linguagem de script desenhada inicialmente para tratar pginas web, mas agora
usada de quase todas as formas imaginveis. Avanos foram feitos para permitir que o JavaScript
execute no lado servidor bem como compilado em cdigo de aplicaes nativas para telefones. Hoje
o desenvolvedor JavaScript faz parte de um rico ecossistema formado por centenas de IDEs, ferramentas e frameworks. Dada a quantidade de opes e recursos, alguns desenvolvedores podem
encontrar dificuldade de saber como comear. Nesse artigo ser discutido o perfil do desenvolvedor JavaScript moderno e apresentados os mais populares frameworks, ferramentas e IDEs.

Uma breve excurso pela histria

Vamos voltar para 1995, quando o Netscape Navigator e o Internet Explorer 1.0 eram as opes
disponveis de navegadores. Os websites tinham apenas textos e muitos GIFs. Um site completo de
contedo rico demorava dois minutos para carregar em uma conexo discada (dial-up). Ao longo
do caminho, uma linguagem web nasceu permitindo que esses websites antigos pudessem executar cdigo no lado cliente. Foi o ano em que nasceu o JavaScript.
Os websites de 20 anos atrs no usavam muito JavaScript e certamente no usavam seu potencial
total. Ocasionalmente havia um alerta popup para informar algo, a rolagem de um texto em uma
caixa com notcias ou um cookie que armazenava seu nome e apresentava novamente quando retornasse alguns meses depois. Certamente no havia empregos nos quais o JavaScript era a linguagem primria, salvo os poucos sortudos que tinham o trabalho de criar o prprio JavaScript. Em
resumo, a linguagem era um brinquedo para os websites enfeitarem os seus DOM (Document Object Model).
Hoje, o JavaScript pode ser encontrado virtualmente em todos os locais. Do AJAX ao Bootstrap,
ReactJS, Angular, o ubquo jQuery e mesmo o Node.js no lado servidor, o JavaScript se tornou uma
das mais importantes e populares linguagens de desenvolvimento.

Frameworks
Um dos principais aspectos no qual o JavaScript mudou desde sua origem foi na sua forma de uso.
J se foram os dias que precisvamos chamar document.GetElementById e tratar objetos do tipo
XmlHttpRequest. Em vez disso, diversas bibliotecas abstraram as funcionalidades principais tornando o JavaScript mais acessvel aos desenvolvedores. Isso um dos grandes motivos porque
encontramos o JavaScript em todos os lugares.

jQuery
O jQuery, criado em 2006 por John Resig, fornece um rico conjunto de ferramentas para abstrair e
simplificar os comandos, mtodos ocultos e rgidos do JavaScript. A forma mais fcil de demonstrar
isso atravs de um exemplo. Esta uma requisio AJAX feita com JavaScript puro:
4

eMag: HTML5 & JavaScript

function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
// cdigo para IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// cdigo para IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 ) {
if(xmlhttp.status == 200){
alert("sucesso");
}
else if(xmlhttp.status == 400) {
alert("erro 400")
}
else {
alert("algo est quebrado!")
}
}
}
xmlhttp.open("GET", "test.html", true);
xmlhttp.send();
}

Fonte: Stack Overflow

Veja uma requisio AJAX feita com jQuery:

$.ajax({
url: "test.html",
statusCode: {
200: function() {
alert("sucesso");
},
400: function() {
alert("erro 400");
}
},
error: function() {
alert("algo quebrado!");
}
});

O jQuery fez com que partes complexas das funes JavaScript se tornassem fceis para usar e
manipular trechos do DOM. Como resultado, uma das bibliotecas mais amplamente usadas para
JavaScript. A ideia de abstrao que veio com o jQuery foi a base na qual outras bibliotecas e frameworks foram modelados.

AngularJS
O AngularJS, ou simplesmente Angular como chamado, surgiu em 2009. Foi criado pelo Google
para facilitar a construo de aplicaes de pgina nica (Single Page Applications SPA). Como o
jQuery, o Angular tambm abstrai o trabalho difcil em mtodos reutilizveis, alm de fornecer
uma arquitetura de model-view-controller (MVC) para o JavaScript.

InfoQ Brasil

ReactJS
O ReactJS, ou "React" como vem sendo chamado, o novato. Foi criado pelo Facebook e liberado
pela primeira vez em 2013. O Facebook considera o React como uma nova forma de tratar problemas de SPA que o Angular ainda trabalha para resolver. correto comparar Angular e React como
frameworks concorrentes. No entanto, o que os realmente diferencia que o React mais eficiente
e tem uma biblioteca mais veloz. O grfico a seguir apresenta o tempo de execuo do React, Angular, Knockout (uma biblioteca de terceiros no discutida nesse artigo) e JavaScript puro para renderizar uma lista com mil itens no DOM (veja a imagem). Se o desempenho importante para sua
aplicao, ento o React o caminho a seguir.

Figura 1: Comparao de velocidade dos frameworks React, Angular, Knockout e puro JavaScript. (Fonte: The Dapper
Developer)

Ambientes de desenvolvimento JavaScript

Uma importante parte do desenvolvimento eficiente o uso de uma IDE. Uma IDE, ou Ambiente
de Desenvolvimento Integrado, uma aplicao que oferece um conjunto de ferramentas para o
desenvolvedor. A parte mais importante dessas ferramentas normalmente o editor de texto, que
oferece realce de sintaxe, autocompletar e teclas de atalho, que aceleram os processos manuais.

Sublime Text
O Sublime Text no na verdade uma IDE. Ele um editor de texto leve para programao superrpida, que oferece o realce de sintaxe e teclas de atalhos intuitivas. Sendo multiplataforma, excelente para os desenvolvedores que querem usar no Mac ou PC. Virtualmente tudo no Sublime
Text pode ser customizado. Tambm oferece mltiplos plug-ins que permitem recursos como de

eMag: HTML5 & JavaScript

uma IDE, por exemplo, a integrao com Git e anlise de erros no cdigo (linting). uma tima
escolha entre os entusiastas e novos desenvolvedores JavaScript. O Sublime Text pode ser baixado
e avaliado gratuitamente, e sua licena custa $70.

Figura 2: Editor de texto Sublime Text. (Fonte: Sublime Text)

WebStorm
O WebStorm foi criado pela equipe da JetBrains como uma pequena IDE focada em HTML, CSS e
JavaScript. O custo da licena $49 e amplamente considerado como padro para profissionais
JavaScript, e por uma boa razo, o construtor de complementao de cdigo e inspeo de ferramentas so inigualveis. O WebStorm tambm oferece um depurador de JavaScript rico e testes de
unidade integrado com os frameworks populares, como: execuo de testes Karma e JSDriver e at
o Mocha do Node.js.
Uma das melhores funcionalidades do WebStorm a funcionalidade de Edio ao Vivo. Instalando
um plug-in em ambos Chrome e WebStorm, o desenvolvedor pode fazer mudanas no cdigo que
so instantaneamente refletidos no navegador. Os desenvolvedores tambm podem configurar a
Edio em Tempo Real para destacar as mudanas que so feitas na janela do navegador, permitindo depurao e alta produtividade durante a codificao.
No geral, o WebStorm a IDE para escolher se usar JavaScript em tempo integral.

InfoQ Brasil

Figura 3: IDE WebStorm. Fonte: JetBrains

Brackets
Brackets uma IDE gratuita e de cdigo aberto construdo com foco na ferramenta visual. O
Brackets tambm oferece a funcionalidade de edio ao vivo similar ao WebStorm que deixa visualizar instantaneamente os resultados das mudanas nos cdigos na janela do navegador. Tambm
suporta edio lado a lado, que permite trabalhar no cdigo e ver os resultados simultaneamente
sem precisar trocar entre aplicaes e janelas popup. Uma das funcionalidades mais interessantes
do Brackets chama Extract, que analisa arquivos Photoshop (PSD) para obter as fontes, cores e informaes de medies. Essa funcionalidade faz do Brackets uma excelente escolha para os desenvolvedores JavaScript que tambm trabalham com design.

Figura 4: IDE Brackets. (Fonte: Brackets)

eMag: HTML5 & JavaScript

Atom
Atom um editor de texto rico de cdigo aberto criado pelo GitHub. Muito acessvel e fcil de usar,
possvel instalar e executar sem precisar mudar os arquivos de configurao, ele "simplesmente
funciona". A parte mais interessante do Atom a habilidade para customizar todos os aspectos (ele
foi definido como "hackeavel" pelo GitHub). O Atom construdo em cima de um ncleo web,
permite escrever seus prprios padres de HTML, CSS e JavaScript para customizao da aparncia. Quer cores de background e fontes diferentes no Atom? Apenas altere os valores do CSS. Alternativamente, podemos baixar e aplicar um dos muitos temas criados para o Atom. Isso permite
flexibilizar o Atom da forma como quiser. O Atom uma ferramenta excelente para os novos desenvolvedores JavaScript e tambm para hackers entusiastas.

Figura 5: Editor de texto Atom. Fonte: Atom

InfoQ Brasil

Ferramentas de construo e automatizao

Os modernos projetos que utilizam JavaScript tendem a ser um pouco complexos, com muitas peas mveis. Isso no devido a ineficincia da linguagem ou das ferramentas; isso resultado direto das aplicaes web ricas, vibrantes e complexas que so construdas nos dias atuais.
Quando trabalhamos em grandes projetos, haver muitos processos repetitivos que devemos fazer
sempre que precisamos verificar um cdigo ou liberar a verso de produo. Esses processos podem ser como: o empacotamento de vrios arquivos em um nico arquivo (bundling), a reduo
dos arquivos (minification), compilao dos arquivos CSS LESS ou SASS e at execuo dos testes.
Fazer todo esse trabalho manualmente frustrante e ineficiente. muito melhor automatizar o
trabalho atravs de uma ferramenta que suporta essas tarefas.

Bundling e Minification
Muitos dos cdigos JavaScript e CSS escritos precisam ser compartilhados entre diversas pginas
web. Como resultado, o contedo guardado em arquivos .js e .css, e estes so ento referenciados
nas pginas web. Com isso, o navegador do visitante faz uma requisio HTTP para obter esses
arquivos (ou pelo menos verificar se houve mudana) para renderizar completamente sua aplicao web.
Realizar diversas requisies HTTP custoso. Ento, no topo temos os gastos com carga de dados,
mas tambm pagamos pelo custo de latncia da rede, cabealhos e cookies. As ferramentas de bundling e minification so projetadas para reduzir ou eliminar completamente esses custos.

Bundling
Uma das coisas mais simples que o desenvolvedor pode fazer aprimorar o desempenho dos cdigos web empacotando eles em um nico arquivo. O bundling o processo de juntar mltiplos
arquivos JavaScript e CSS em arquivos nicos. Isso como juntar partes individuais de uma foto
panormica para criar uma nica e foto contnua. Juntando os arquivos JavaScript e CSS, eliminamos muitos gastos com requisies HTTP.

Minification
Outra maneira na qual o desenvolvedor JavaScript pode aprimorar o desempenho atravs da
minificao (minification) do cdigo recm empacotado. A minification reduz o JavaScript e CSS a
menor forma possvel, mantendo ao mesmo tempo a funcionalidade idntica. Para o JavaScript isso
significa renomear as variveis para tokens de caracteres nicos e sem sentido, remover todos os
espaos em branco e formataes. Para o CSS, que se baseia nos nomes das variveis, isso tipicamente significa somente remover a formatao e espaos em branco. A minificao fornece uma
drstica melhoria de desempenho da rede porque reduz o nmero de bytes enviados na resposta
HTTP.
A seguir temos o trecho de cdigo JavaScript AJAX mostrado anteriormente, no minificado:
$.ajax({
url: "test.html",
statusCode: {
200: function() {
alert("sucesso");
},
400: function() {
alert("erro 400");
}
},

10 eMag: HTML5 & JavaScript

error: function() {
alert("algo quebrado!");
}
});

Aqui est o mesmo cdigo minificado:

$.ajax({url:"test.html",statusCode:{200:function() {alert("sucesso");},
400:function(){alert("erro 400");}},error:function(){alert("algo quebrado!");}});

Note que o arquivo minificado de sada foi quebrado em duas linhas para apresentar nesse artigo.
A sada atual da minificao normalmente uma nica linha.

Quando empacotar e minimizar

Geralmente, os passos de empacotar e minimizar so feitos apenas em produo. Dessa forma podemos depurar o cdigo localmente ou em ambiente de desenvolvimento, com o cdigo completamente formatado e com nmero nas linhas. A depurao do cdigo minimizado difcil, pois
todo o cdigo estaria na linha 1. A minificao deixa o cdigo completamente ilegvel, que o torna
ainda mais intil e frustrante para quem tentar depurar.

Mapeamento de arquivos fonte

Algumas vezes um bug ocorre no seu cdigo que somente pode ser reproduzido em produo. Isso
coloca um problema quando precisamos depurar algum item, mas todo o cdigo est minificado.
Felizmente, no JavaScript possvel realizar o mapeamento de fontes que "mapeia" entre o cdigo
minificado e o cdigo original.
O arquivo de mapeamento gerado durante a minificao atravs da ferramenta de empacotamento. Seus depuradores favoritos de JavaScript usam o arquivo de mapeamento para fornecer um
cdigo legvel para depurao. Podemos publicar o cdigo de produo com os arquivos de mapeamento sempre que possvel, ento podemos depurar o cdigo se algo der errado.

Linting
Uma ferramenta de linting analisa o cdigo procurando erros comuns e equvocos nas regras de
formatao. Os tipos de erros reportados so coisas como uso de tabs ao invs de espaos; ou falta
de ponto e vrgula no final das linhas ou usar chaves fora da declarao de if, for ou while. As IDEs
mais comuns vm com ferramentas de linting; outras permitem instalar plugins.
Os linters mais populares de JavaScript so JSHint e JSLint. O JSHint desenvolvido pela comunidade e um fork do JSLint, o framework original de linting escrito por Douglas Crockford. Variam
um pouco nos padres de formatao de cdigo que eles impem. Aconselho o uso de ambos para
escolher qual o melhor para o estilo de codificao do projeto que estiver trabalhando.

Automao com Grunt

Apesar do nome, o Grunt (grunhido em ingls) est longe de ser primitivo. uma ferramenta robusta de construo em linha de comando que executa tarefas definidas pelo usurio. Atravs da
especificao de um arquivo de configurao simples, podemos configurar o Grunt para compilar
LESS ou SASS, construir e minimizar todos os arquivos JavaScript e CSS em pastas especficas, ou
mesmo executar uma ferramenta de linting ou framework de testes. Tambm possvel configurar
o Grunt para ser executado como parte de um script personalizado do Git (Git hook) minimizando e construindo seu cdigo somente se houver algo no repositrio de controle do cdigo.

InfoQ Brasil 11

O Grunt suporta targets nomeados, ento possvel especificar diferentes comandos para diferentes ambientes; pode definir alvos como "dev" e "prod", por exemplo. Isso til em diversos cenrios
como na construo e minimizao do cdigo em produo, mas deixando normal o ambiente de
desenvolvimento para facilitar a depurao.
Uma funcionalidade til do Grunt o "grunt watch" que monitora se h mudanas no diretrio ou
conjunto de arquivos. Pode ser integrado diretamente com IDEs como: WebStorm e SublimeText.
Usando o "watch" possvel acionar eventos com base na alterao dos arquivos. Uma aplicao
prtica dessa abordagem a compilao de LESS e SASS. Ao configurar o monitoramento dos arquivos LESS e SASS possvel compila-los imediatamente aps a mudana do arquivo, fazendo
com que a sada da compilao fique imediatamente disponvel no seu ambiente de desenvolvimento. Outro exemplo durante o desenvolvimento, pois a pgina realiza de maneira automtica
o "atualizar" a cada alterao nos arquivos do projeto. Tambm possvel usar essa funcionalidade
para automaticamente executar uma ferramenta de linting em qualquer arquivo modificado. A
execuo em tempo real das tarefas via "grunt watch" uma das formas de aumentar sua produtividade.

Automao com Gulp

O Grunt e o Gulp so competidores diretos, que disputam para resolver os mesmos problemas de
automatizao da construo (builds). A maior diferena entre eles que o Grunt foca em configurao, enquanto o Gulp foca no cdigo. Configuramos as tarefas em arquivos JSON no Grunt e
escrevemos funes JavaScript nos arquivos Gulp para realizar as mesmas tarefas.
A seguir temos um arquivo de configurao do Grunt para compilar arquivos SASS para CSS, sempre que o arquivo for alterado (fonte: Grunt vs Gulp Beyond the Numbers):
grunt.initConfig({
sass: {
dist: {
files: [{
cwd: "app/styles",
src: "**/*.scss",
dest: "../.tmp/styles",
expand: true,
ext: ".css"
}]
}
},
autoprefixer: {
options: ["last 1 version"],
dist: {
files: [{
expand: true,
cwd: ".tmp/styles",
src: "{,*/}*.css",
dest: "dist/styles"
}]
}
},
watch: {
styles: {
files: ["app/styles/{,*/}*.scss"],
tasks: ["sass:dist", "autoprefixer:dist"]
}
}
});
grunt.registerTask("default", ["styles", "watch"]);

12 eMag: HTML5 & JavaScript

O arquivo Gulp a seguir configura a compilao de arquivos SASS para CSS sempre que o arquivo
for alterado:
gulp.task("sass", function () {
gulp.src("app/styles/**/*.scss")
.pipe(sass())
.pipe(autoprefixer("last 1 version"))
.pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
gulp.run("sass");
gulp.watch("app/styles/**/*.scss", function() {
gulp.run("sass");
});
});

Recomendo usar um ou outro de acordo com sua preferncia. Ambas as ferramentas so instaladas
atravs do npm, o Gerenciador de Pacotes do Node.js.

Concluses
O JavaScript est evoluindo significativamente desde seu nascimento nos primeiros dias da internet. E hoje uma funcionalidade fundamental para a interao das aplicaes web. O desenvolvedor JS tambm evoluiu muito desde 1995. Desenvolvedores JavaScript modernos usam frameworks ricos e robustos, assim como IDEs para trabalhar de modo eficiente e produtivo.
Construir sua primeira aplicao JavaScript moderna mais fcil do que se imagina! Apenas escolha uma IDE (recomendo o Atom para os iniciantes) e ento instale o npm e grunt. Se houver problemas ao longo do caminho, o Stack Overflow um recurso excelente. Com pouco tempo ser possvel aprender tanto o bsico como a maneira de publicar sua aplicao JavaScript moderna.

Sobre o autor
David Haney trabalha na equipe de engenharia na Stack Exchange, criador do
StackOverflow e ServerFault. Passa o dia ajudando os desenvolvedores a resolver seus problemas e melhorar seus processos. Trabalhou antes como lder de
desenvolvimento no e-commerce Fanatics. David criador do Dache, um framework de caching distribudo de cdigo aberto.

InfoQ Brasil 13

Painel Virtual: Frameworks JavaScript MVC

por Dio Synodinos, traduzido por Roberto Pepato

A plataforma web evoluiu muito desde que o HTML5 se tornou popular. Muitas APIs surgiram e h
muito contedo sobre como o navegador pode se aproveitar delas.
Conforme mais e mais lgica executada no navegador, os cdigos de front-end em JavaScript
tornam-se maiores e mais difceis de manter. Como forma de resolver este problema, os desenvolvedores passaram a utilizar frameworks MVC, que prometem entregar melhorias na produtividade
e cdigo de manuteno mais simples.
Em 2013, o InfoQ pediu comunidade para classificar os frameworks MVC JavaScript, de acordo
com os recursos que eles apresentavam e com sua maturidade:

Figura 1: Classificao dos frameworks JavaScript pela comunidade do InfoQ em 2013.

14 eMag: HTML5 & JavaScript

O InfoQ consultou a opinio de especialistas sobre como utilizam estes frameworks e quais as melhores prticas que seguem para desenvolver aplicaes JavaScript.

InfoQ: Qual seu framework JavaScript MVC predileto, h quanto tempo o utiliza e qual
o problema fundamental que ajuda a resolver?
Matteo Pagliazzi: Angular o framework do momento, e isso no somente uma questo
de estrelas (stars) no GitHub: ele tem o maior nmero de bibliotecas, mdulos e est sendo
falado (e utilizado) por muitos desenvolvedores. bvio que os desenvolvedores gostam
dele. Penso que isso acontece pela facilidade de comear a utiliz-lo: so necessrios apenas
5 minutos para ter algo no trivial funcionando e ao mesmo tempo muito poderoso. Assim,
a curva de aprendizado comea a se tornar ngreme conforme se move das coisas mais bsicas
para o ncleo do framework, quando se descobre que ele muito complexo.
Julien Knebel: Venho desenvolvendo com Ember.js h mais de 2 anos e em 5 aplicaes em
produo. Diria que ele oferece flexibilidade, rapidez e confiana, ento posso focar mais em
definir toda a experincia do usurio, ao invs de investir grande quantidade de tempo em
funcionalidades complexas como, por exemplo: um roteador assncrono robusto.
Brad Dunbar: Meu favorito o Backbone. Porque prov simplicidade e flexibilidade que os
outros no oferecem. Alm disso, e talvez mais importante, seu cdigo geralmente simples
e legvel.
John Munsch: Prefiro o AngularJS, que utilizo h um ano, e a lua-de-mel com ele ainda no
acabou. O problema fundamental cuja resoluo busco em qualquer framework de front-end
a capacidade de ajudar a construir uma interface de usurio complexa no front-end, no
somente comparvel, mas melhor do que aquelas que pudemos construir no passado com
frameworks back-end como JSP, PHP, Rails, etc.
Julio Cesar Ody: Na maioria das vezes uso Backbone e venho utilizando cada vez mais o
React.js como substituto das views do Backbone. Todas as aplicaes web que construo executam completamente em navegadores e se comunicam com um servidor utilizando uma
API ou WebSockets. Isso significa que muita lgica acaba sendo escrita em JavaScript e o
Backbone ajuda a manter as coisas ordenadas e manutenveis.
Thomas Davis: Minha primeira experincia com frameworks JavaScript MVC foi no final de
2010 e naquele tempo estava decidindo entre utilizar o Backbone.js ou o Sproutcore. Fiz um
post comparativo que chegou a pgina principal do Hacker News e recebeu mais de 100.000
visualizaes. Baseado no feedback que recebi naquela poca, decidi utilizar o Backbone.js,
pois era compacto e no impedia de implementar funcionalidades complexas sem estar preso
s convenes de um framework maior. Conforme aprendia o Backbone.js, escrevi tutoriais
que deram um entendimento mais concreto do framework. Estes posts receberam e ainda
recebem milhes de visualizaes. Os arquivos atuais esto em backbonetutorials.com.
Atualmente, ao construir um produto, a experincia do usurio e o design so cruciais para
a necessidade de manter o site relevante. Aplicaes de uma nica pgina (Single Page Applications) lhe permitem implementar experincias que as pginas tradicionais no permitem
devido atualizao da pgina. Por exemplo, imagine utilizar o Facebook e ter de atualizar
a pgina a cada curtida ou comentrio.

InfoQ Brasil 15

InfoQ: Com tantas alternativas disponveis, como comparar um framework com os outros?
Julien Knebel: O Ember.js possui desempenho muito bom! Nunca imaginei que fosse codificar aplicaes quase que inteiramente sozinho. O Angular realmente muito bom, e gosto da
forma rpida que se comea a utiliz-lo, entretanto, acredito que ele tende a se tornar mais e
mais tedioso conforme a sua base de cdigo cresa. Por outro lado, tive mais dificuldade com
o Ember no incio, mas se tornou mais simples conforme fui aprendendo. Outro ponto importante a componentizao. No gosto da forma que as diretivas do Angular lidam com
isto e os componentes do Ember parecem realmente estar no caminho certo na forma de tratar
componentizao.
Brad Dunbar: Acho muito difcil uma biblioteca JavaScript preencher todas as necessidades
da minha aplicao. Isso significa que frequentemente acabo escrevendo algum cdigo no
entorno delas. A funcionalidade do Backbone pequena e prov utilitrios para composio,
ao invs de utilizar grandes blocos que no so exatamente o que preciso.
John Munsch: Esta uma pergunta difcil, minha experincia envolve apenas o Backbone.js
(menos de dois anos de experincia) e o AngularJS (um ano). Mas entre estes dois, no acho
que seja uma escolha difcil.
O Backbone.js estava funcionando bem, mas tivemos um grande projeto com mais de 6 pessoas trabalhando juntas e o observamos problemas em todas as grandes lacunas do Backbone.js (associao de duas vias two way binding, validao, templates, AMD, etc) que so
normalmente fornecidas com outros softwares. Se no definir todas as solues para estas
lacunas antes de iniciar o projeto, cada desenvolvedor vai procurar preench-las da sua maneira. Se estiver com o cronograma apertado e escrevendo muito cdigo rapidamente, pode
ser muito difcil capturar toda esta divergncia e aplicar consistncia.
Terminamos com um projeto funcionando sendo muito mais rpido que a soluo anterior,
mas era uma Quimera: cada parte parecia ser um animal diferente. Com o AngularJS, muitas
destas partes so do prprio framework e h menos espao para este tipo de problema.
Julio Cesar Ody: Diria que o Backbone o mais compacto, mas no um ponto particularmente til para focarmos. De forma geral, o framework que mais lhe agradar vai ser tambm
aquele que vai lhe tornar mais produtivo.
Ento, entre Backbone, Angular e Ember no h como errar. Estou deixando o React.js de
fora, pois somente uma biblioteca de componentes de interface e no deve ser confundido
com frameworks de aplicao.
Thomas Davis: Muita coisa mudou desde 2010 e, mesmo tentando constantemente quebrar
meus velhos hbitos, ainda uso o Backbone.js atualmente. Ele continua compacto e no mudou nenhum de seus conceitos ou mtodos centrais. Embora na minha opinio, ele esteja na
eminncia de ser substitudo pelos seus competidores.
Os esforos realizados em bibliotecas como o Angular para permitir aos desenvolvedores um
controle mais intuitivo sobre o DOM fazem o Backbone.js parecer arcaico quando se trata de
renderizao. Com o novo movimento de JavaScript modular tambm podemos chamar o
Backbone.js de monoltico no aspecto de tamanho.
No existem razes para os modelos (models), colees (collections), roteadores (routers) e
vises (views) serem empacotadas na mesma biblioteca. Alternativas como o Components.js
esto escrevendo estas partes como mdulos individuais. Isso no est completamente finalizado no momento e estou considerando utiliz-lo nos prximos projetos.

16 eMag: HTML5 & JavaScript

InfoQ: Construir rapidamente aplicaes mais robustas de front-end interessante, mas e

o desempenho? Especialmente em mobile, qual sua experincia?
Igor Minar: Acho que o mobile ainda uma rea mal servida para o desenvolvimento web.
necessrio aplicar muito mais foco para esta rea e o Angular est definitivamente se reposicionando para o mobile em sua verso 2.0.
Julien Knebel: O Ember mais pesado que os demais, isto um fato. Mesmo se minific-lo
e comprimi-lo, ento isto algo importante a se considerar principalmente se est planejando
construir aplicaes web para mobile. Ter de lidar com transaes de 60 FPS (frames por segundo) de forma suave difcil, seja implementando em Ember ou em qualquer outro framework. Diria que necessrio saber como lidar com os problemas comuns de desempenho na
renderizao, caso contrrio vai enfrentar problemas independente do framework que escolher.
Brad Dunbar: O Backbone possui alto desempenho e compacto em relao aos demais. No
tenho encontrado problemas ao utiliz-lo para mobile, apesar de no construir aplicaes
para dispositivos com mais de uma gerao de idade.
John Munsch: Ainda no estamos focados em mobile para o meu site atual, mas j fiz isto
para o meu empregador anterior. Como eles queriam executar uma interface web adicional
em leitores de cdigos de barras em depsitos e hangares, criamos uma interface de usurio
(IU) secundria, composta de paginas construdas exclusivamente para os leitores de cdigo
de barras. Eles usaram a mesma tecnologia usada na UI para navegadores de desktop e as
pginas chamavam as mesmas APIs de back-end, mas eram menores e mais simples para as
pequenas telas sensveis ao toque dos leitores de cdigo de barras.
Naquele ambiente, essa pareceu uma soluo melhor do que tentar fazer uma verso responsiva das pginas existentes no qual teramos que abandonar 80% da funcionalidade no mobile. Tivemos muita sorte de leitores de cdigo de barras de boa qualidade com navegadores
HTML5 estarem disponveis antes do projeto entrar em produo. O trabalho em desenvolvimento foi realizado com leitores de cdigo de barras que possuam apenas o IE 5.5 disponvel.
Se tivesse de voltar ao projeto hoje, a primeira coisa que provavelmente faria seria adicionar
o Grunt para concatenao, minificao e reviso do JavaScript para acelerar o desempenho
no mobile e no desktop e tambm ativar a expirao dos cabealhos para que o cache do
navegador pudesse ser ativado para um ms ou mais.
Julio Cesar Ody: O JavaScript rpido e atualmente os navegadores so muito eficientes e
continuam se aperfeioando. Seria necessrio fazer uma grande baguna para tornar as coisas
realmente lentas.
O desempenho muito importante quando tratamos de boa experincia de uso. Mas o JavaScript apenas uma parte da histria. Como se utiliza o CSS (transies e animaes) e o quo
bom e leve sua marcao HTML (markup) tambm podem exercer um grande impacto sobre o desempenho. preciso ser cuidadoso com o todo.
Se j programou qualquer micro controlador em C talvez saiba o que significa escrever programas que executam em dispositivos limitados. Apesar dos celulares serem computadores
poderosos, eles ainda so significativamente mais lentos que o laptop mdio. No possvel
se dar ao luxo de cometer tantos erros e precisa levar em conta a regra que mencionei antes e
ter cuidado redobrado.
Medir coisas que so problemticas ajuda bastante. E nesse contexto, o Chrome DevTools me
vem mente.

InfoQ Brasil 17

Thomas Davis: No existe bala de prata na escolha entre mobile e desktop para abordagem
de desenvolvimento de front-end no momento. s vezes aplicaes nativas so melhores, as
vezes aplicaes JavaScript e outras vezes pginas geradas pelo servidor. Embora por questes de eficincia relacionada ao DOM em geral, provavelmente faria uma aposta segura no
React. O React implementa um DOM virtual que difere do DOM dos navegadores e somente
faz alteraes quando necessrio buscando alto desempenho de renderizao. Pelo fato do
DOM ser virtual, tambm pode renderizar o DOM no servidor e acess-lo programaticamente.

InfoQ: Qual o seu fluxo de trabalho utilizando o framework escolhido? Quais ferramentas usa para desenvolver e depurar?
Igor Minar: Webstorm, Karma e Chrome.
Julien Knebel: Uso Grunt como ferramenta de construo (build) para pr-processar, prcompilar, ps-processar, concatenar, minificar, etc. O TextMate2 como editor (IDE) h anos.
Tambm gasto bastante tempo depurando no Chrome DevTools com breakpoints. E claro,
no viveria sem o Git.
Brad Dunbar: Costumo utilizar uma configurao minimalista incluindo uma interface de
linha de comando (Command Line Interface CLI) e vim/node/npm. Ultimamente, tenho
gostado de utilizar o browserify para empacotamento. No fluxo de trabalho, uso o tpico ciclo
codificar, atualizar, depurar. Nunca fui um grande defensor de escrever os testes antes do
cdigo ou coisas desta natureza.
John Munsch: A maioria dos desenvolvedores na equipe de front-end usa WebStorm ou Sublime em computadores Mac, o projeto construdo e executado pelo Maven porqu o backend Java e, recentemente comeamos a executar o Grunt de dentro das nossas construes
Maven para conseguir otimizaes do cdigo de front-end. O Jenkins utilizado para construo, execuo de testes unitrios e implantao para vrios ambientes de testes e de produo.
Os desenvolvedores usam o Karma em suas mquinas para executar em segundo plano os
testes unitrios em AngularJS que temos atualmente (infelizmente, a cobertura de cdigo
atual de apenas 30%).
Julio Cesar Ody: Fao o mximo possvel de design no incio. Olhar como a pgina vai se
apresentar ajuda a fazer uma diviso mental dos componentes que preciso escrever.
Recentemente tenho usado muito o Hopla como ferramenta de construo. Ele usa o Sprockets
para traduzir CoffeeScript e SASS e compila a aplicao para HTML/CSS/JS esttico. Isto
til para implantaes e at para a construo de aplicaes Phonegap.
Ento, usualmente comeo um design implementando uma pgina HTML esttica com estilos usando SCSS, revisando cada parte dela posteriormente e substituindo com componentes
JavaScript.
Thomas Davis: Honestamente, sou muito indiferente sobre como as pessoas gostam de desenvolver e depurar, e minhas metodologias mudam projeto a projeto. O nico conselho que
dou aos desenvolvedores que usem Asynchronous Module Definition (AMD). O Require.js
oferece uma implementao robusta de AMD e na minha experincia, torna a depurao mais
fcil em todas as linguagens e ambientes. Ele no s lhe ajuda a estruturar seu cdigo de
forma inteligente, mas tambm reduz para nveis muito baixos a barreira de entrada para a
sua base de cdigo, pois tudo precisa ser uma dependncia referenciada apontando para um
caminho de arquivo.

18 eMag: HTML5 & JavaScript

InfoQ: Conforme uma aplicao cresce, pode ser desafiador manter uma arquitetura robusta e uma grande base de cdigo. Como o seu framework JavaScript favorito escala?
Alm disso, como ele escala quando uma equipe de desenvolvimento cresce e diferentes
pessoas precisam trabalhar em diferentes partes das funcionalidades?
Igor Minar: A reutilizao de cdigo, reduo de cdigo boilerplate e guias de estilos e convenes so importantes para reduzir a complexidade de grandes bases de cdigo. Mas em
nossa experincia no mundo real temos observado que conjuntos de testes de alta qualidade
apresentam ainda mais impacto, pois permitem refatorar enquanto mantemos o risco baixo.
E refatorao a chave para mantermos uma grande base de cdigo limpa.
Matteo Pagliazzi: Alm da complexidade (como a presena de Servios, Factories e Providers, que so muito confusos), com simplicidade sendo um objetivo da verso 2 o que pessoalmente no gosto o mecanismo utilizado pelo Angular para verificar quais propriedades
mudaram e atualizar a visualizao (mas isto tambm vai acabar j que Object.observe implementado nativamente, permitindo que as notificaes sejam lanadas a cada alterao, ao
invs de checar por alteraes em cada uma das propriedades).
Para finalizar: O Angular realmente muito bom, apoiado por uma comunidade incrvel, um
enorme nmero de bibliotecas externas que geralmente satisfazem cada necessidade e
mesmo em casos que no encontre o que procura possvel escrever sua prpria diretiva.
Mas ele tambm cheio de conceitos complexos que levam tempo para entender.
Julien Knebel: O Ember lida muito bem com grandes bases de cdigos por causa da sua
"aplicao de boas prticas" e suas convenes fortes que permitem fazer muita coisa com
algumas simples linhas de cdigos (tambm conhecido como conveno sobre configurao).
Ele ajuda a cada membro da equipe a depurar o cdigo dos demais de forma mais rpida. Vi
alguns desenvolvedores irritados porque eles se sentiam limitados a codificar da forma que
o Ember impe, mas acho que a real frustrao vem do fato de que primeiro precisa entender/aprender o Ember antes de tentar fazer coisas legais com ele. E acredito que esse tempo
de aprendizado adicional realmente se paga no longo prazo. Alm disso, costumo confiar
bastante no trabalho de Yehuda Katz e Tom Dale.
Brad Dunbar: Acho que grandes bases de cdigo JavaScript so desafiadoras independente
do framework utilizado. Cabe a equipe manter um conjunto de diretrizes e aderir elas. O
uso de mdulos de algum tipo (mencionei o npm e o browserify) ajuda muito.
John Munsch: At agora nossas experincias escalando aplicaes tem sido boas. Cdigo de
front-end JavaScript escala bem porque existem muitos arquivos estticos passveis de otimizao, cache e at mesmo CDNs. Praticamente as nicas experincias ruins que tivemos foram tentando renderizar milhares de valores de dados nas pginas. Tentamos encorajar a
utilizao de paginao e outros ajustes deste tipo, mas no conseguimos chegar a um acordo
sobre como utiliz-los e grandes quantidades de dados gerando milhares de elementos no
DOM uma receita para problemas em navegadores antigos.
Outros problemas desapareceram por completo. Por exemplo, o comportamento padro do
AngularJS de descartar as vises (views) e controllers quando alternamos entre vises mantm o uso de memria da outra viso sem impactar a viso atual. Esta uma soluo simples
que ajuda os desenvolvedores a evitar diversos problemas conforme eles adicionam mais e
mais funcionalidades em uma aplicao de pgina nica.
Julio Cesar Ody: No acho que nenhum dos frameworks populares tenham um caminho
para escalabilidade definido. o desenvolvedor que deve pensar em algo e executar esta
ideia.

InfoQ Brasil 19

Sempre gostei do conceito de componentes/mdulos, porque penso em escrever programas

da mesma forma que se constri um relgio. Cada parte (ou componente) tem o seu propsito, e precisa funcionar de forma mais independente possvel, expondo uma pequena rea
de superfcie pela qual os outros componentes podem interagir.
Thomas Davis: Como disse anteriormente, desde que use um framework JavaScript modular
como o Require.js, escalar e manter a sua base de cdigo um passeio no parque e s vai
depender das suas prticas de codificao. Embora o Backbone.js precise ser dividido em seus
prprios mdulos neste momento para que, ao invs de requerer o Backbone como dependncia, possvel usar apenas Backbone.Model, por exemplo.

InfoQ: Para as equipes que esto considerando adotar um framework JavaScript, quais
seriam algumas das armadilhas mais comuns a serem evitadas?
Matteo Pagliazzi: Trabalhando em um grande projeto de cdigo aberto e utilizando o Angular como framework de client-side, descobri que fcil para os desenvolvedores sem muita
experincia encontrarem problemas com herana ou poluir o $scope e o $rootScope com muitos objetos, que a partir de um certo ponto vo comear a deixar a aplicao mais lenta e
aumentar o volume de memria RAM utilizada pelo navegador (facilmente usamos mais de
300 MB e isso pode chegar facilmente a 1GB mesmo com um pequeno vazamento de memria). O fato dele tornar a associao de dados (data binding) to "simples" fantstico, mas
preciso entender que nem sempre vai funcionar da forma que se espera s porqu ele "mgico".
Julien Knebel: Todos esses frameworks MV* fazem clculos pesados no front-end, ento, se
a aplicao precisar apresentar um grande volume de dados para o usurio, rapidamente
atingir o seu limite de desempenho de renderizao (estou falando do limite de 60 FPS). Ser
necessrio tratar da paginao, rolagem de pgina inteligente; utilizar CSS de forma moderada e inteligente, sequenciamento sutil, definir alguns poucos lugares escolhidos para exibir
spinners e fazer chamadas de rede que recuperam dados, etc. Tudo isso importa muito.
Brad Dunbar: Acho que os problemas mais comuns aparecem antes mesmo de utilizar qualquer framework. A parte cliente da aplicao vai precisar de testes, mdulos, gerenciador de
pacotes e integrao contnua, da mesma forma que o servidor. Se conseguir se manter fiel
isto, provavelmente no vai ter problemas.
John Munsch: Mencionei os problemas que tivemos com o Backbone.js, mas existem alguns
problemas comuns que sempre podem surgir. Por exemplo, SEO um fator a ser considerado
para pginas geradas inteiramente via JavaScript no front-end. Tenho a sorte de que a maioria
do meu trabalho com SaaS, ento SEO no tem sido algo com que nos importemos muito,
mas se est construindo algo para um pblico amplo na web melhor analisar solues como:
Prerender.io, BromBone, etc. O Google Analytics pode apresentar problemas similares. Nenhum destes problemas insolvel, mas bom que conhece-los e saber que talvez precise
escolher uma soluo.
O IE8 tem sido sem dvida um dos maiores problemas. o ltimo navegador com uma fatia
significativa do mercado que no possui um compilador just-in-time para JavaScript. Como
resultado, front-ends com muito cdigo JavaScript podem ficar lentos s vezes, podem disparar erros do tipo "o script no est respondendo" quando apresentando muitos dados, etc.
O quanto antes pudermos nos livrar do IE8, melhor ser para todos.

20 eMag: HTML5 & JavaScript

Julio Cesar Ody: A curva de aprendizado definitivamente o maior problema que vejo. A
maioria das pessoas vm desenvolvendo aplicaes web h anos, que consistem no componente servidor recebendo requisies, processando-as e enviando HTML de volta ao navegador.
Esse um paradigma completamente diferente que lembra muito o paradigma cliente/servidor e isso no algo que muitos tenham feito antes. Ele possui muitos dos problemas que
o paradigma cliente/servidor tinha, e ter algum conhecimento sobre ele certamente vai ajudar.
Thomas Davis: A nica grande armadilha a se preocupar no ter contedo gerado pelo
servidor disponibilizado na URL. Isto obviamente vai fazer os motores de busca pararem de
indexar o seu website e tambm vai encontrar problemas para compartilhar sua pgina. Muitas redes sociais tentam agora analisar o seu website quando os usurios o compartilham
para que elas possam buscar informaes adicionais. Se no tiver contedo gerado pelo servidor disponvel no tempo adequado, estas tentativas vo falhar. Embora este problema tenha sido resolvido muitas vezes, recomendo prerender.io como uma boa soluo de cdigo
aberto. Tambm tenho escrito bibliotecas SEO para mitigar este problema. Apesar das grandes empresas de motores de busca renderizarem sua aplicao para busca de contedo, algumas pessoas especulam que todo o projeto Chromium uma tentativa da Google de ser
capaz de carregar e executar todas as pginas para que eles possam amarr-lo ao Google Bot
e indexar todo o contedo apresentado pelo JavaScript.

InfoQ: Para quem quer comear a trabalhar com algum dos frameworks, qual seria o caminho de aprendizado mais rpido e eficiente? Gostaria de recomendar algum material?
Igor Mintar: Existem muitos livros bons sobre Angular, listas como a ng-newsletter.com e
muitos podcasts timos no egghead.io.
Julien Knebel: Os guias oficiais do emberjs.com so timos, cada um deles foca em um recurso
especfico do framework. Escrevi uma introduo para iniciantes na Smashing Magazine
(quando o Ember 1.0 foi lanado) que, na minha opinio, continua relevante.
Brad Dunbar: Talvez no seja a coisa mais legal a apontar, mas sempre recomendo a leitura
do cdigo fonte, porque l que a ao acontece. A leitura do cdigo trar muita familiaridade com a sua escolha de framework MVC, ento se no tiver estmago para encarar o
cdigo fonte talvez deva considerar utilizar outro framework.
John Munsch: Se a pessoa em questo j for familiar com JavaScript recomendo pegar um
pequeno projeto (quatro ou menos telas (views) distintas formando uma aplicao web) e
implementar o projeto inteiro usando o framework em questo. Construindo algo, mesmo
algo muito simples, por todo o caminho at a concluso e implantao. muito diferente de
"brincar" com o framework, porque ser necessrio resolver alguns problemas especficos e
comear a entender algumas coisas que de outra forma passariam despercebidas, porque elas
no so as partes divertidas de se aprender.
Julio Cesar Ody: Cometa quantos erros puder em projetos experimentais, mas seja extraordinariamente consciente sobre eles. O que quero dizer, que intil tentar com unhas e dentes fazer tudo da melhor maneira possvel logo de cara, e isso no vai tornar o aprendizado
mais rpido.
Ento, refatore seu cdigo continuamente, mantendo em mente a procura de um cenrio que
possa utilizar diversos componentes em conjunto e formar uma aplicao completa, e mantenha o mais independentes possvel.

InfoQ Brasil 21

Escrevi um livro gratuito sobre este assunto, com nfase em Backbone.js, que claro que vou
recomendar.
Thomas Davis: Depende do seu estilo de aprendizado. Geralmente prefiro simplesmente comear a tentar algo direto. Tenho recebido feedbacks fantstico sobre o meu vdeo-tutorial para
Backbone.js, que pode ser encontrado no Youtube.

InfoQ: Agora que os frameworks MVC tornaram-se mainstream, como pensam que eles
devem evoluir para melhor se adequar s necessidades dos desenvolvedores? Por exemplo, quais funcionalidades ainda faltam?
Igor Minar: Mobilidade e testabilidade.
Julien Knebel: Sincronizao de dados entre o back-end e mltiplos clientes em tempo real
seria o prximo passo lgico. O Meteor.js parece que vai seguir esse caminho, ento certamente vou experiment-lo em breve.
Brad Dunbar: Costumo submeter cdigo para coisas que acredito que o Backbone precise e
nem todas elas so boas :)
John Munsch: A resposta mais fcil algo que os nmeros do ngmodules.org apresentam sobre
solues que os desenvolvedores acabando procurando constantemente. Qualquer coisa que
una frameworks de front-end frameworks HTML/CSS (como o Bootstrap), upload de arquivos, internacionalizao e localizao, etc. Se centenas de desenvolvedores tiveram que
procurar um recurso e gastaram tempo para marcar em um website que eles o utilizaram,
pode apostar que milhares de outros desenvolvedores tambm usaram o recurso. Esta a
resposta fcil, mas gostaria de conectar duas coisas que no acho que recebem a ateno que
merecem, validao e ausncia de back-end.
Validao
Validao no cliente algo geralmente necessrio e que pode se tornar muito complexo para
algumas pginas. Temos pginas que vrias datas precisam ser testadas entre si para garantir
que elas ocorrem na sequncia correta, e muitas outras variveis tem vrias regras tambm.
Ento, enviamos para o servidor via chamada de API e ele tenta fazer as mesmas validaes,
pois nunca podemos confiar na validao no cliente. Nosso back-end no escrito em JavaScript, ento no podemos usar uma biblioteca de cdigo em comum para fazer a validao e
temos de construir dois conjuntos do mesmo cdigo em linguagens diferentes e nos dar o
dobro de probabilidade de cometer erros em algum caso extremo.
Por qu no descrever os dados em esquema (schema) JSON e ento tornar fcil para utilizlo para validao em ambos os lados (cliente e servidor) de uma chamada da API? Gostaria
de ver isso poder ser feito de forma simples.
Ausncia de Servidor
Houve alguns rumores sobre isso no ltimo ano como o estado da arte (por exemplo, nobackend.org), mas isso est comeando a morrer. Mas a ideia parece ainda estar forte com o Firebase, Hoodie, Backendless, etc. Acho que uma boa maneira dos desenvolvedores familiarizados apenas com o trabalho em front-end construrem uma aplicao completa sem precisar
da ajuda de algum para construir o back-end. Mesmo para aqueles que constroem o frontend e o back-end de uma aplicao de forma confortvel, ela prov uma forma simples de
prototipar uma ideia ou produzir um MVP.

22 eMag: HTML5 & JavaScript

Julio Cesar Ody: difcil dizer. Acho que muitas ideias nasceram de equvocos sobre modularidade, e o pensamento de ter cada vez mais recursos algo que venho historicamente lutando contra.
Mas acho que o React.js tem a ideia correta sobre isso, na medida que ele lhe oferece uma
abordagem direcionada componentes para construo de aplicaes, e difcil fazer algo
terrivelmente errado se simplesmente seguir os exemplos. Ele tambm abstrai alguns problemas complexos como a eficincia do DOM.
Este o tipo de problema que ningum quer gastar tempo resolvendo no decorrer do desenvolvimento de uma aplicao, ento, este um passo na direo certa.
Thomas Davis: O ferramental e os frameworks MVC client-side esto fazendo progresso rpido na direo certa. Acredito que as APIs de servidores esto ficando pra trs neste ponto.
No h nenhuma conveno real que as pessoas esto seguindo para construir APIs RESTful,
o que torna difcil para as colees e modelos client-side trazerem os dados de forma eficiente.
O log de erros no client-side ainda precisa de melhorias, mas tentativas como o trackjs.com
esto fazendo progresso neste ponto. A forma como os eventos so tratados do lado cliente
tambm precisam de melhorias.

Integrantes do painel

Igor Minar engenheiro de software no Google. lder do AngularJS, praticante de desenvolvimento guiado por testes, entusiasta de cdigo aberto e hacker.

Matteo Pagliazzi apaixonado por desenvolvimento de software e contribui com projetos de

cdigo aberto.

Julien Knebel designer de interface autodidata e desenvolvedor front-end vivendo em Paris

onde faz freelances para algumas das maiores empresas da Frana.

Brad Dunbar programador JavaScript e contribui frequentemente nos projetos Backbone e

Underscore.

John Munsch um desenvolvedor de software profissional com mais de 27 anos de experincia. Atualmente, lidera uma equipe que est construindo front-end em AngularJS para aplicaes web modernas, aps passar alguns anos fazendo o mesmo tipo de trabalho com Backbone.js, Underscore.js e Handlebars.js.

Julio Cesar Ody desenvolvedor de software, designer, palestrante e aspirante a escritor que
vive em Sydney, Austrlia. Trabalha muito com desenvolvimento para web em dispositivos mveis, e construiu um conjunto de ferramentas das quais ele se orgulha muito.

Thomas Davis o fundador do backbonetutorials.com, co-fundador do cdnjs.com e desenvolvedor para o taskforce.js. Tambm contribui diariamente para vrios projetos e cdigo aberto
que podem ser encontrados em github.com/thomasdavis.

InfoQ Brasil 23

Entrevista: Matthew Carver

sobre a web responsiva
por Matthew Carver, traduzido por Wellington Soares

A Web Responsiva uma importante parte da web moderna. O livro "Responsive Web" de Matt Carver fornece uma introduo e diversas sugestes de como iniciar nesse assunto
Em seu livro The Responsive Web, Matthew Carver fornece uma introduo acessvel para os projetos web modernos e a importncia do design responsivo. O livro dividido em trs sees. A primeira fornece uma breve introduo do que o design responsivo, por que existe, e algumas das
caractersticas dos navegadores modernos que permitem a web responsiva existir; e tambm no
caso de mobile-first sendo que os sites so projetados para dispositivos mveis antes de comear
o projeto desktop.
A segunda seo sobre como projetar para uma web responsiva. Antes de mostrar qualquer cdigo a ser escrito, Carver explica como apresentar ideias para os clientes. Usando a navegao como
um ponto de debate, aps isso, os padres de projeto so apresentados e o pensamento sobre como
construir de maneira responsiva. O livro ento explica alguns dos fundamentos de como realmente
construir um design responsivo e algumas das tcnicas modernas de apresentao de informaes
como a tipografia web.
Na parte final, mais tcnicas avanadas so apresentadas como solues efetivas para problemas
em vrios navegadores. O livro termina com prticas avanadas para testar um projeto e como
aperfeioar seu desempenho.
O InfoQ conversou com Carver sobre seu livro os desafios encontrados pelos desenvolvedores web
hoje.

InfoQ: Os modernos desenvolvedores web enfrentam desafios com diversos navegadores

e dispositivos. Quais conselhos podemos dar para os desenvolvedores que esto lutando
para se manter?
Carver: H diversas maneiras para emular dispositivos e navegadores. Seria timo ter um
laboratrio com muitos dispositivos atuais e com todos telefones celulares, mas essa no
uma realidade para muitos desenvolvedores, por sorte h alternativas. O Chrome, em suas
ferramentas de desenvolvimento, oferece um tipo de emulador que enquadra a janela ao tamanho de um dispositivo. Tambm emula coisas como controles de toques; assim possvel
ter uma ideia do que esperar do navegador Chrome nos celulares e tablets. Ao instalar o
Android SDK, automaticamente ser instalado o emulador oficial do Android. E no Mac OS,
instalando o Xcode, automaticamente ser instalado um emulador para dispositivos iOS.

O que acha dos frameworks como Foundation ou Bootstrap? Como acha que eles se enquadram na caixa de ferramentas dos desenvolvedores?
No meu livro discuto Foundation em detalhes e o mostro como sendo uma tima ferramenta
para prototipao, mas recentemente estive experimentando isso no ambiente de produo.
O argumento mais comum contra isso que aumentam seu cdigo e podem restringir o design. Porm, sinto que so necessrios no processo.

24 eMag: HTML5 & JavaScript

A construo de sites est ficando cada vez mais complexa, quando vamos usando a web
para implementar mais e mais problemas do mundo real, ento quando se decide construir
um site, s vezes no haver certeza onde ir parar.
Ter um framework como base no projeto oferece uma soluo pr-fabricada que livra o desenvolvedor de resolver problemas de imediato, como quais botes vo parecer nesse site?.
Permite tambm resolver problemas muito mais complexos como h um jeito melhor de
implementar esse boto?. Acabo customizando 70-80% do framework, mas usar Foundation
ou Bootstrap como ponto de partida economiza muito tempo.

Qual sua resposta aos crticos que dizem que o design responsivo causa consumo excessivo de banda e problema de memria em dispositivos mveis?
Acho uma critica vlida. O que importa que o desenvolvimento de web nunca teve uma
enorme quantidade de solues oferecidas que no tivesse um lado controverso. Assim pergunto, j houve alguma soluo para o desenvolvimento web que nunca sofreu uma enxurrada de criticas?
Considere o Swift. A Apple tem mais dinheiro guardado do que alguns pases e passou anos
criando uma linguagem para melhorar o desenvolvimento do iOS e imediatamente teve crticas sobre a qualidade da compilao (por exemplo). Ao encarar isso como desenvolvedor,
somos muito criticados. E se quiser saber como deixar de aceitar mudanas no modo de
trabalho, converse com um desenvolvedor do Flash.
Uso de rede e memria esto no oramento; para completar suas tarefas necessrio gastar
esse oramento. Desenvolvedores podem gastar mais por muitas razes, porm, no motivo
para deixar de lado o design responsivo como um todo. Isso errado. H o ditado Um carpinteiro ruim culpa suas ferramentas. Um projeto responsivo uma ferramenta para resolver problemas de dispositivos semelhantes na web. A fragmentao de aparelhos uma realidade tambm na web e s porque o projeto responsivo no perfeito, no significa que
ele no valha nada.

Ferramentas integradas com os navegadores continuam avanando. Quais melhorias deixam voc mais empolgado? Quais partes so mais teis para os desenvolvedores de sistemas responsivos?
Acho que esse movimento para construir ferramentas continua fantstico. Sei que no so
mais novidade, mas ferramentas como gulp e grunt tm tornado o processo de desenvolvimento bem mais eficiente. A habilidade do Compass em gerar sprites em tempo real fascinante e ferramentas como Live Reload fazem o processo de front-end se desenvolver muito
mais rpido.

InfoQ: Como a Web Responsiva vai mudar no futuro?

Isto uma pergunta difcil. Em um anexo do meu livro falo sobre Design consciente do
contexto, a ideia de que a interface deve se adaptar ao ambiente e o modelo do usurio. Vi
isso sendo discutido em diversos locais, tanto na teoria e na prtica como filosofia responsiva. Para mim, saber que esse mesmo conceito estava sendo explorado independentemente
em vrias frentes mostra que uma rea relevante.
Acho que temos todas as ferramentas para oferecer uma conexo profunda com a UI para os
usurios da web, de tal maneira que se possa incorporar a preferncia pessoal deles, ambiente, o momento e a personalidade para o projeto de interfaces.

InfoQ Brasil 25

O que acha das ferramentas Macaw e Brackets quando est projetando e escrevendo cdigo?
Elas so timas. No sei qual deveria usar na produo no momento, timo ter ferramentas
que ajudam o desenvolvedor a alterar dimenses e ver o que sobra de espao. A habilidade
de manipular e alterar espaos delimitados em um projeto ajuda o desenvolvedor articular
suas ideias num ambiente mais parecido com os navegadores de verdade. Acho melhor os
designers utilizarem um conjunto de ferramentas, em vez de uma nica aplicao para comandar tudo, como o Photoshop.

Quais suas motivaes ao escrever o livro?

Eu queria criar algo para solucionar o que vi como o maior erro no desenvolvimento da web
moderna: a colaborao entre reas/disciplinas. Eu tinha esperana de escrever algo que um
designer pudesse ler e entender os desafios de um desenvolvedor, e que ao mesmo tempo
permitisse a um desenvolvedor compreender os desafios do designer. Importo-me profundamente com a web e acredito fortemente que podemos usar a web para tornar a vida melhor.
Mas isso s pode acontecer se primeiro desenvolvermos sistemas para solucionar problemas,
e se tornarmos essas solues utilizveis pela maioria das pessoas.
Um bom desenvolvedor pode inventar uma nova forma fantstica de se procurar produtos,
que corte os custos dramaticamente. Mas se a soluo depende totalmente de uma interface
de linha de comando, ter muito pouco impacto. Por outro lado, um designer pode vir com
um lindo modelo de interface, mas se o software no funcionar, no adianta. Precisamos de
pessoas com essas habilidades para se comunicar e criar solues que nos levem adiante.
Espero que meu livro possa colaborar com isso em algumas situaes.

Voc acredita que o design responsivo teve impacto no trabalho feito pelos desenvolvedores web de hoje?
Acho que faz parte de todas as funes no processo. No podemos ignorar a preferncia de
aparelhos dos usurios; penso que o design responsivo j tem seu lugar no processo de
desenvolvimento. Acredito que hoje o processo padro. Hoje j preciso me justificar quando
no incluo layouts responsivos por padro!
Nota: O livro The Responsive Web est com 40% de desconto usando o cdigo info40rwd na manning.com. O cdigo est ativo e no expira.

Sobre o autor do livro

Matthew Carver desenvolvedor front-end, autor e web designer, com experincia em projetos de design responsivo para clientes como American Airlines e
Dallas Morning News.

26 eMag: HTML5 & JavaScript

React.js na vida real do Codecademy

por Bonnie Eisenman, traduzido por Rafael Sakurai

O Codecademy adotou o React.js no ambiente front-end de aprendizado. Enquanto muitos exemplos so simples, a autora Bonnie Eisenman aborda como usar o React em um ambiente grande e
crtico.
Em agosto de 2014, o Codecademy decidiu adotar as bibliotecas do Facebook para escrever as interfaces de usurios em JavaScript, o React.js, como parte de um inspeo do nosso ambiente de
aprendizado. Inicialmente, corremos para corrigir os problemas procurando exemplos de como o
React pode ser usado em aplicaes complexas, sendo que a maioria dos tutoriais focam em exemplos especficos de demonstraes indo em caminho oposto as discusses mais gerais sobre problemas especficos em grandes aplicaes. Esse artigo foca em ambos, uma viso geral do React.js e
algumas dicas sobre consideraes especficas do seu uso em grandes aplicaes web.

O que React?
Resumindo: o React uma biblioteca para construir interfaces de usurios com JavaScript. Ao invs
da abordagem tradicional de escrever interfaces de usurios (UI), o React trata cada elemento de
UI como uma mquina de estados. O React no um "framework" como no caso do AngularJS.
Embora o Facebook algumas vezes descreva o React como o "V do MVC", acredito que essa descrio no til, j que as aplicaes no precisam utilizar o modelo MVC. O React ajuda a construir
rpidas interfaces de usurios que podem tratar interaes complexas sem poluir o cdigo.
Aps comear a trabalhar com o React podemos ficar menos preocupados com essas funcionalidades:

O React trata o DOM

A manipulao do DOM custosa. O React veio amplamente como uma forma de resolver esse
problema. O React minimiza a quantidade de manipulao do DOM mantendo seu prprio DOM
virtual e somente renderizando quando necessrio, um feito que permite uma implementao diferente de alto desempenho.
Isso significa que raramente manipularemos o DOM diretamente, ao invs, deixe o React tratar a
manipulao do DOM. Essa funcionalidade a base para muito do design do React. Se sentir que
est abusando da API do React ou tentando mudar a sua forma de fazer isso, h muita chance de
estar interferindo na forma como o React entende o DOM.
Essa funcionalidade tambm permite construir a renderizao no lado servidor usando o Node.js,
que permite facilmente servir pginas que so amigveis para ao Search Engine Optimization
(SEO).

O React pensa declarativamente em componentes

No React, tudo precisa ser subclasse da classe Component. Os componentes tem propriedades (determinados pelos seus pais) e estado (que podem mudar eles prprios, no entanto baseados nas
aes dos usurios). Os componentes podem renderizar e se comportar com base somente em seus
estados e propriedades; os componentes so mquinas de estados. Esse modelo encoraja a construo de UIs modulares e na prtica facilitam o trabalho e a razo da UI.

InfoQ Brasil 27

O React casa com as marcaes do JavaScript

Embora possa ser meio estranho escrever HTML no JavaScript, no React essa a forma natural de
fazer as coisas. Usar o JSX puro JS misturado com marcaes HTML opcional, mas altamente
recomendado. O React argumenta que como as marcaes so fracamente acopladas com o JavaScript que os controla, eles podem viver bem no mesmo arquivo.

As informaes fluem em uma direo

Isso mais um padro geral do React do que uma regra restritiva. O fluxo de informaes tende a
ser unidirecional no React. Revisaremos esse padro posteriormente assim que consideremos como
o fluxo de informao necessita ser tratado em grandes aplicaes.

Anatomia de uma aplicao React

Para tornar esses princpios mais concretos, vamos analisar como o React trabalha no ambiente de
aprendizado do Codecademy.

Figura 1: O ambiente de aprendizado.

Como podemos ver na imagem, o ambiente de aprendizado principal consiste de muitos elementos
de UI diferentes. Alguns elementos como o cabealho, menu e navegao esto presentes todo
tempo. No entanto, dependendo do exerccio, alguns componentes aparecem e desaparecem o
navegador web, a linha de comando e o editor de cdigo podem ser misturados e apresentados
dependendo da lio.
A soluo lgica criar componentes React para vrias partes. Na imagem a seguir so destacados
os principais componentes React:

28 eMag: HTML5 & JavaScript

Figura 2: O ambiente de aprendizado e componentes relacionados. Cada componente tambm pode conter diversos
componentes filhos; por exemplo, o painel de lio da esquerda atualmente composto por vrios componentes:

Figura 3: Os subcomponentes que compem o componente de Lio.

Nesse caso, deixamos o React determinar o que apresentar no painel de lio. Por exemplo:

Somente mostrar a boto "Report a Problem" se o usurio estiver autenticado;

Somente renderiza a "Instructions section" se o exerccio tiver testes.

InfoQ Brasil 29

Alm disso, o React trata o fluxo de informaes entre esse e outros componentes. H um componente pai para todo o ambiente de aprendizado, que continua tratando o estado, tal como os exerccios do usurio. Esse componente pai dita como seus filhos podem ser renderizados atribuindo
suas props (propriedades).
Agora, vamos verificar um exemplo de comunicao de componentes, usando os seguintes componentes nesse componente de rvore bem simplificado:

LearningEnvironment (Ambiente de aprendizado);

CodeEditor (Editor de cdigo);

ErrorDisplayer (Apresentar erros);

RunButton (Boto de execuo);

Navigation (Navegao).

Figura 4: Alguns componentes envolvidos no cdigo de submisso.

Como tratamos o fluxo de trabalho de um usurio tentando executar seus cdigos? Queremos executar os testes sobre os cdigos e apresentar uma mensagem de erro ou permitir sua continuao.
Aqui est um possvel fluxo:

Quando o usurio clica no boto Run, ele informa seu pai, o CodeEditor, da ao via callback;

O CodeEditor, ento informa ao seu pai, o Learning Environment, lanando outro callback,
passando atravs do cdigo atual do usurio;

O Learning Environment executa os testes no cdigo do usurio.

Com base no resultado:

O LearningEnvironment define a propriedade errorMessage no CodeEditor, que ento define a propriedade errorMessage no seu filho, o ErrorDisplayers;

30 eMag: HTML5 & JavaScript

Se o usurio passar em todos os testes do exerccio, o LearningEnvironment define a propriedade de progresso no componente Navigation.

As atualizaes da UI podem ser executadas com uma simples chamada de funo. Se os componentes forem declarados como esse mtodo de renderizao do LearningEnvironment (novamente,
uma verso simplificada):
render: function() {
return(
<div>
<CodeEditor
error={this.state.error}
/>
<Navigation
mayProceed={this.state.mayProceed}
/>
</div>);
}

Lembre-se, o React mistura JavaScript com marcaes HTML. Nesse caso, o mtodo render est
definindo um LearningEnvironment como algo que contm ambos componentes CodeEditor e
Navigation.
Podemos atualizar o estado do LearningEnvironment, que acionar uma renderizao e atualiza
os componentes filhos se necessrio:
handleTestResult: function(currentIndex, passing, error) {
this.setState({
error: error,
mayProceed: passing && currentIndex === this.state.currentExercise.tests.length-1
});
}

O React trata as atualizaes do UI de forma simples e elegante.

Consideraes para grandes aplicaes Fluxo da informao

Como notado previamente, o React no utiliza necessariamente o modelo MVC; de fato, estamos
livres para tratar o fluxo de informaes, mas precisamos de uma estratgia consistente para obter
informaes. E se no quiser passar para baixo o encadeamento das propriedades dos componentes
que no precisam atualmente dele, apenas para alcanar um componente filho do filho do filho,
etc? Se aquele n folha aceitar entradas do usurio, como alertar o componente filho do filho do
filho dessa mudana?
Em grandes aplicaes, isso pode ser frustrante. Mesmo em um exemplo simples como o anterior,
como o boto Run comunica a ao do usurio com o LearningEnvironment? Precisamos passar
sempre chamadas de callback, mas difcil escrever componentes realmente modulares e reusveis
dessa maneira.
A soluo do Codecademy vem sendo gerar adaptadores para comunicao que gerenciam o fluxo
de informaes entre componentes especficos. Ao invs de passar as chamadas de callbacks, os
componentes de alto nvel, como o CodeEditor tambm recebem um Adapter, que fornece uma
interface nica para importantes tarefas de comunicao. Por exemplo, quando o CodeEditor est
presente, o LearningEnvironment gerencia um Adapter, que pode emitir e processar os eventos
relacionados submisso de cdigos.

InfoQ Brasil 31

O conceito principal tirado disso que independentemente de como tratado o fluxo das informaes entre a rvore de componentes, a equipe deve entrar em acordo quanto a uma estratgia coerente.

Integrao
O React fcil de usar, mas precisa de algumas ferramentas para aproveit-lo efetivamente no seu
workflow. Por exemplo, usamos:

Um script que observa mudanas locais em arquivos .jsx e recompilar eles se necessrio;

Um servidor separado de node.js que trata a renderizao no lado do servidor;

As ferramentas do desenvolvedor para auto gerao de novos arquivos de componentes

conforme a necessidade.

Nenhuma delas so muito complicadas. Gulp uma tima escolha para observar os .jsx, mas escrevemos a nossa prpria. Para gerao de novos arquivos de componentes usamos um simples
script bash, que tambm segue nossa conveno de nomes. Se estiver usando um servidor node.js
para renderizar no lado servidor, tenha cuidado; pode ser difcil forar que o require.js pegue as
mudanas no seu cdigo React, ento temos nossos observadores que reiniciam o servidor node
conforme a necessidade.

Por que React?

Quando estvamos revisando o ambiente de aprendizado, tnhamos que determinar quais ferramentas ou frameworks usar; eventualmente escolhemos o React e estamos muito felizes com a escolha. (Mais detalhes sobre como escolhemos um framework JavaScript, ou no, esto nesta apresentao.
Aqui esto alguns aspectos que gostamos no React:
testado para a batalha.
O React usado em produo pelo Facebook e Instagram, ento podemos confiar no seu desempenho e confiabilidade. At agora, ele est servindo muito bem e no temos experimentado qualquer
problema significante.

Componentes fceis de entender

Porque o React trata somente com componentes individuais, que renderizam com base em seu estado interno, fcil de conceituar o que deve acontecer a qualquer momento. Sua aplicao tornase efetivamente uma grande mquina de estados. Isso significa que podemos testar partes individuais da UI de forma isolada, bem como adicionar novos componentes sem se preocupar com interferncias no restante da aplicao.

SEO Facilitado
Como o React foi construdo para suportar a renderizao no lado servidor, podemos servir pginas
praticamente completas para mecanismos de buscas, que um grande impulso para o SEO com
muito pouco esforo necessrio. Sabendo que somente funciona no Node; j que a aplicao principal do Codecademy escrita em Rails executando um servidor Node separado que apenas trata
a renderizao do React.

32 eMag: HTML5 & JavaScript

Compatibilidade com o legado e flexibilidade

Enquanto a adoo de um framework inteiro um grande compromisso, possvel experimentar
calmamente a adio do React com o cdigo base j existente. Do mesmo modo, se for necessrio
podemos remover o React no futuro com bastante facilidade. No Codecademy, decidimos escrever
um novo projeto inteiro no React, para testar e aprender quais as melhores formas de aproveit-lo;
isso funcionou muito bem e agora usamos para todos os novos elementos de UI. Recomendamos
se aprofundar e construir alguns experimentos e ento considerar como o React pode ser integrado em seu cdigo j existente.

Menos cdigo repetitivo

Menos tempo escrevendo cdigos repetitivos significa mais tempo resolvendo problemas interessantes. Dessa perspectiva, o React conciso e leve. Aqui est o cdigo mnimo necessrio para criar
um novo componente:
var dummyComponent = React.createClass({
render: function() {
return (<div>HTML markup in JS, what fun!</div>);
}
});

Curto e direto ao ponto. O que no h para gostar?

Comunidade forte
O React conta com uma comunidade que est crescendo rapidamente. Quando encontramos problemas, h muitas pessoas para discutir. E porque muitas empresas grandes esto usando o React
em produo: Facebook, Instagram, Yahoo!, Github e Netflix, so alguns nomes.

Concluses
O React uma biblioteca leve, poderosa e testada para construir interfaces de usurios com JavaScript. No um framework completo mas sim uma ferramenta que pode mudar a maneira que
abordamos o desenvolvimento front-end. Vimos que pode ser uma ferramenta muito til para o
desenvolvimento front-end. Para comear a usar o React, o tutorial o lugar mais indicado. H
tambm diversas postagens abordando conceitos do React (como nesses slides). Construa algo e
descubra sua opinio!

Sobre a autora
Bonnie Eisenman engenheira de software da codecademy.com. Graduada recentemente em Cincia da Computao em Princeton, tambm tem um pouco
de conhecimento em hardware e adora trabalhar com Arduinos e programao
musical em seu tempo livre. Encontre em @brindelle no Twitter.

InfoQ Brasil 33

Caminhando para uma web independente de

resoluo com SVG
por Angelos Chaidas, traduzido por Rafael Sakurai

Esse artigo examina as vantagens de SVG para arquivos grficos em projetos web ou mobile
Veremos as vantagens de usar Scalable Vector Graphics (SVG) como formato preferido para arquivos grficos de qualquer projeto web ou mobile. O objetivo no impedir os designers e desenvolvedores de usar outros formatos (PNG / JPEG), mas sim demonstrar como o uso do SVG pode
melhorar o fluxo de trabalho dos dois principais ciclos de vida de qualquer projeto web: as etapas
de design e desenvolvimento.

Designers
Vamos comear investigando o lado do designer.

Ideal para cones independente de resoluo

Ao escrever este artigo, j era inevitvel a discusso de "Achatamento do Design". A Microsoft aplicou sua abordagem de design moderno para todos os seus softwares e todas as interfaces de usurio
para dispositivos mveis. Com o iOS 7, a Apple tem substitudo os seus princpios de aparncia e
formato, em favor das boas prticas de design limpo e plano. Tambm no deve ser deixado para trs
o lanamento do Google da sua linguagem visual "Material Design", que pode ser usado em qualquer lugar, desde aplicativos Android at sites web.

Figura 1: Achatamento dos cones no iOS e Windows. O "achatamento do design": aparncia e formato com efeitos de
gua, sombras e pseudo-3D esto voltando para as formas simples.

Com os fundos dos componentes que simulam 3D voltando s cores primitivas e os botes esculpidos voltando a ser planos (ambas as abordagens podem ser implementadas com elementos
HTML e estilizados com CSS) o foco do design de interface de usurios est caminhando para tipografia, layouts e cones.

34 eMag: HTML5 & JavaScript

A principal vantagem do SVG bem divulgada em toda a web sua natureza escalvel. Durante
a montagem de um cone, o designer no precisa se preocupar sobre como vai aparecer em diferentes dimenses ou em dispositivos mveis com diferentes densidades de pixels. Pode se concentrar apenas em implementar o recurso da melhor forma possvel.
Com SVG no h necessidade de exportar dois diferentes formatos de arquivos com base em pixels
para exibir em modo retina e no retina. Na verdade, no h necessidade de se preocupar com a
densidade de pixels em cada dispositivo, especialmente levando em conta a sua natureza no padronizada. Pode-se manter o foco no trabalho artstico. Uma vez que o cone est pronto, o designer
exporta para um nico arquivo no formato SVG, que pode ser redimensionado pelo desenvolvedor
sem perda de qualidade.

Figura 2: Fluxo de trabalho com PNG e SVG. Temos um passo a menos no fluxo de trabalho do designer, que no precisa
exportar um recurso para uma verso @2x (ou @3x no futuro). O recurso em SVG pode ser redimensionado pelo desenvolvedor sem perda de qualidade.

Redimensionamento melhorado mesmo em pequenas dimenses

Eis um desafio comum de design para o designer cuidadoso: dentro no Photoshop um cone parece
bonito para dimenso de 44x44 pixels (amigvel ao touch), mas ao diminuir para 24x24 ou 16x16, a
interpolao bicbica traz serrilhamento, que pode borrar a imagem. Mesmo com algoritmos inteligentes como a interpolao bicbica "sharp" disponvel nas ltimas verses do Photoshop, muitos
desenvolvedores terminam desenhando do zero as imagens dos menores arquivos (interface de
cones, favicons etc.) para obter clareza.
Com SVGs, esse cenrio melhorado pois navegadores redimensionam (e rasterizam) os arquivos
SVG muito bem. Isso especialmente verdade para telas de alta densidade, tal como as ltimas
geraes de dispositivos mveis.

InfoQ Brasil 35

Figura 3: Tratamento de imagens com Photoshop.

Os navegadores esto redimensionando cada vez melhor. Em alguns casos, o navegador faz o redimensionamento com aparncia melhor que os mtodos avanados de interpolao do Photoshop.
Para obter resultados bons nessas dimenses, um designer pode facilmente "empacotar" todos os
arquivos SVG como uma fonte de cones (veja mais detalhes a seguir). Isso influncia a capacidade
de destaque do subpixel em diversas operaes do sistema, resultando em cones de tamanhos
como 12, 14 ou 16 pixels claros como cristal e com contornos ntidos mesmo em antigos navegadores IE.

Elementos SVG podem ser alterados manualmente

Otimizar uma imagem JPEG um processo sem volta, em que reduzimos a qualidade tentando
no perder muita informao. Para itens PNG e GIF, o designer possui um pouco mais de controle
atravs da habilidade para especificar uma paleta de restries e tambm reduzir as informaes
de encode no arquivo.
Com o SVG, o designer meticuloso pode optar por usar formas primitivas, reduzindo o nmero de
vrtices em elementos de formas, bem como ter textos embutidos no SVG, ao invs de convertidos
para esboos. Isso pode resultar em um arquivo SVG menos complexo e com tamanho reduzido.

Figura 4: O "Simplify" do Illustrator em ao. As vrtices que marcam um caminho vetorial podem ser reduzidos com
perdas mnimas de preciso, obtendo um arquivo SVG de menor tamanho.

Para ainda mais otimizaes, propriedades do SVG como comentrios, ids ou tags (<g>) de agrupamento redundantes podem ser removidas via edio direta do cdigo SVG.

36 eMag: HTML5 & JavaScript

Ferramentas de cdigo aberto

Como alternativa ao Photoshop (e talvez Fireworks e Sketch), o mundo do cdigo aberto oferece o
editor Gimp. O Gimp uma ferramenta valiosa com uma comunidade animada, mesmo quando
comparado com as ferramentas proprietrias. Mas ainda inferior em algumas reas. Substituir o
Photoshop pelo Gimp no uma tarefa simples e geralmente resulta em um fluxo de trabalho mais
complexo.
Para arte vetorial tambm temos o Inkscape, uma alternativa profissional de cdigo aberto ao Illustrator da Adobe. Permite que os designers criem e editem vetores com mltiplos recursos e ferramentas, de forma similar aos usados nas ferramentas oferecidas pela Adobe. Muitas das aes de
"dia a dia" com vetores podem ser feitos bem no Inkscape, como operaes booleanas que combinam formas, simplificao de caminhos, compensao de caminhos dinmicos, edio de subcaminhos e muito mais.

Desenvolvedores
Nas prximas sees, vamos explorar o lado do desenvolvedor.

Independncia de resoluo e reusabilidade

Para exposio de altas densidades como telas de retina e dispositivos mveis, a necessidade de
arquivos de alta resoluo "@2x" se vo. Com as metatags apropriadas e com as dimenses dos
arquivos especificados em arquivos CSS, um desenvolvedor pode ter controle completo quando
for redimensionar os arquivos, sem a necessidade solicitar para o designer as variaes do mesmo
arquivo.
H alguns fatos emocionantes em ter um nico arquivo, tal como: company-logo.svg, pois pode
ser usado em vrios locais da interface de usurio, com as dimenses sendo controladas pelo CSS
ou por atributos de width e height, e como resultado a mesma aparncia limpa como cristal independente de como ser escalado (ou rotacionado).

Animao
A animao de SVGs com CSS3 mantm a nitidez e clareza ao longo de toda durao da animao.
Alguns exemplos so apresentados a seguir, mas note que a baixa quantidade de frames da animaes gif no justifica a acelerao suave da GPU na finalizao dos efeitos.

Figura 5: Animaes com CSS3 do site Adzuna. (Para ver uma demonstrao ao vivo, visite a pgina da

www.adzuna.co.uk e mantenha o foco nos campos de textos ou clique em nos links "more" da lista de botes.)
Mas isso apenas o inicio. A sintaxe XML estruturada do SVG permite que um desenvolvedor
possa programaticamente selecionar e animar elementos individuais de um arquivo SVG para criar
scripts de animaes, banners, propagandas, etc. O CSS-Tricks tem um excelente tutorial passo a

InfoQ Brasil 37

passo para criar um banner animado no formato SVG e mostra como quando colocado em linha
os elementos individuais de uma imagem SVG podem ser manipulados com CSS para seguir um
determinado script, resultando em um banner animado similar aos que so usados na web com o
Flash da Adobe que j foi um padro da indstria para propagandas animadas.

Interatividade
O potencial do SVG de substituir o Flash da Adobe no para com as animaes. O contedo do
SVG pode ser interativo, com eventos como: click, mousedown, mouseup (e alguns outros interessantes como SVGZoom / SVGResize) disponveis para que o desenvolvedor programaticamente
interaja usando JavaScript.
Isso abre uma lista de possibilidades como infogrficos interativos e solues grfica para empresas.
Indo alm, o desenvolvedor pode usar bibliotecas auxiliares que facilitam o desenho, manipulao
e interatividade, algumas sugestes so: RaphaelJS, D3.js e Snap.svg. Com bibliotecas como essas,
animao complexas e apresentaes iterativas que previamente eram feitas apenas em Flash agora
so possveis, com diversos de exemplos disponveis para inspirao, como: a estrutura de rvore
customizada do NY Times para analise poltica das campanhas do Obama e Romney, Grficos hamiltoniano, Grficos orientado por potncia, Mapas com zoom interativos do Censo Argentino de 20012010 e diversos outros.

Uso em linha (inline)

Voltando aos detalhes da implementao. As duas abordagens padres para usar os arquivos de
imagens em projetos web so realizados pela tag <img> e como imagem de background em elementos (geralmente a nvel de blocos). Como o SVG um XML, uma terceira possibilidade disponvel para o desenvolvedor o uso em linha (inline).

Figura 6: Cdigo fonte do SVG. O cdigo SVG pode ser colocado diretamente no HTML. Os navegadores antigos simplesmente ignoram ele, os navegadores recentes iro renderizar como um recurso vetorial. Os arquivos agora so "alcanveis" pelo CSS (#wa_i) e no Javascript (document.getElementById(wa_i)).

Com o HTML5, o elemento <svg> pode ser colocado diretamente no cdigo HTML das pginas. O
beneficio aqui que o elemento <svg> bem como qualquer elemento filho pode ser controlado pelo
CSS.
38 eMag: HTML5 & JavaScript

Independentemente do tamanho e posio, cores de preenchimento e trao tambm podem ser

manipulados, e mesmo animados. Alm disso, certos atributos somente do SVG (tal como: strokedasharray e stroke-dashoffset) podem ser manipulados a partir de um arquivo CSS resultando em
diversas possibilidades interessantes para animaes como os efeitos de animaes de linhas.

Mais formas de sprites

Com diversos arquivos, uma abordagem de otimizao clssica a reduo de requisies HTTP
combinando diversas imagens em um simples "sprite" (geralmente um PNG) e usa as propriedades
de background do CSS para estilizar diversos elementos HTML com o mesmo sprite.
Com os arquivos SVG, duas possibilidades extras que so interessantes agora esto disponveis aos
desenvolvedores:

Abordagem de sprite clssica: Um recurso SVG com dimenses fixadas pode conter mltiplos sub elementos, colocados em coordenadas especificas. O desenvolvedor usa os arquivos como imagens de background e reposiciona para apresent-los conforme a necessidade.

Abordagem de agrupamento em linha: Com a abordagem em linha, a habilidade para controlar e apresentar os sub elementos como CSS permite que o desenvolvedor possa criar um
SVG como um "conjunto" de arquivos, no qual cada grupo tem um elemento tal como um
cone. Os IDs podem ser atribudos para grupos individualmente e pode mudar as propriedades de apresentao de cada grupo, os desenvolvedores escolhem o que ocultar e o que
apresentar. Essa tcnica funciona muito bem com elementos de interface que tem as mesmas
dimenses, tal como os cones da interface de usurio.

Empacotamento como fonte de cone: Os desenvolvedores tambm tem a opo de "empacotar" diversos arquivos SVGs juntos em uma fonte de cone. O suporte dos navegadores
excelente (mesmo no IE6) e os mecanismos de subpixels dos navegadores modernos fazem
com que mesmo os menores tamanhos fiquem constantes e limpos como cristal. Mesmo nos
melhores, h mltiplos cones online de geradores de fontes disponveis que simplificam o
processo de empacotamento.

Comparando a verso dos mesmos arquivos

O formato SVG, por sua virtude de ser essencialmente um arquivo texto, presenteia o desenvolvedor com a interessante possibilidade de no apenas comparar os arquivos visualmente, mas tambm verifica as diferenas dos arquivos, assim conhecendo quais partes do SVG foram modificados.
No caso de arquivos SVG grandes e complexos, tal como: infogrficos, a comparao de teste
tima para entender quais partes do recurso foram modificadas na nova verso.

Fontes para aprendizado

Para os desenvolvedores, recomendo o Compedium of SVG Information de Chris Coyers. uma
grande lista de links para arquivos SVG divididos em sees lgicas o resumo timo um ponto
inicial para qualquer pessoa interessada em SVG.
Para designers, a apresentao "Leaving Pixels Behind" de Todd Parkers a melhor introduo possvel, cheio de GIFs animados apresentando o fluxo de trabalho com SVG no Illustrator.

InfoQ Brasil 39

Suporte a antigos navegadores

No momento da escrita desse artigo, o Internet Explorer 8 ainda precisa ser tratado pelos desenvolvedores. Quando essa necessidade combinada com o fato dos navegadores Android pre-v3
que no suportam SVG, uma soluo alternativa precisa ser implementada.
Para os desenvolvedores, o Modernizr a ferramenta escolhida. Incluir as bibliotecas do Modernizr
como <script> externo no <head> de qualquer projeto web adicionar as classes apropriadas nos
elementos <html> para dizer para o documento carregar a pgina. Em seguida, necessrio adicionar algumas definies extras aos estilos CSS que atualizam as imagens SVG em background com
formatos antigos, ou mesmo no caso dos SVGs em linha ou colocados em tags <img>, assim usando
tags "auxiliares" que contm solues alternativas e que so ocultadas por padro.
O desafio aqui no ter que pedir para o designer ter que exportar outros formatos de recurso uma
vez que esses navegadores invalidam essa opo de exportar apenas um recurso SVG.
Felizmente, as ferramentas de automatizao como o Grunt e especificamente os Grunticon do Filament Group esto aqui para ajudar. Em resumo, o Grunticon recebe como entrada as pastas de
arquivos SVG e como sada tem uma lista de arquivos PNG junto com arquivos CSS que referenciam essas imagens PNG. Para os gurus da linha de comando, o Inkscape pode ser usado atravs do
shell script para tambm converter os arquivos SVG para qualquer formato.

Concluses
As vantagens de usar vetores na web so muito maiores que as desvantagens. Com suporte excelente dos navegadores e solues automatizadas para funcionar nos navegadores antigos. Acredito
que o futuro da UI com vetores grficos independentes de resoluo a melhor alternativa.

Sobre o autor
Angelos Chaidas trabalha como desenvolvedor front-end snior na Adzuna,
uma engine de pesquisa de vagas de emprego internacional. Comeou sua carreira em 2000 como designer e desenvolvedor PHP, mas focou em desenvolvimento front-end e JavaScript nos ltimos oito anos. Adora design de UI e UX de
aplicativos mveis; apaixonado por otimizao web e palestra em eventos locais sobre JavaScript. Pode ser encontrado no Twitter como @chaidas.

40 eMag: HTML5 & JavaScript