Ce n'est pas un tutoriel ou un examen complet - plutôt des notes de sang chaud après avoir compilé une bibliothèque de composants. Tout a commencé avec l'histoire ordinaire de tous les jours: il y a un code hérité, vous devez attacher pipmochek et petits bâtons à l'héritage, vous ne pouvez rien réécrire, une fois, et ne touchez rien ici avec vos mains; ne touchez pas les gros paquets effrayants au cas où, et en effet, pourquoi ne prenez-vous pas simplement le meilleur framework
Vanilla JS et commencez à écrire dessus, comme vos grands-pères l'ont légué?
Mais comme le volume de travail était prévu pour être très perceptible, pour une raison quelconque, personne n'a ressenti d'impulsion créative à l'idée de tout écrire en JS nu. Nous sommes allés regarder les outils et en choisir ceux qui ne feraient pas peur aux consommateurs de nos composants à genoux tremblants.
Les outils
Bien que j'ai déjà gâché toute cette section, quelque chose doit être dit ici. Premièrement, les composants Web sont immédiatement devenus absolument incontestés: lorsque le résultat de la créativité est une bibliothèque de composants, et que vous ne pouvez pas faire glisser un gros monstre à la Angular, qui se modularise complètement, alors ce qui reste, c'est que vous n'avez pas du tout besoin de faire glisser le code de la bibliothèque, et fonctionne "comme ça" dans les navigateurs modernes. Les composants Web eux-mêmes sont toujours le même framework Vanilla JS incroyable, avec seulement quelques problèmes de modularité résolus. Il reste encore trop à écrire de vos propres mains - vous avez besoin d'un wrapper avec standardisation, et il est également souhaitable qu'il y ait un minimum de passe-partout pour chaque composant.
Il n'y a pas beaucoup de tels emballages, et même assez mûrs pour être utilisés dans une
production sérieuse:
hybrides, LitElement, Stencil. Et ils font tous la même chose à peu près de la même manière, la différence réside dans les petites choses. Les hybrides essaient d'être à la mode et sans classe, Stencil est à la mode et réagit, LitElement ne semble même pas essayer. Et selon les résultats du choix parmi des bagatelles insignifiantes, la sortie est restée LitElement - OOPshniki a tourné le nez aux hybrides et aux non-amateurs de la réaction - à Stencil, dans lequel JSX a généralement ressenti une répétition des idées les plus incontestables de la réaction.
Pour combattre?
Ce n'est pas si intéressant de parler de ce que vous pouvez, tout est dans la documentation, donc je vais continuer à parler principalement de ce que vous ne pouvez pas: ils n'écrivent généralement pas à ce sujet dans la documentation.
Patterns
En termes de modèles, LitElement utilise lit-html, ce qui est parfaitement minimaliste:
const template = html` <div attr=${a} .property=${b} ?booleanAttr=${c} @click=${handleClick} ></div> `;
Ce n'est pas du HTML, mais vous devez vous rappeler exactement trois constructions dans un seul symbole ici - ".", "?", Et "@". Tout le reste est en html. En ce qui concerne JSX, avec son className et le reste, il est un peu plus agréable et juridiquement distinct du code JS / TS. Mais, en passant, le premier «impossible» suit d'ici - pour lier quelque chose d'horrible ne fonctionne pas, vous ne pouvez lier que dans les valeurs des attributs et des propriétés, et dans le contenu du texte. Bien sûr, dans les littéraux de modèles étiquetés, il n'y a pas de magie, et au prix d'une certaine quantité de perversions, vous pouvez assembler une chaîne en cours d'exécution et y attacher des liants lit-html, mais cela pénètre réellement dans le rendu avec vos mains, et avec le même succès, vous pouvez collecter des lignes et les envoyer dans innerHTML. Normalement, tout cela se fait par la composition des modèles et la décomposition des composants complexes en composants plus simples. Le passe-partout est assez petit - la liaison du modèle est pratiquement absente, car il ne s'agit que d'une variable, et pour créer un composant, vous avez besoin de cinq lignes "supplémentaires".
Composants
Le seul problème (mais significatif) des composants est que, pour «mélanger» complètement les composants avec le rendu des enfants, quelque part dans le modèle du parent, vous avez besoin du Shadow DOM. Qui, bien sûr, est inclus dans LitElement par défaut, et en général, il ne semble pas être mauvais. Mais le DOM fantôme a actuellement un gros problème avec les styles, similaire aux modules CSS: pour isoler les styles, il isole parfaitement, mais en cours de route, cela réduit toute la cascade. Il est tout simplement impossible d'entrer dans des styles isolés de l'extérieur. Généralement (presque) rien.
Cela interfère considérablement, par exemple, avec la possibilité de faire défiler les composants de différents sujets. Tout ce qui peut être fait avec le DOM fantôme est soit de regrouper toutes les options de style à l'intérieur du composant, soit d'essayer de rendre le thème complètement dépendant des variables CSS - c'est le "presque" avec lequel vous pouvez contracter des styles isolés. Mais avec lequel il est nécessaire de fournir des variables littéralement pour toute stylisation raisonnable, et, avec une forte probabilité, il en ajoute encore plus.
Heureusement, le DOM fantôme dans LitElement peut simplement être désactivé dans le composant. Malheureusement, cela désactivera également la possibilité de cibler les enfants de l'élément aux bons endroits du modèle via <slot>. Heureusement, après avoir un peu perverti, vous pouvez obtenir à la fois le premier et le second: pour cela, il vous
suffit de mettre une racine fantôme sur chaque emplacement nécessaire, et de ne rien y contenir sauf, en fait, <slot>. Ainsi, la stylisation du composant sera ouverte et des fentes seront présentes. Je voulais donner un bref exemple, mais malheureusement, le code de manipulation des emplacements ne fonctionne pas brièvement de toute façon - les personnes très intéressées peuvent lire
ce numéro ici. J'ai été inspiré par des idées de là-bas.
Eh bien, il convient de mentionner que dans un avenir prévisible, le support du navigateur et les polyfills
:: part et :: theme vont probablement disparaître, et avec eux, le DOM fantôme deviendra finalement la solution que tout le monde attend depuis de nombreuses années - de sorte qu'il soit isolé et extensible / mutable. Mais jusqu'à présent, ce n'est toujours pas là.
Déployer
À ce stade, écrire sur «ce qui est impossible» ne sort plus, car tout peut aller plus loin - les bibliothèques éclairées existent sous la forme de modules ES, et donc sans aucun problème sont récupérées par n'importe quoi et de n'importe quelle manière (même avec un navigateur nu qui peut gérer les modules ) Pour IE et Edge actuel, vous devez connecter un polyfill de composants Web, pour les modules, si vous souhaitez les retirer directement du navigateur, vous avez besoin de quelque chose qui soulage la douleur des importations de navigateur, par exemple
es-module-shims. Eh bien, ou un bundler.
Les composants Web connectés à l'application sont simples et ringards à utiliser, vous pouvez commencer à les utiliser en html et à extraire leurs méthodes et propriétés dans le code. Vous pouvez voir à quel point tout cela peut être attaché à une autre bibliothèque ou un autre cadre
ici (la réaction a excellé, mais en moyenne tout est très bon). Nous nous sommes accrochés à AngularJS, et tout était banal: ng-prop vous permet de transférer quelque chose vers le composant, et ng-on vous permet d'écouter les événements.
Résumé
Si vous devez créer une interface utilisateur de composant et l'attacher à quelque chose que vous ne voulez absolument pas entrer (code hérité, cadre effrayant démodé et autres mauvais endroits) - les composants Web aident très bien. Les principales bibliothèques "matures" qui sont gérées avec elles sont de petite taille, il n'y a pas de problèmes techniques sérieux de modularité et de mise en page, et vous pouvez simplement les prendre et les faire. Quel type de bibliothèque que vous prenez - même pas si important, il y a très peu de différences entre eux pour le moment; Plus précisément, le LitElement que nous avons pris n'a pas créé de problème supplémentaire pour nous et a fonctionné de la manière attendue dans tous les cas.