Desmistificando um futuro chamado Polymer 3
Fala pessoal, hoje vou desmistificar um pouco a história do Polymer Project, tentar tirar algumas dúvidas frequentes, localiza-los na linha do tempo e apresentar um futuro chamado Polymer 3.
Hoje vamos abordar os seguintes assuntos:
- O que é Polymer
- O ecossistema do Polymer
- História: A modinha dos Web Components
- História: Polymer 0.5: Experiments
- História: Polymer 1.0: Ready to production
- História: Polymer 2.0: Do less magic
- O que falta para Web componentes / Polymer emplacar?
- A descontinuação do Bower
- A não implementação de HTML imports nos Browsers
- Apresentação do Polymer 3.0
- Yarn como novo gerenciador de pacotes
- ES Modules como novo sistema de módulos
- Migrando para Polymer 3 automaticamente
Direto ao ponto! O que é Polymer EXATAMENTE?
Para esclarecer de forma rápida e direta o que é Polymer, ninguém melhor do que os membros mais descolados do Polymer Team: Monica Dinculescu e Rob Dodson!
Resumindo: Polymer é uma biblioteca que provê uma API de alto nível para trabalhar com Web components.
Relembrando: Ecossistema rico
O ecossistema do mundo Polymer é gigantesco e vai muito além de ajudá-lo a criar web components, não vou me aprofundar aqui, mais vou deixar alguns exemplos do que existe em torno dessa tecnologia.
Polymer App Toolbox
Uma coleção de componentes, ferramentas e modelos para construir Progressive Web Apps.
Exemplos: Componentes de layout, rotas, internacionalizações, storage, offline, etc..
Polymer CLI
A ferramenta oficial de linha de comando ou “canivete suiço” para projetos baseados em Polymer.
Exemplos: Build pipeline, generator automatizado para elementos e aplicações, linter, servidor de desenvolvimento, test runner, etc…
Web Component Tester
Um ambiente de teste lindo baseado em browsers.
O WCT atualmente é composto por: Mocha, Chai, Async, Lodash, Sinon, test-fixture e accessibility-developer-tools.
Vamos começar a história
Agora que esclarecemos o que é Polymer e vimos um pouco do seu ecossistema, é hora de contar um pouco sua história para entendermos como chegamos ao Polymer 3 e o que motivou toda essa evolução.
A modinha dos Web Components
- Dezembro de 2013
Como muitos brasileiros, fui um dos introduzidos ao mundo dos Web Componentes durante a palestra lendária do @zenorocha na BrazilJS 2013.
Durante a palestra houve uma menção a participação do Google no mundo dos Web components, onde foi citado que eles estavam trabalhando em um cara novo, um cara chamado Polymer.
Nessa época vivemos um Hype, as pessoas andavam pela rua comentando sobre Web Componentes e gritando que esse seria o futuro da Web! Quase todos tinham certeza disso.. era mágico!
Polymer 0.5: Experiments
- Novembro de 2014
Acreditando no poder da plataforma nativa como solução para trabalhar com componentes, o Google investiu cada vez mais em um experimento para auxiliar os desenvolvedores nesse novo mundo, e eis que surge nas paradas de sucesso o Polymer 0.5.
Nessa época o grande Beto Muniz vestiu a camisa e trouxe o conhecimento e o poder do Polymer para terras tupiniquins!
Para entender como era o cenário e quais as propostas do Polymer nessa época, recomendo fortemente ler o artigo Desmistificando o Polymer!
Polymer 1.0: Ready to production
- Maio de 2015
A essa altura, o futuro prometido ainda não tinha chegado, mas o Polymer deu uma passo gigantesco em direção a um futuro cada vez mais baseado na plataforma!
Com a chegada da versão 1.0 muitas empresas começaram a usar Polymer em seus projetos na vida real, foi mais uma vez mágico!
Polymer 2.0: Do less magic
- Maio de 2017
Como você provavelmente sabe, o hype inicial passou, as pessoas já não falavam mais de Web components e o futuro prometido parecia não existir mais.
Na verdade, as especificações de Shadow DOM e Custom Elements não foram bem aceitas e implementadas pelos browsers, apesar do Polymer oferecer soluções (abstrações) para esse problemas, não estávamos de fato usando a plataforma nativa em todo o seu potencial.
Tudo mudou com a chegada das novas especificações de Shadow DOM v1 e Custom Elements v1 que foram muito bem aceitas pelos browsers e reacenderam a chama dos Web comportes novamente.
Com o objetivo de empurrar a plataforma para frente, o Polymer 2.0 foi lançado, bem mais leve, com muito menos abstrações, utilizando mais da plataforma nativa e fazendo bem menos mágicas por trás dos panos.
Para entender melhor toda essa história de Polymer 2.0 e especificações V1, recomendo ler meu outro artigo chamado Polymer 2 e o futuro onde os Web Components dominam a terra.
O que falta para Web componentes / Polymer emplacar?
Mesmo com aos problemas relacionados a Shadow DOM e Custom elements resolvidos, ainda tínhamos alguns problemas para tornar nosso mundo ideal, comentarei brevemente sobre os dois principais.
Primeiro problema: A descontinuação do Bower
Primeiro vamos entender por que o Bower (lá em 2013) foi escolhido para gerenciar os pacotes do mundo Polymer:
- Gerências dependências
- Resolver conflitos de versões
- Trabalha com flat dependencies tree
- Comunidade ativa
Mesmo atendendo a todos os requisitos, como foi descontinuado não fazia sentido mantê-lo como gerenciador de pacotes padrão, nesse ponto o Polymer ficou sem casa :(
Você deve estar se perguntando: “Por que não utilizar NPM?”
NPM foi descartado lá no início do projeto por seu client não atender as necessidades de resolver conflito de versões e Flat Dependency Tree :(
Segundo problema: A não implementação de HTML imports nos Browsers
HTML Imports foi escolhido para ser usando junto ao polymer por três principais razões:
- Solução nativo (baseada na plataforma)
- Suporta deep dependencies
- Roda a nível de arquivo, não dependendo de de um processo de Build.
Porém, HTML imports não foi muito bem aceito e implementado em browsers fora dos muros da Google, o que faz da especificação uma opção não muito viável no mundo real. (sem polyfills ou processos de build)
Polymer 3.0: Welcome to the Javascript ecosystem
Solucionando os problemas citados anteriormente, chegou a hora do anuncio do ano (ao menos para mim rs):
O Polymer 3.0 foi anunciado durante o Polymer Summit 2017, e está disponível para preview e testes HOJE!
Mas o que isso tem de mais?
Yarn
Yarn foi escolhido para substituir o Bower por aproveitar toda a base de pacotes que o NPM oferece, porém atendendo as necessidades de conflito de versões e Flat Dependency Tree muito bem, ou seja, Yarn cai como uma luva no mundo Polymer.
ES Modules
Polymer se trata de usar a plataforma! Umas das melhores coisas relacionadas a plataforma é que ela evolui em todas as áreas incessantemente.
Ao procurar uma solução para trabalhar com módulos que seja nativa e que os Browsers estejam apostando, damos de cara com os ES Modules ou carinhosamente chamados de “Módulos do ES6”.
Polymer 3 vem com a proposta de utilizarmos ESModules no lugar de HTML imports, o que somado ao acesso a pacotes do NPM provido pelo nosso amigo Yarn, tráz uma gama gigantesca de possibilidades!
Sim, podemos usar Polymer para criar Web Components e rodar em seu projeto baseado em Webpack ❤
Tudo isso faz com que o Polymer entre de cabeça no ecossistema do javascript, o que obviamente tráz benefícios para o universo Polymer mas também levanta uma nova pergunta (principalmente para você que vive nesse mundo de React, Angular, Vue, etc…):
O que você pode criar, tendo Web Componentes a apenas um “import” de distância?
Auto converter
Nesse período de transição entra versões surge a pergunta: Escrevo componentes com a versão 2 ou 3 do Polymer?
Simples, como o Polymer 3 ainda está em preview, é recomendado escrever seus componentes com Polymer 2 tranquilamente, principalmente porque já temos uma ferramenta (em preview) para converter tudo automaticamente para a versão 3 sem gerar estresses ❤
Conclusão
Espero ter esclarecido um pouco alguns "porquês" que os hypes deixaram pelo caminho e principalmente ter plantando uma sementinha rosa e azul dentro de você rs.
Vou aproveitar para agradecer ao Zeno Rocha e Beto Muniz por abrirem minha cabeça para esse mundo ❤
Meus links:
- @afonsopacifer (Github)
- @afonsopacifer (Twitter)
- @csscastshow (Youtube)
- @csshortcut (Cursos sobre CSS e Front-End)
- Mais artigos?
Bye bye.
