Construindo aplicações web com Yeoman e Polymer

Construir aplicações web modernas requer muita configuração e um uso demasiadamente excessivo de ferramentas e frameworks. Isso inclui pré-processadores, frameworks JavaScript das mais diversas formas e finalidades, ferramentas de teste e muito mais. E, à medida que a complexidade desses aplicativos cresce, enorme é também a amplitude de ferramentas e serviços necessários para gerenciá-los.

Além disso, quando falamos sobre manutenção de aplicações desse estilo, temos inúmeros profissionais envolvidos, processos mal estabelecidos e gerenciados, sem falar no código que vai se tornando cada vez maior, cheio de integrações, dependências e acoplamentos. Para ter uma ideia de como tudo isso funciona na prática, analisemos a Figura 1 que traz basicamente a representação final (HTML) do conteúdo de páginas em aplicações famosas como Google Gmail, Facebook e Amazon.

abrir imagem em nova janela

Figura 1. Conteúdo HTML das páginas do Gmail, Facebook e Amazon, respectivamente.

Perceba que logo de cara temos bastante conteúdo, e todo ele particionado em div’s e span’s, o que nos leva a questionar se essa estrutura característica realmente se faz tão necessária. Isso provavelmente também o levará a pensar como será toda a manutenção desse tipo de código dentro do projeto nessas empresas, e se as mesmas mantêm alguma estrutura de automatização ou usam frameworks para facilitar esse gerenciamento.

Muito tem sido discutido acerca dos valores semânticos que as tags da HTML5 trouxeram às nossas aplicações contemporâneas (e que também visavam a diminuição significativa de código HTML nas páginas), porém elas ainda estão longe de proporcionar uma “margem de lucro programática” significativa, principalmente por duas razões, a saber:

• Quando temos dois componentes muito similares em nossa página web que caem dentro da mesma estrutura semântica, para distingui-los um do outro, nós usamos classes, ids, ou outros atributos;

• A lista disponível de tags semânticas é simplesmente insuficiente para atingir a grande variedade de componentes que constituem nosso design. Como resultado, nós voltamos novamente para as tags tradicionais como div, span, etc.

A W3C pretende ir de encontro a esse problema ao introduzir o conceito de componentização web. Os componentes web são nada mais que uma coleção de especificações que possibilitam que desenvolvedores criem suas próprias aplicações web como um conjunto de componentes reusáveis. Através disso, eles proveem uma mudança de paradigma em relação à abordagem tradicional ao mudar fundamentalmente a forma como construímos e concebemos as aplicações web.

Cada componente vive em sua autodefinida unidade de encapsulamento com estilo e lógica correspondentes. Estes mesmos componentes não só podem ser compartilhados via aplicação web comum, como também distribuídos na web para uso de outrem. Basicamente, eles são constituídos de quatro especificações:

• Elementos customizados: Permitem que desenvolvedores criem seus próprios elementos (que são relevantes para o design) como parte da estrutura DOM com a habilidade de estilizar/impor scripts a eles como qualquer outra tag HTML.

• Templates HTML: Define fragmentos de marcação que permanecem consistentes sobre as páginas web com a habilidade de injetar conteúdo dinâmico usando somente JavaScript.

• Shadow DOM: Designado para abstrair todas as complexidades da marcação de tags através da definição de limites funcionais entre a árvore DOM e as sub-árvores escondidas atrás de uma shadow raiz.

• Importação de HTML: Similar à importação de arquivos CSS dentro deles mesmos, permite que você inclua e reuse documentos HTML em outros documentos HTML.

Resumindo, os componentes web conseguem resolver todos os principais problemas de complexidade na forma como criamos novos elementos que incutem funcionalidades ricas sem a necessidade de bibliotecas externas.

Existem vários frameworks e empresas que já lidam com esse conceito na prática. O Polymer.js foi criado pelo Google e, por intermédio dele, nós podemos usar todos estes recursos de forma integrada em um só lugar, com excelente suporte da empresa e comunidade, e totalmente adaptado aos browsers modernos.

Um outro problema recorrente nesse universo de desenvolvimento front-end se refere à forma como integramos as coisas, isto é, como podemos gerenciar todas essas ferramentas, componentes web, frameworks, HTML, etc. em um só lugar, de forma fácil, rápida e segura? A resposta é Yeoman. O Yeoman funciona como uma coleção composta por três ferramentas principais: Yo, Grunt e Bower. Combinados, estes três projetos fornecem tudo que você pode precisar em um projeto desse tipo.

Neste artigo, faremos uso dos referidos frameworks para entender como criar aplicações web de forma mais fácil e produtiva. Construiremos uma aplicação de blog na web para que o leitor entenda como as ferramentas atuam em conjunto, bem como funcionam os processos de configuração, instalação e adaptação das mesmas aos diferentes ambientes de software.

O que é o Yeoman?

O Yeoman por si só, nada mais é do que um empacotamento de três projetos distintos, cada um com um objetivo pré-definido:

• Yo: É uma ferramenta que é usada para automatizar o seu build e gerenciar dependências no seu projeto front-end. Ela pode criar ativos de projeto comuns, como folhas de estilo e arquivos JavaScript. Basicamente, o Yo fornece uma maneira de pré-criar todo o código clichê que você precisa para começar um projeto.

• Grunt: O Grunt é um executor de tarefas que pode automatizar coisas como a compilação dos arquivos Sass ou a otimização de imagens. Quando usado como parte do pacote do Yeoman, o Grunt lida com a construção, testes e pré-visualização do seu projeto.

• Bower: É um gerenciador de pacotes para a web. Ele ajuda a gerenciar as dependê ...