Polymer.js: O Futuro do Desenvolvimento de Aplicativos Web?

Cerca de um ano atrás, em maio de 2013, o Google lançou o Polymer.js.

Então aqui estamos, um ano depois. E a pergunta é: ainda está pronto para o horário nobre? Ainda é possível criar um aplicativo pronto para produção usando técnicas de desenvolvimento web Polymer?

Para responder a essa pergunta, levei o Polymer para um test drive para desenvolver um aplicativo da Web e ver como ele se comportaria. Este artigo é sobre essa experiência e o que aprendi no processo.

Polymer.js: o conceito

Antes de entrarmos em nosso tutorial do Polymer, vamos primeiro definir o Polymer.js, não pelo que ele afirma ser, mas pelo que ele realmente é.

Quando você começa a conferir o Polymer, você não pode deixar de ficar imediatamente intrigado com sua visão de mundo única e autodeclarada. O Polymer se propõe a adotar uma espécie de abordagem de volta à natureza que “coloca os elementos de volta no centro do desenvolvimento da web”. Com o Polymer.js, você pode criar seus próprios elementos HTML e compô-los em aplicativos da Web completos e complexos que são escaláveis ​​e de fácil manutenção. Trata-se de criar novos elementos (ou seja, personalizados) que podem ser reutilizados em suas páginas HTML de forma declarativa, sem a necessidade de conhecer ou entender seus internos.

Elementos, afinal, são os blocos de construção da web. Assim, o weltanschauung da Polymer é que o desenvolvimento web deve fundamentalmente ser baseado na extensão do paradigma de elementos existente para construir componentes web mais poderosos, ao invés de substituir marcação por “peças de script” (para usar suas palavras). Dito de outra forma, a Polymer acredita em alavancar as tecnologias “nativas” do navegador em vez de depender de um labirinto cada vez mais complexo de bibliotecas JavaScript personalizadas (jQuery et. al.). Uma noção intrigante, de fato.

OK, então essa é a teoria. Agora vamos dar uma olhada na realidade.

Desenvolvimento Web em Polímero: A Realidade

Embora a abordagem filosófica de Polymer certamente tenha mérito, infelizmente é uma ideia que (pelo menos até certo ponto) está à frente de seu tempo.

O Polymer.js coloca um conjunto robusto de requisitos no navegador, contando com uma série de tecnologias que ainda estão em processo de padronização (pelo W3C) e ainda não estão presentes nos navegadores atuais. Os exemplos incluem o shadow dom, elementos de modelo, elementos personalizados, importações de HTML, observadores de mutação, visualizações orientadas por modelo, eventos de ponteiro e animações da web. Essas são tecnologias maravilhosas, mas pelo menos até agora, que ainda estão por vir para os navegadores modernos.

A estratégia do Polymer é fazer com que os desenvolvedores front-end aproveitem essas tecnologias de ponta, ainda por vir, baseadas em navegador, que estão atualmente em processo de padronização (pelo W3C), à medida que se tornam disponíveis. Enquanto isso, para preencher a lacuna, a Polymer sugere o uso de polyfills (código JavaScript para download que fornece recursos que ainda não foram incorporados aos navegadores atuais). Os polyfills recomendados são projetados de tal forma que (pelo menos teoricamente) serão fáceis de substituir quando as versões nativas desses recursos do navegador estiverem disponíveis.

Tudo bem. Mas deixe-me ver se entendi. Pelo menos por enquanto, vamos usar bibliotecas JavaScript (ou seja, polyfills) para evitar o uso de bibliotecas JavaScript? Bem, isso é “fascinante”.

O resultado final, então, é que estamos em uma espécie de limbo com o Polymer, pois ele está confiando em (ou talvez mais precisamente, aproximando) tecnologias de navegador que ainda não existem. Assim, o Polymer.js hoje parece mais um estudo sobre como os aplicativos centrados em elementos podem ser construídos no futuro (ou seja, quando todos os recursos necessários forem implementados nos principais navegadores e os polyfills não forem mais necessários). Mas, pelo menos no momento, o Polymer parece mais um conceito intrigante do que uma opção real para criar aplicativos robustos para mudar sua visão do mundo aqui e agora, o que torna difícil escrever (ou encontrar) um tutorial do Polymer fora da documentação do Google.

