Chrome Dev Summit 2014 - Vamos criar alguns apps com o Polymer

No ano passado, a equipe da Polymer passou muito tempo ensinando os desenvolvedores a criar os próprios elementos. Isso levou a um ecossistema de rápido crescimento, impulsionado em grande parte pelos elementos Core e Paper da Polymer e pelos elementos Brick criados pela equipe do Mozilla.

À medida que os desenvolvedores se familiarizam com a criação de seus próprios elementos e começam a pensar em criar aplicativos, isso se abre para uma série de perguntas:

  • Como você deve estruturar a IU do seu aplicativo?
  • Como fazer a transição entre estados diferentes?
  • Quais são algumas estratégias para melhorar a performance?
  • E como você pode oferecer uma experiência off-line?

Na Conferência de Desenvolvedores do Chrome, tentei responder a essas perguntas criando um pequeno aplicativo de contatos e analisando o processo de desenvolvimento. Aqui está o que eu pensei:

Estrutura

Dividir um aplicativo em partes modulares que podem ser combinadas e reutilizadas é um locatário central do Web Components. Os elementos básicos* e de papel* do Polymer facilitam o uso de partes pequenas, como barra de ferramentas de papel e botão de ícone de papel.

A Polymer ajuda desenvolvedores a criar aplicativos com mais rapidez

E com o poder da composição, combine-os com qualquer número de elementos para criar um scaffolding de aplicativo.

O polímero deixa os componentes da Web mais agradáveis

Depois de ter um scaffolding genérico, você pode aplicar seus próprios estilos CSS para transformá-lo em uma experiência única para sua marca. A beleza de fazer isso com componentes é que eles permitem criar experiências muito diferentes enquanto aproveita os mesmos primitivos de criação de apps. Com um scaffolding pronto, você pode começar a pensar no conteúdo.

Um elemento especialmente adequado para lidar com muito conteúdo é o core-list.

O polímero deixa os componentes da Web mais agradáveis

O core-list pode ser conectado a uma fonte de dados (basicamente, uma matriz de objetos) e, para cada item na matriz, ele remove uma instância de modelo. Com o modelo, você pode aproveitar o poder do sistema de vinculação de dados da Polymer para conectar seu conteúdo rapidamente.

Transições

Com as várias seções do app projetadas e implementadas, a próxima tarefa é descobrir como navegar entre elas.

Embora ainda seja um elemento experimental, core-animated-pages fornece um sistema de animação conectável que pode ser usado para fazer a transição entre diferentes estados no aplicativo.

O relatório do Polymer precisa de melhorias

Mas a animação é apenas metade do quebra-cabeça, um aplicativo precisa combinar essas animações com um roteador para gerenciar os URLs corretamente.

No mundo do Web Components, o roteamento tem dois tipos: imperativo e declarativo. Combinar core-animated-pages com qualquer uma dessas abordagens pode ser válido dependendo das necessidades do projeto.

Um roteador imperativo (como o Flatiron's Director) pode detectar uma rota correspondente e instruir o core-animated-pages a atualizar o item selecionado.

O relatório do Polymer precisa de melhorias

Isso pode ser útil se você precisar fazer algum trabalho depois de um trajeto corresponder e antes da transição da próxima seção.

Por outro lado, um roteador declarativo (como o app-router) pode combinar o roteamento e o core-animated-pages em um único elemento, o que facilita o gerenciamento dos dois.

O card de relatório do Polymer precisa de melhorias.

Se quiser um controle mais refinado, você pode usar uma biblioteca como mais roteamento, que pode ser combinada com core-animated-pages usando vinculação de dados e, possivelmente, fornecer o melhor dos dois mundos.

Desempenho

Conforme seu aplicativo toma forma, é preciso ficar de olho nos gargalos de desempenho, especialmente qualquer coisa associada à rede, já que essa geralmente é a parte mais lenta de um aplicativo da Web para dispositivos móveis.

Um ganho de desempenho fácil vem do carregamento condicional dos polyfills do Web Components.

O relatório do Polymer precisa de melhorias

Não há motivo para incorrer todo esse custo se a plataforma já tiver suporte total. Em cada versão do novo repositório webcomponents.js, os polyfills também foram divididos em arquivos independentes. Isso é útil se você quiser carregar condicionalmente um subconjunto dos polyfills.

<script>
    if ('import' in document.createElement('link')) {
    // HTML Imports are supported
    } else {
    document.write(
        '<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
    );
    }
</script>

Também existem ganhos de rede significativos com a execução de todas as suas importações de HTML por meio de uma ferramenta como o Vulcanize.

O card de relatório do Polymer precisa de melhorias.

O Vulcanize concatena as importações em um único pacote, reduzindo significativamente o número de solicitações HTTP feitas pelo app.

Off-line

Mas apenas criar um aplicativo de alto desempenho não resolve o dilema de um usuário com pouca ou nenhuma conectividade. Em outras palavras, se seu app não funciona off-line, ele não é de fato um app para dispositivos móveis. Hoje é possível usar o cache de aplicativos muito mal alinhado para off-line dos recursos, mas, no futuro, o Service Worker deverá tornar a experiência de desenvolvimento off-line muito melhor.

Jake Archibald publicou recentemente um livro de receitas sobre padrões de service worker (em inglês), mas vou dar o início rápido para você começar:

É muito fácil instalar um service worker. Crie um arquivo worker.js e registre-o quando seu aplicativo for inicializado.

O relatório do Polymer precisa de melhorias

É importante localizar o worker.js na raiz do aplicativo. Isso permite que ele intercepte solicitações de qualquer caminho no app.

No gerenciador de instalação do worker, coloco em cache uma carga de recursos (incluindo os dados que alimentam o aplicativo).

O relatório do Polymer precisa de melhorias

Isso permite que meu app forneça pelo menos uma experiência de substituição para o usuário se ele estiver acessando off-line.

Em frente!

Os componentes da web são uma grande adição à plataforma da web e ainda estão em sua infância. À medida que chegarem a outros navegadores, cabe a nós, a comunidade de desenvolvedores, descobrir as práticas recomendadas para estruturar nossos aplicativos. As soluções acima são um ponto de partida, mas ainda há muito mais a aprender. Rumo à criação de apps melhores.