BT

Início Notícias Web Components atingem a maturidade

Web Components atingem a maturidade

Favoritos

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.

Avalie esse artigo

Relevância
Estilo/Redação

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Seu cadastro no InfoQ está atualizado? Poderia rever suas informações?

Nota: se você alterar seu email, receberá uma mensagem de confirmação

Nome da empresa:
Cargo/papel na empresa:
Tamanho da empresa:
País:
Estado:
Você vai receber um email para validação do novo endereço. Esta janela pop-up fechará em instantes.