Guten Tag!
Die Geschichte dieser Veröffentlichung ist recht einfach und vielen vielleicht vertraut. Das Unternehmen entwickelt viele Produkte - in unserem Fall hauptsächlich für einen Kunden. In letzter Zeit wurden alle Lösungen für das Web entwickelt und vorhandene Desktop-Lösungen im Web übertragen.
In diesem Zusammenhang wurde beschlossen, eine gemeinsame Komponentenbasis zu entwickeln, wenn die Entwicklungsgeschwindigkeit erhöht und die Einheitlichkeit der Produkte sichergestellt werden soll. Wir werden schweigen darüber, wie das UI-Kit erstellt wurde und über lange Kämpfe mit Designern, aber ich möchte über die Implementierung dieser Aufgabe sprechen.
An der Front haben wir Demokratie oder sogar Anarchie. Es steht den Menschen frei, die Lösungen zu verwenden, mit denen sie vertraut sind. Im Moment gibt es Projekte in AngularJS, Angular, React, Vanilla und es gibt auch Projekte in Vue für den internen Gebrauch. Zu diesem Zeitpunkt wandte sich unser Blick den Webkomponenten zu.
Webkomponenten
Lassen Sie uns einen kurzen Blick auf das Konzept der Webkomponenten werfen. Es basiert auf dem Konzept benutzerdefinierter Elemente, mit dem Sie die HTMLElement-Klasse erweitern können, indem Sie Ihre eigenen HTML-Tags erstellen, wobei die Geschäftslogik dem Benutzer verborgen bleibt. Klingt cool, sieht gut aus. Mal sehen, was wir tun können. Im Folgenden wird der Quellcode in Typoskript angegeben.
Um ein benutzerdefiniertes Element zu erstellen, müssen Sie Folgendes tun. Beschreiben Sie die Klasse und registrieren Sie die Komponente.
export class NewCustomElement extends HTMLElement { constructor() { super(); console.log('Here I am'); } } if (!customElements.get('new-custom-element')) { customElements.define('new-custom-element', NewCustomElement); }
Durch Verbinden dieses Codes mit einem beliebigen HTML-Code (Kompilieren in JS) können wir die Komponente verwenden (wir werden darauf zurückkommen, wenn Ihre Kunden es nicht wagen, Chrome zu verwenden).
Benutzerdefinierte Elemente geben uns auch einige Haken für die Verfolgung der Lebensdauer von Komponenten.
export class NewCustomElement extends HTMLElement { constructor() { super(); console.log('I am created'); } connectedCallback() { console.log('Now I am in Dom'); this._render(); this._addEventListeners(); } disconnectedCallback() { console.log('I am removed now'); this._removeEventListeners(); } static get observedAttributes() { return ['date']; } attributeChangedCallback(attrName, oldVal, newVal) { switch (attrName) { case 'date': { break; } } } adoptedCallback() { } }
Wir können Ereignisse in Komponenten auch über die dispatchEvent-Methode generieren
export class NewCustomElement extends HTMLElement {
Die Zukunft ist gekommen, sagten sie, man schreibt den Code einmal und benutzt ihn überall, sagten sie
Wir haben uns ein wenig mit den Komponenten vertraut gemacht, jetzt werde ich über die Gefühle sprechen, die nach der Arbeit mit dieser Technologie geblieben sind. Im Allgemeinen beschrieb
der Autor in dem Artikel
Webkomponenten in der realen Welt eine Haltung gegenüber Technologie, die sich als sehr nah an mir herausstellte.
Mal sehen, welche Vorteile wir haben.
- Wiederverwendbar : Wir haben eine wirklich wiederverwendbare Bibliothek. Im Moment funktioniert es im Vanilla-Projekt, das als kompiliertes Webpack-Bundle verbunden ist, und im Angular 7-Projekt, das als Typoskriptquelle im AppModule verbunden ist
- Verständliches Verhalten : Wenn Sie die Best Practices befolgen, erhalten Sie Komponenten mit verständlichem Verhalten, die leicht in vorhandene Frameworks integriert werden können, z. B. für Winkel, die Verwendung von Bananen in einer Box, in nativen Anwendungen über Attribute oder die Arbeit mit eigenschaftsreflektierenden Attributen
- Einheitlicher Stil : Dies ist eine Wiederholung des Punktes zur Wiederverwendbarkeit, aber dennoch. Jetzt verwenden alle Projekte einzelne Bausteine für die Erstellung der Benutzeroberfläche.
- Ehrlich gesagt kann ich mir keine weiteren Vorteile einfallen lassen: Erzählen Sie uns, wie WebComponents Ihnen geholfen hat.
Als nächstes werde ich versuchen, Dinge zu beschreiben, die mir wahrscheinlich nicht gefallen haben.
- Arbeitskosten : Die Kosten für die Entwicklung von Komponenten sind unvergleichlich höher als die Entwicklung eines Frameworks.
- Benennung : Komponenten konkurrieren global, daher müssen sowohl Klassennamen als auch Tag-Namen vorangestellt werden. Da wir immer noch Komponentenbibliotheken unter Frameworks implementiert haben, die als < Firmenkomponentenname > bezeichnet wurden, mussten wir den Webkomponenten zweimal < Firmen-WC -Komponentenname> voranstellen.
- ShadowRoot : Gemäß den Best Practices wird die Verwendung von shadowRoot empfohlen. Dies ist jedoch nicht sehr praktisch, da es keine Möglichkeit gibt, das Aussehen des Bauteils von außen zu beeinflussen. Und ein solches Bedürfnis ist oft anzutreffen.
- Rendern : Ohne Frameworks müssen Sie die Datenbindung und -reaktivität vergessen (LitElement hilft, aber dies ist eine weitere Abhängigkeit).
- Die Zukunft ist nicht gekommen : Um die Benutzerunterstützung auf dem alten Niveau zu halten (wir haben sie, dh 11 und alles, was frischer ist), müssen Sie die Polyphilen befestigen. Es5 ist der Zielstandard, der zusätzliche Probleme verursacht.
- Polyphils selbst : Um all diese Dinge unter IE zu bekommen, musste ich viel quälen und einige hässliche Entscheidungen treffen, da die Polycoms von Webcomponent etwas im Hangar zerbrechen und einen Überlauf des Aufrufstapels verursachen. Infolgedessen musste ich Polyphile polyfüllen, nachdem ich zusätzliche Abhängigkeiten erhalten hatte.
Ich weiß nicht, welche Schlussfolgerung ich daraus ziehen soll. Wenn Microsoft einen chrombasierten Browser erstellt und IE und Edge nicht mehr unterstützt, wird das Atmen einfacher.
Es gibt einen merkwürdigen Vorteil: Sie können Anfängern die Entwicklung sauberer Webkomponenten geben - lassen Sie sie sehen, wie es ist, schreiben Sie in JS ohne Frameworks. Ein Kollege konnte lange Zeit nicht verstehen, warum sich die Änderung der Eigenschaft in der Komponente nicht sofort im DOM widerspiegelte. Hier sind es Menschen, die auf Frameworks gewachsen sind. Und ich bin das gleiche.