Autor/in: Dennis Stricker
It’s #FrontendFriday – SubSink: Ein sauberer Ausweg aus der Subscription-Hölle
Wann sollte eine Subscription aufgelöst werden?
Das Angular Framework stellt jedem Entwickler den ngOnDestroy-Callback zur Verfügung, welcher immer dann aufgerufen wird, sobald das DOM-Element der Komponente aus dem übergeordneten DOM-Baum entfernt wird. Der ngOnDestroy-Callback ist somit für sämtliche Aufräumarbeiten prädestiniert. Wird eine Komponente zerstört, heißt es jedoch nicht zwingend, dass eine automatische Abmeldung von den zugehörigen Datenströmen stattfindet. Es entstehen sogenannte „Ghost-Subscriptions“, welche den Memory vollspammen. Näher betrachtet, kann eine Parallele zwischen einem Ghostbuster und einem Angular-Entwickler gezogen werden, welcher für das Einfangen der Geister zuständig ist. Na ja sehr Abstrakt…
Soll immer unsubscribed werden?
Im Netz existieren verschiedene Meinungen zu dieser Frage. Besonders bei den sogenannten endlichen Datenströmen gibt es regelrechte Auseinandersetzungen. Einen Beispiel für einen solchen endlichen Observable stellt ein HTTP-Request im Angular-Umfeld dar. Dieser wird nach dem Empfangen des ersten Wertes completed/aufgelöst. Viele Entwickler sind deshalb der Meinung, dass es bei einer solchen Art von Datenströmen zu keinen Memory-Leaks kommen könnte. Wäre sehr nice! Lasst uns mal gezielt versuchen, auch in diesem Fall, einen Geist zu erzeugen. Doch wie? Die Antwort auf diese Frage ist sehr einfach. Wir lösen einen HTTP-Request aus und bevor er completed navigieren wir zwischenzeitlich in eine andere Komponente. Ich würde sagen, dass Böse hat damit gesiegt.
D.h. die klare Empfehlung: unsubscibe, unsubscribe, unsubscribe… Die Performance wird es uns danken. Bei genauer Betrachtung der folgenden Grafik fällt uns direkt auf, dass es sich hierbei immer wieder um den gleichen Code im ngOnDestroy-Callback handelt.
Gibt es eine elegantere Lösung?
Auf der diesjährigen NG-Conference wird immer wieder das NPM-Paket SubSink in diesem Zusammenhang empfohlen. Das vom Ward Bell entwickelte Paket ist ein einfacher Store zur Aufnahme von RxJS-Oberservables in einer Array Struktur. Mit dieser ist es sehr einfach möglich unsere Observables zu managen. Alain Chautard, ein von Google zertifizierter Expert Developer in Angular, fasst in seinem Artikel die Funktionalität von SubSink sehr gut zusammen. Folgend eine Grafik, angelehnt an seinen Artikel (siehe Quelle):
Aus der abstrakten Darstellung wird ersichtlich, dass es zwei Arten gibt mit den Subscriptions umzugehen. Die Rede ist einerseits von einer einfachen Syntax und andererseits von einer Array-Syntax. Doch bisher haben wir nicht viel gewonnen oder?
Geht es noch besser?
Ja es geht. Danke für den Tipp Alain! Mit einem zentralen App-Unsubscribe-Adapter, welcher den ngOnDestroy-Callback implementiert und den einmal deklarierten Sub unsubscribed.
Als letztes muss nur noch jede Komponente mit dem Adapter in eine Vererbungshierarchie gebracht werden. Cool oder?
Fazit:
Die Implementierung eines zentralen Subs in Kombination mit einem entsprechenden Adapter, ist meiner Meinung nach eine sehr gute Methode für ein elegantes Subscription-Management und sollte auf jeden Fall in den Hinterköpfen von Angular Entwicklern beibehalten werden.
Quelle:
https://www.npmjs.com/package/subsink
https://blog.angulartraining.com/how-to-automatically-unsubscribe-your-rxjs-observables-tutorial-2f98b0560298
It’s #FrontendFriday – Kennt ihr schon Nebular und NGX-Admin?
Was ist Nebular?
Nebular ist eine Open Source Angular-UI-Bibliothek, welche auf dem Eva-Design-System basiert. Es stellt 40 UI-Komponenten, 4 Standard-Themes sowie weitere Module zur Authentifizierung sowie Sicherheit bereit. Diese Komponenten helfen bei der Implementierung von einheitlichen UI’s über mehrere Devices hinweg. Hab ich da Module geschrieben? Richtig es ist Modularisiert. D.h benötigte Inhalte werden als Module in eine bestehende Angular-App integriert. Beispielsweise existiert das ThemeModule, welches ein Default-Theme anzieht. Die Experten unter euch werden bereits Parallelen zum Angular Material ziehen. Und ich muss mich euch direkt anschließen. Der Aufbau, die Dokumentation, im Prinzip alles ist ähnlich.
Was ist NGX-Admin?
Auf der Suche nach Nebular im WWW, taucht zusammenhängend ein weiterer Begriff auf. „NGX-Admin“. Hierbei handelt es sich um eine Open Source Beispielimplementierung einer Dashboard-Anwendung, welche Nebular, Bootstrap 4+ sowie Angular 8+ im Stack Repertoire hat. Das Backend ist jedoch gemockt und muss bei Bedarf zugekauft werden. Der Urheber Akveo stellt zudem auch eigene Icons zur Verfügung und wirbt mit folgenden Vorteilen:
- Mobile First
- Customizable
- Updated and supported
- Completely FREE and MIT licensed
Kann Nebular Bibliothek bzw. das NGX-Admin-Template bei der Entwicklung von Webapps helfen?
Laut Urheber Akveo auf jeden Fall. Denn man würde sich als Entwickler 480 Stunden an Entwicklungszeit aneignen. Doch will ich als Entwickler das überhaupt? Fakt ist, ich bin in der Entwicklerrolle an verschiedenste Anforderungen gebunden, die sich in der Regel nicht durch die Beispielimplementierung abdecken lassen. NGX-Admin ist eine große Anwendung, mit viel Boilerplate Code. D. h. ich als Entwickler muss sicherstellen, dass Codefragmente, die an vielen Stellen nicht benötigt werden, entfernt werden. Zudem muss sichergestellt werden, dass alle „Vulnerabilities“ (siehe Screenshot) behoben werden.
Selbstverständlich ist auch ein Bottom-Up-Ansatz im Rahmen des Möglichen. Damit ist die Aufsetzung eines neuen Angular-Projektes und der damit verbundenen, schrittweisen Integration der benötigten Nebular Inhalte gemeint. Ist ein Dashboard als UI gefordert, so kann man das NGX-Admin Projekt als architekturtechnische Referenz verwenden und somit schneller ans Ziel kommen.
In welchem Szenario eignet sich ein Einsatz von NGX-Admin?
Abhängig von den Anforderungen kristallisiert sich eigentlich nur ein sinnvolles Einsatzszenario heraus: „Der Kunde wünscht sich ein Dashboard und hat keine konkreten Anforderungen bezüglich des Technologiestacks“. Zur Erinnerung, NGX-Admin ist mittels der Nebular Komponentenbibliothek umgesetzt und somit technologiegebunden.
Gibt es einen ähnlichen Ansatz für Angular Material?
Ja, das gibt es. Im Folgenden sind zwei Beispielansätze verlinkt:
https://www.creative-tim.com/product/material-dashboard-angular2
https://flatlogic.github.io/angular-material-dashboard/#/dashboard
Es handelt sich hierbei, anders als bei NGX-Admin, welches vom gleichen Urheber wie Nebular entwickelt ist, jedoch um Lösungen von vereinzelten Entwicklern. Pauschal interpretiert, werden die Lösungen wohl nicht an die Implementierung von NGX-Admin herankommen. Denn bei NGX-Admin steht das gesamte Unternehmen dahinter.
Fazit:
Nebular ist eine sehr gute Alternative zum Angular Material. Es stellt ebenfalls eine hohe Anzahl an Komponenten, Themes und weiterer Features bereit. Das Theme an sich ist meiner Meinung nach besser, sauberer anpassbar als bei Angular Material. Stichwort: „Powerful theming engine with custom CSS properties mode“. Abhängig von den gegeben Anforderungen und im Rahmen eines richtigen Einsatzszenarios hat es ein enormes Potenzial, um Entwicklern bei der Entwicklung von Webapps zur Seite zu stehen. Es macht eben das, was ein UI-Komponentenframework so macht.
Ein entscheidender Nachteil gegenüber Angular Material ist die rare Community. Die folgende Grafik unterstreicht dies in Form der Download-Zahlen in den letzten zwei Jahren.
Quellen:
It’s #FrontendFriday – DOM vs Virtual DOM vs Shadow DOM
Hallo Liebe FrontendFriday Leser.
Um euch am Anfang maximal zu verwirren, gleich mal eine schöne Einstiegsfrage:
Was ist der Unterschied zwischen DOM und HTML DOM?
Es grenzt an Haarspalterei, aber es gibt tatsächlich einen Unterschied. DOM allein stehend ist ein W3C-Standard, welcher definiert, wie auf ein Dokument zugegriffen werden kann. Der W3C-DOM-Standard wird mit Core DOM (für alle Dokumententypen), XML DOM und HTML-DOM in drei Teile aufgeteilt. Das HTML DOM ist somit das Objektmodell und die Schnittstelle für das HTML, welches jedes HTML-Element als Objekt mit allen Eigenschaften, Methoden und Ereignissen definiert. Somit ist das HTML DOM der Standard, um HTML-Elemente zu ändern, hinzuzufügen oder zu löschen. Im folgenden Beitrag wird stellvertretend für den HTML DOM der DOM ausdruck verwendet.
It’s #FrontendFriday – Antike HTML-Elemente
Vor langer, langer Zeit im Erdmittelalter existierten sie, die antiken HTML-Elemente. Diese schon fast vergessenen Elemente sind für browserübergreifende Anforderungen besonders interessant, denn sie werden fast von allen Browsern (teils sogar IE9) unterstützt! Der folgende Beitrag soll den Leser für die Verwendung nativer Dino-Elemente sensibilisieren.Mehr
Welche Rolle spielt das Human Interface Design (HMI) für die autonome Logistik?
Der Hype rund um das autonome Fahren beschäftigt mittlerweile auch die Logistikbranche. Führende Automobilzulieferer investieren bereits zweistellige Milliardensummen in dieses Zukunftsfeld. So präsentierte sich z.B. die ZF Friedrichshafen AG letztes Jahr auf der IAA für Nutzfahrzeuge in Hannover mit intelligenter, vernetzter Fahrzeugtechnik, die logistische Prozesse effizienter und sicherer machen soll. Hierzu gehören unter anderem Vorgänge wie das „autonome Satteln“ oder das anspruchsvolle Ab-, Auf- sowie Umsetzen von Containern. Aber auch das Überwachen von Vorgängen über Echtzeitvisualisierungen und die Interaktion mit den Fahrzeugen über spezielle Human Interface Designs (HMIs) sowie Augmented Reality Lösungen spielen hier eine Rolle.Mehr
It’s #FrontendFriday – Einheiten in CSS
CSS bietet eine Reihe unterschiedlicher, typografischer Einheiten. Grundsätzlich wird zwischen relativen und absoluten Maßeinheiten unterschieden. Solche Größen bemessen Elemente eines Layouts, Abstände sowie Schriftgrade. Vor allem im Bereich des „Responsive Webdesigns“ ist das grundlegende Verständnis, über die Funktionsweise der CSS-Längenangaben, entscheidend. Der folgende Beitrag konzentriert sich nur auf die in CSS (Cascading Style Sheets) verwendete Einheiten für virtuelle Medien. Buchschriftsätze sind zusätzlich aus dem Betrachtungsfokus ausgenommen.
Browser Cache richtig löschen – aber wie?
In Ausnahmefällen kann es vorkommen, dass geänderte Inhalte einer neuen Version einer Webapplikation nicht direkt sichtbar sind. Die Erklärung dafür ist fast immer dieselbe: Weil der Browser Cache nicht geleert wurde. Dieser Beitrag liefert eine kurze Anleitung und geht dem Thema „Browser Cache leeren“ auf den Grund.Mehr