Arquitetura de Polímeros

Agora, para o nosso guia. Polymer.js é dividido arquitetonicamente em quatro camadas:

Nativo: recursos necessários atualmente disponíveis nativamente em todos os principais navegadores. Fundação: Polyfills que implementam recursos de navegador necessários ainda não disponíveis nativamente nos próprios navegadores. (A intenção é que essa camada desapareça com o tempo à medida que os recursos que ela fornece se tornam disponíveis nativamente no navegador.). Core: A infraestrutura necessária para que os elementos Polymer explorem os recursos fornecidos pelas camadas Native e Foundation. Elementos: Um conjunto básico de elementos, destinado a servir como blocos de construção que podem ajudá-lo a criar seu aplicativo. Inclui elementos que fornecem: Funcionalidade básica como ajax, animação, layout flexível e gestos. Encapsulamento de APIs de navegador complicadas e layouts CSS. Renderizadores de componentes de interface do usuário, como acordeões, cartões e barras laterais.

Criando um aplicativo de polímero

Para começar, existem alguns artigos e tutoriais que ajudam a apresentar o Polymer, seus conceitos e sua estrutura. Mas se você for como eu, quando tiver passado por eles e estiver pronto para realmente construir seu aplicativo, perceberá rapidamente que não tem certeza por onde começar ou como criá-lo. Já que passei pelo processo e descobri, aqui estão algumas dicas…

O desenvolvimento da web em polímero é sobre a criação de elementos e é apenas sobre a criação de elementos. Assim, consistente com a visão de mundo do Polymer, nossa aplicação será… um novo elemento. Nada mais e nada menos. Ah ok, entendi. Então é aí que começamos.

Para nosso exemplo de projeto Polymer, nomearei o elemento de nível superior do aplicativo , já que os nomes de elementos personalizados (independentemente de qual estrutura você usa para criá-los) devem incluir um hífen (por exemplo, x-tags, elementos de polímero, etc.).

O próximo passo, porém, requer um pouco mais de reflexão. Precisamos decidir como vamos componentizar nossa aplicação. Uma abordagem fácil é tentar identificar, de uma perspectiva visual, os componentes em nosso aplicativo e, em seguida, tentar criá-los como elementos personalizados no Polymer.

Então, por exemplo, imagine que temos um aplicativo com as seguintes telas:

Podemos identificar que a barra superior e o menu da barra lateral não serão alterados e o “conteúdo” real do aplicativo poderá carregar diferentes “visualizações”.

Sendo esse o caso, uma abordagem razoável seria criar o elemento para nosso aplicativo e, dentro desse elemento, poderíamos usar alguns elementos de interface do usuário do Polymer para criar a barra superior e o menu da barra lateral.

Podemos então criar nossas duas visualizações principais, que chamaremos de ListView e SingleView, para serem carregadas na área de “conteúdo”. Para os itens no ListView, podemos criar um ItemView.

Isso resultará em uma estrutura mais ou menos assim:

As boas notícias

Agora que temos nosso exemplo de aplicação Polymer, podemos inseri-lo em qualquer página da web apenas importando nosso “toptal-app.html” e adicionando a tag porque, afinal, nosso aplicativo é apenas um elemento. Isso é legal.

De fato, é nisso que reside muito do poder e da beleza do paradigma do Polímero. Os elementos personalizados que você cria para seu aplicativo (incluindo o de nível superior para todo o seu aplicativo) são tratados como qualquer outro elemento em uma página da web. Você pode, portanto, acessar suas propriedades e métodos de qualquer outro código ou biblioteca JavaScript (por exemplo, Backbone.js, Angular.js, etc.). Você pode até usar essas bibliotecas para criar seus próprios novos elementos.

Além disso, seus componentes personalizados são compatíveis com outras bibliotecas de elementos personalizados (como a X-Tag da Mozilla). Portanto, não importa o que você usa para criar seu próprio elemento personalizado, ele é compatível com o Polymer e qualquer outra tecnologia de navegador.

