Por anos os web components tem sido um padrão quase pronto. Com o recente lançamento do web client da Apple Music, a Apple entregou mais de 45 web components para melhorar a experiência do Apple Music. Outros, incluindo a Amazon, Porsche, arm, Panera, e Microsoft, estão aproveitando o Stencil para criar sistemas de design e web componentes cross-framework.
Os web components tem desafios que podem ser superados com uma biblioteca ou ferramenta. Algumas das preocupações mais comuns sobre web components incluem:
- O tamanho do pacote em cada componente pode ser significativo de acordo com o tamanho do pacote do framework, ou pela falta de suporte à imports HTML;
- Controlando como o conteúdo é renderizado;
- Conteúdo flash ou sem estilo CSS e JS;
- Polyfills necessários para browsers antigos Gerenciamento de propriedades e atributos Server-side rendering e melhorias progressivas.
Essas preocupações são mitigadas tirando proveito de ferramentas como o Stencil, um projeto open source iniciado pela equipe do Ionic. Como explicado pelo CEO da Ionic, Max Lynch, o ponto ideal para os web components é diferente do uso contínuos dos frameworks JavaScript:
Qual é o problema em fornecer um modelo de web component nativo? Bem, o maior deles é a capacidade de compartilhar e consumir componentes criados pelo desenvolvedor diretamente no browser, independente da tecnologia da aplicação, e de uma maneira altamente eficaz. Acreditamos que o Stencil para os web components está resolvendo a distribuição de componentes e problemas no design dos sistemas. Também acreditamos que 90% do mercado não tem tais problemas, e o debate sobre os méritos dos web components é um pouco improdutivo.
Ao alavancar o Stencil, o Ionic fornece um mecanismo para alavancar componentes cross-framework com suporte ao Angular, React e Vue, o último atualmente com suporte beta. Usuários de versões mais recentes do Ionic estão criando web components por padrão, possibilitando aos usuários do Ionic fazer a transição de bibliotecas de componentes através de outros frameworks sm problemas.
O framework Dojo está focado em suportar os elementos customizados dos web components padrão, fornecendo um mecanismo para a interoperabilidade do framework. O showcase de elementos customizados do Dojo destaca a os existentes widgets Dojo aproveitados como elementos personalizados.
Existem uma série de outras opções Many para trabalhar com web components, incluindo o Hybrids, LitElement (aparentemente o sucessor do Polymer), Skate.js, e Slim.js. Também existem material-components, uma implementação do Material Design para web components.
As melhorias no ferramental e framework suportam os avanços no suporte ao browser de componentes web, e o desafio de reutilizar componentes através de frameworks e aplicações levou ao uso convencional de web components pela Apple, Amazon, Microsoft e outros.
Os web components fornecem uma divisão na qual os componentes criados hoje podem durar mais do que o framework escolhido para construir uma aplicação. Para algumas organizações os web components pode colocar um ponto final no debate sobre o uso de um simples framework para todas aplicações.
Há uma série de recursos disponíveis para iniciar com os web components, incluindo o Web Components: from zero to hero de Pascal Schilp. Mais documentação sobre os padrões de web components estão disponíveis no MDN e webcomponents.org.