Este não é um tutorial ou uma revisão completa - notas bastante interessantes depois de compilar uma biblioteca de componentes. Tudo começou com a história cotidiana usual: existe um código legado, você precisa prender pipmochek e pequenos gravetos ao legado, não é possível reescrever nada uma vez e não tocar em nada aqui com as mãos; não toque nos pacotes grandes e assustadores por precaução e, de fato, por que você não pega a melhor estrutura
Vanilla JS e começa a escrever nela, como seus avós deixaram?
Mas como era previsto que o volume de trabalho era muito perceptível, por alguma razão ninguém experimentou impulsos criativos com a ideia de escrever tudo em JS simples. Fomos examinar as ferramentas e escolher delas aquelas que não assustariam os consumidores de nossos componentes a ponto de tremer.
As ferramentas
Embora eu já tenha estragado toda esta seção, algo precisa ser dito aqui. Em primeiro lugar, os componentes da Web imediatamente ficaram absolutamente incontestados: quando o resultado da criatividade é uma biblioteca de componentes e você não pode arrastar um grande monstro para a Angular, que se modulariza completamente, o que resta é que você não precisa arrastar o código da biblioteca, e funciona "exatamente assim" em navegadores modernos. Os próprios componentes da Web ainda são a mesma estrutura incrível do Vanilla JS, com apenas um pouco de modularidade resolvida. Ainda há muito para escrever com suas próprias mãos - você precisa de um invólucro com padronização e também é desejável que exista um mínimo de um padrão para cada componente.
Não existem muitos invólucros e até maduros o suficiente para serem usados em um
produto sério:
Hybrids, LitElement, Stencil. E todos fazem a mesma coisa da mesma maneira, a diferença está nas pequenas coisas. O Hybrids está tentando ficar na moda e sem classe, o Stencil está na moda e reage, o LitElement nem parece estar se esforçando. E de acordo com os resultados da escolha de insignificantes insignificantes, LitElement permaneceu na saída - OOPshniki desviou o olhar de Hybrids, e não amadores da reação - de Stencil, no qual JSX geralmente sentia uma repetição das idéias não indiscutíveis da reação.
Para a batalha?
Não é tão interessante falar sobre o que você pode, está tudo na documentação, por isso continuarei falando principalmente sobre o que você não pode: eles geralmente não escrevem sobre isso na documentação.
Padrões
Em termos de modelagem, o LitElement usa lit-html, que é perfeitamente minimalista:
const template = html` <div attr=${a} .property=${b} ?booleanAttr=${c} @click=${handleClick} ></div> `;
Isso não é html, mas é preciso lembrar exatamente três construções em um símbolo aqui - ".", "?" E "@". Tudo o resto é html. Em relação ao JSX, com seu className e o restante, é um pouco melhor e legalmente separado do código JS / TS. Mas, a propósito, o primeiro “impossível” segue a partir daqui - vincular qualquer coisa horrível não funciona, você pode vincular apenas os valores de atributos e propriedades e o conteúdo do texto. Obviamente, não há mágica nos literais de modelo com tags e, ao custo de uma certa quantidade de perversões, você pode compilar uma string em tempo de execução e anexar ligantes de lit-html a ela, mas isso está realmente entrando na renderização com suas mãos e, com o mesmo sucesso, você pode coletar linhas e enviá-las no innerHTML. Normalmente, tudo isso é feito através da composição dos modelos e da decomposição de componentes complexos em componentes mais simples. O padrão é bastante pequeno - a ligação do modelo está praticamente ausente, porque é apenas uma variável e, para criar um componente, você precisa de cinco linhas "extras".
Componentes
O único problema (mas significativo) dos componentes é que, para "misturar" completamente os componentes com a renderização dos filhos, em algum lugar dentro do modelo dos pais você precisa do DOM da sombra. Que, é claro, está incluído no LitElement por padrão e, em geral, parece não ser ruim. Mas o DOM sombra atualmente tem um grande problema com estilos, semelhante aos módulos css: para isolar estilos, ele isola perfeitamente, mas ao longo do caminho isso reduz toda a cascata. É simplesmente impossível entrar em estilos isolados do lado de fora. Geralmente (quase) nada.
Isso interfere bastante, por exemplo, na capacidade de rolar componentes de diferentes tópicos. Tudo o que pode ser feito com o DOM da sombra é agrupar todas as opções de estilo dentro do componente ou tentar tornar o tema completamente dependente das variáveis css - esse é o "quase" com o qual você pode alterar os estilos isolados. Mas com o qual é necessário fornecer variáveis literalmente para qualquer estilização razoável e, com uma alta probabilidade, ainda é adicionado mais.
Felizmente, o Shadow DOM no LitElement pode simplesmente ser desativado no componente. Infelizmente, isso também desativará a capacidade de direcionar filhos do elemento nos lugares certos do modelo via <slot>. Felizmente, tendo pervertido um pouco, você pode obter o primeiro e o segundo: para isso,
basta colocar uma raiz de sombra em cada slot necessário e não ter nada nele, exceto, de fato, <slot>. Assim, a estilização do componente estará aberta e os slots estarão presentes. Eu queria dar um breve exemplo, mas, infelizmente, o código para manipular slots não funciona de qualquer maneira brevemente - pessoas muito interessadas podem ler
esse problema aqui. Eu fui inspirado por idéias de lá.
Bem, também vale a pena mencionar que, no futuro previsível, o suporte ao navegador e os polyfills
:: part e :: theme provavelmente cairão, e com eles o DOM sombra se tornará a solução que todos esperam há muitos anos - para que fique isolado e extensível / mutável. Mas até agora isso ainda não está lá.
Implantar
Nesse momento, a escrita sobre o que é impossível não sai mais, porque tudo pode ser mais aprofundado - existem bibliotecas iluminadas na forma de módulos ES e, portanto, sem problemas, são captadas por tudo e de qualquer maneira (mesmo com um navegador simples que pode manipular módulos ) Para o IE e o Edge atual, é necessário conectar um polyfill de componentes da Web, para módulos. Se você deseja levantá-los diretamente do navegador, precisa de algo que alivie a dor das importações do navegador, por exemplo,
es-module-shims. Bem, ou um empacotador.
Os componentes da Web conectados ao aplicativo são simples e brega de usar, você pode começar a usá-los em html e extrair seus métodos e propriedades no código. Você pode ver como tudo isso pode ser anexado a outra biblioteca ou estrutura
aqui (a reação foi excelente, mas, em média, tudo é muito bom). Nós nos apegamos ao AngularJS, e tudo era trivial: o ng-prop permite transferir algo para o componente e o ng-on permite que você ouça eventos.
Sumário
Se você precisar criar uma interface do usuário de componente e prendê-la a algo em que você absolutamente não deseja entrar (código legado, estrutura assustadora fora de moda e outros lugares ruins) - os componentes da Web ajudam muito bem. As principais bibliotecas "maduras" que são gerenciadas com elas são pequenas em tamanho, não há problemas técnicos sérios de modularidade e layout, e você pode simplesmente fazer isso. Que tipo de biblioteca você usa - mesmo que não seja tão importante, existem muito poucas diferenças entre elas no momento; Especificamente, o LitElement que adotamos não criou um único problema adicional para nós e funcionou da maneira esperada em todos os casos.