Portanto, não é surpreendente que já tenhamos começado a ver o advento de uma comunidade de criadores de elementos que expõem e compartilham seus elementos recém-criados em fóruns como o site Custom Elements. Você pode ir lá e pegar qualquer componente que precisar e apenas usá-lo em seu aplicativo.

Por outro lado…

O Polymer ainda é uma tecnologia suficientemente nova que os desenvolvedores, especialmente os desenvolvedores de aplicativos iniciantes, provavelmente acharão um pouco frágil, com várias arestas não tão difíceis de encontrar.

Aqui está uma amostra:

• Falta de documentação e orientação.
  • Nem todos os elementos de IU e não IU do Polymer.js são documentados. Às vezes, a única “orientação” sobre como usá-los é o código de demonstração. Em alguns casos, é até necessário consultar o código fonte de um Polymer Element para entender melhor como ele funciona e pode/deve ser usado.
  • Não está totalmente claro como organizar aplicativos maiores. Em particular, como você deve passar objetos singleton entre elementos? Qual estratégia você deve empregar para testar seus elementos personalizados? A orientação sobre esses tipos de questões neste momento é escassa na melhor das hipóteses.

• Erros de dependência e versão-itis. Mesmo ao baixar elementos Polymer.js conforme recomendado, você pode encontrar um erro de dependência, apontando para diferentes dependências de versão no mesmo elemento. Embora seja entendido que os elementos poliméricos estão atualmente em desenvolvimento pesado, esses tipos de problemas podem tornar o desenvolvimento bastante desafiador, corroendo a confiança e o interesse do desenvolvedor.

• Problemas em plataformas móveis. O desempenho do Polymer.js em plataformas móveis geralmente pode estar entre frustrante e problemático.
  • O download de toda a biblioteca e polyfills (sem gzip'ing) é lento e você precisa baixar todos os Polymer Elements que pretende usar.
  • O processamento de polyfills, bibliotecas e elementos personalizados parece ser uma tarefa cara em plataformas móveis. Mesmo quando o download estiver concluído, você ainda terá uma tela em branco por alguns segundos.
  • Especialmente para funcionalidades mais complexas (como arrastar e soltar ou renderizar em uma tela), você pode descobrir que a funcionalidade que funciona bem na área de trabalho simplesmente não funciona corretamente ou ainda não é suportada na plataforma móvel. No meu caso particular, uma dessas frustrações que encontrei foi com a renderização em uma tela no iOS.
• Relatórios de erros inadequados ou confusos. Às vezes, quando você digita incorretamente um nome de atributo ou apenas interrompe algo relacionado à própria camada principal, você recebe uma mensagem de erro estranha em seu console com duas pilhas de chamadas que você precisa investigar para tentar determinar onde está o problema. Às vezes é fácil resolver isso, mas às vezes você acaba precisando tentar uma estratégia completamente diferente apenas para evitar o erro, já que não consegue rastrear sua fonte.

Conclusão

O polímero é uma tecnologia intrigante, mas inegavelmente ainda está em sua infância. Como tal, ainda não é adequado para o desenvolvimento de um aplicativo grande, de nível empresarial e pronto para produção. Além disso, não há muitos guias ou tutoriais disponíveis específicos para o desenvolvimento da Web do Polymer.js.

Quanto ao fato de a abordagem centrada em JavaScript ou centrada em DOM ser realmente fundamentalmente melhor, o júri ainda está fora. Polymer apresenta alguns argumentos convincentes, mas existem contra-argumentos.

Talvez mais notavelmente, o Polymer requer um nível bastante significativo de experiência no uso de tecnologias de navegador como o DOM. Você está voltando aos dias anteriores ao jQuery, aprendendo a API DOM para fazer tarefas simples como adicionar ou remover uma classe CSS de um elemento. Isso certamente faz parecer, pelo menos em algum nível, que você está dando um passo para trás em vez de para frente.

Mas dito isso, parece provável que os elementos personalizados serão uma parte importante do desenvolvimento da Web no futuro, portanto, mergulhar mais cedo ou mais tarde provavelmente seria prudente para o desenvolvedor da Web de hoje. E se você nunca tentou criar seus próprios elementos personalizados antes, Polymer (e este tutorial) é provavelmente um lugar sensato para começar.