In diesem Artikel erklären wir, was BEM ist und wie man es in Angular mit einfachen Beispielen anwendet. Außerdem gehen wir auf seine Vorteile und bewährten Praktiken ein.

Was ist BEM?

BEM ist ein Ansatz zur Benennung von CSS-Klassen, der darauf abzielt, die Struktur, Klarheit und Wartbarkeit des Codes zu verbessern.

Die Namenskonvention für Blöcke, Elemente und Modifikatoren ist wie folgt:

• Block: Ein eigenständiges Komponentenelement, das mehrere Teile gruppiert.
• Element: Bestandteile eines Blocks, die ihn zusammenstellen.
• Modifier: Verändert das Erscheinungsbild oder Verhalten eines Blocks oder Elements.

.block { }
.block__element { }
.block--modifier { }

Warum die BEM-Methodik in Angular anwenden?

Angular basiert auf Komponenten, sodass die Anwendung von BEM ideal ist. Außerdem wird sie dadurch begünstigt, dass jede Komponente ihre eigene CSS- oder SCSS-Datei hat. Schauen wir uns ein praktisches Beispiel an.

Beispiel für BEM in einer Angular-Komponente

Angenommen, wir haben eine Card-Komponente. Dazu gehören zwei Dateien: die HTML-Struktur und die CSS- oder SCSS-Style.

HTML-Struktur (card.component.html)

<div class="card">
  <h2 class="card__title">Título del Producto</h2>
  <p class="card__description">Descripción breve del producto.</p>
  <button class="card__button card__button--primary">Comprar</button>
</div>

Formatvorlagen mit BEM (card.component.scss)In diesem Beispiel sehen wir, dass der Hauptblock die Klasse card enthält, zu der die untergeordneten Elemente card__title, card__description und card__button gehören. Dadurch wird eine hierarchische Struktur sowohl im HTML als auch im CSS beibehalten.

Der &__-Selektor wird verwendet, um die Elemente eines Blocks zu kennzeichnen, während der &–-Selektor für Modifikatoren genutzt wird. In unserem Fall hat card__button den Modifikator primary, der nach folgender Syntax angegeben wird:

card__button card__button–primary.

Auf diese Weise können wir die benötigten Modifikatoren anwenden. Zudem können wir dank des komponentenbasierten Potenzials von Angular jeden Modifikator dynamisch auswerten, der übergeben wird. Zum Beispiel können wir im folgenden Fall den Modifikator mit ngClass einfügen, abhängig von der Variablen primary, wenn diese den Wert true hat.

HTML-Struktur mit bedingtem Modifikator (card.component.html)

<div class="card">
  <h2 class="card__title">Título del Producto</h2>
  <p class="card__description">Descripción breve del producto.</p>
  <button 
    class="card__button
    [ngClass]="primary ? 'card__button--primary' : ''"
  >Comprar</button>
</div>

Vorteile der Verwendung von BEM in Angular

1. Modularität und Wiederverwendbarkeit

Jede Komponente in Angular ist gekapselt, so dass Stile definiert werden können, ohne andere Elemente der Anwendung zu beeinträchtigen. Mit BEM wird diese Modularität verstärkt, so dass Blöcke auf flexible Weise wiederverwendet werden können.

2. Skalierbarkeit

Große Projekte können ohne Komplikationen wachsen, da BEM das Hinzufügen neuer Stile und Komponenten ohne unerwartete Störungen erleichtert.

3. Wartbarkeit

Durch die klare Struktur von BEM ist der Code leicht zu lesen und zu verstehen, was den Entwicklern hilft, das Projekt im Laufe der Zeit zu pflegen, ohne dass ein größeres Refactoring erforderlich ist.

Beste Praktiken bei der Verwendung von BEM in Angular

1. Tief verschachtelte Selektoren vermeiden

In Angular ist es üblich, dass Selektoren gekapselt sind. Ein übermäßiger Einsatz von tief verschachtelten Selektoren kann jedoch den Code weniger wartbar machen. Es wird empfohlen, die BEM-Struktur sauber zu halten, ohne unnötige Verschachtelungen.

2. Konsistenz bei der Benennung

Die Verwendung eines einheitlichen Formats für alle Komponenten sorgt für eine bessere Zusammenarbeit im Team. Das Festlegen interner Richtlinien hilft, die Kohärenz im Projekt zu wahren.

3. Verwendung von Variablen und Mixins in SCSS

SCSS ermöglicht das Definieren von Variablen und Mixins, um die Wiederverwendbarkeit des Codes zu verbessern. Es ist ratsam, diese mit der BEM-Methodologie zu kombinieren, um einen effizienteren Code zu erzielen.

$primary-color: #007bff;

.card {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;

  &__title {
    font-size: 1.5rem;
    color: #333;
  }

  &__button {
    @mixin button-style($bg-color) {
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      background-color: $bg-color;
      color: #fff;
    }

    &--primary {
      @include button-style($primary-color);
    }
  }
}

Schlussfolgerung

Durch den Einsatz von BEM in Angular erhalten wir einen saubereren, besser organisierten und wartbaren Code. Dank ihrer klaren Struktur verbessert diese Methodik die Skalierbarkeit und die Zusammenarbeit im Team.

Wata Factory ist führend in den neuesten Technologien und betrachtet BEM als eine sehr leistungsstarke und nützliche Methodik für die Anwendung in unseren Angular-Projekten.

The post BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit appeared first on WATA Factory.

Seit Angular 2 hat sich dieses Framework progressiv und kontinuierlich weiterentwickelt und sich in den letzten Jahren als eines der wichtigsten Frameworks positioniert. Doch, was sind die Vorteile? Doch, was sind die Vorteile?

Welche Vorteile bietet Angular?

Angular weißt viele Vorteile auf. Im folgenden Abschnitt konzentrieren wir uns auf diese, die für uns am Wichtigsten sind:

• Angular verwendet TypeScript, mit den damit verbundenen Vorteilen, als Basis. Dadurch wird die (reichhaltig vorhandene) Dokumentation leichter verständlich, Design Patterns werden klarer erkennbar und der Code ist leichter zu lesen. Diese Konsistenz (im Vergleich zu purem Javascript) führt auch dazu, dass eine Überlastung und Verwirrung, wie sie bei der Einführung eines neuen Frameworks entstehen kann, mit Angular verhindert werden kann.
• Standardisierte Webkomponenten, welche die Erstellung neuer, benutzerdefinierter, wiederverwendbarer sowie in sich geschlossener HTML-Tags ermöglichen, die später in anderen Angular Anwendungen wiederverwendet und relativ einfach in native Webkomponenten umgewandelt werden können.

Angular 8: der Übergang zu einer umfassenden Modernisierung

Angular 8 ist ein stufenweiser Aufstieg für die große Veränderung: Angular 9. In dieser Zwischenstufe können wir von Angular in seiner ganzen Pracht profitieren, da es über einen stabilen Kern und neue Funktionen verfügt, welche die Benutzerfreundlichkeit erhöhen:

• Lazy Loading, bezeichnet das Verzögern des Ladens oder der Initialisierung eines Objekts, bis zum Moment seiner Verwendung. Obwohl dieser Pattern weit verbreitet ist, erleichtert Angular die Verwendung, indem es von Anfang an im Core implementiert ist, was zu einer Einsparung beim Laden von Objekten führt und die Ladezeiten sowohl für den Benutzer als auch für den Entwickler verbessert.
• Differential loading: eine der größten Änderungen im Angular, und ein Hauptgrund, ein Projekt zu migrieren. Diese Funktion ermöglicht es Ihnen, zwei Bundles gleichzeitig zu kompilieren, so dass Sie je nach verwendetem Browser das eine oder das andere Bundle verwenden können. Diese Funktion ist ein Plus bei der Entwicklung, bei der die Kompatibilität zwischen alten (IE, ältere Versionen von Edge) und modernen Browsern (d. h. ES5 bzw. ES6) gewahrt werden muss, wobei die Größe der Bundles um 7 bis 20 % reduziert wird.
• Web Workers: Wir haben endlich Minions im Core, um uns die Arbeit zu erledigen! Ab Version 8 unterstützt Angular Web Workers, was es uns ermöglicht, Aufgaben im Hintergrund im Browser zu erstellen.

Für Entwickler finden wir auch eine Reihe von Vorteilen, die unsere Implementierungen verbessern, wie zum Beispiel:

• Neue Funktionen im Routing.
• Verbesserungen in der Verwaltung von Abhängigkeiten.
• Endlich wird die HTTP-Bibliothek erneuert, und vom HTTPClient abgelöst.
• Es ist nicht mehr notwendig, die Browserlist zu erstellen und den Pfad einzustellen, sie ist jetzt standardmäßig konfiguriert.

Aber die große Veränderung kommt mit IVY, der neuen Rendering-Engine, die in späteren Versionen des Frameworks – Angular 9 – implementiert wurde und für einige Verbesserungen in Angular 8 verantwortlich ist. Was wird in dieser Version verfügbar sein?

• Ein Incremental DOM als Hauptstruktur.. Er basiert auf der Erstellung eines Baumes mit den bereits aus jeder Komponente komiplierten Anweisungen, die ein DOM-Netzwerk und DOM-Zweige bilden Mit dieser neuen Struktur wird die DOM-Aktualisierungszeit reduziert, da es nicht notwendig ist, den kompletten Baum aufzubauen, sondern nur den betroffenen Zweig.
• „Shakable Tree„: Methode, bei der die Äste des DOM-Baums „geschüttelt“ werden, wobei die Anweisungen, die zu diesem Zeitpunkt nicht verwendet werden, ignoriert werden, das Gewicht der Pakete verringert und die Ladezeit verkürzt wird.
• Load Memory Footprint: Intelligente Lademethode, die hilft, Speicher zu sparen, wenn sich der DOM-Baum nicht oder kaum geändert hat. Das passiert, wenn man eine Komponente ohne große Änderungen in ihrem DOM-Baum aktualisiert und dabei „Schütteln“ erzeugt, die einen Großteil der Zweige des DOM-Baums ignoriert und wiederverwendet, ohne Speicher für seine Erstellung zu verbrauchen. Mit Angular 8 profitieren wir von den wichtigsten Verbesserungen, die das Framework in späteren Versionen implementiert, behalten aber die Stabilität, die Angular 7 bietet. Interesse, ein Projekt zu migrieren?

Wie migriert man ein Projekt von Angular 7 nach Angular 8?

Die Migration ist sehr einfach, und benötigt vorher diese notwendigen Schritte:

• Wir ersetzen die HTTP-Bibliothek durch die HTTP-Client-Bibliothek.
• Wir aktualisieren auf RxJS6.
• Wir aktualisieren Node auf Version 10 oder höher und TypeScript auf Version 3.4.
• Wir ersetzen /deep/ durch ::ng-deep, dies ist viel effizienter und attraktiver für unseren CSS-Code.

Sobald diese Schritte abgeschlossen sind, müssen wir nur noch den Core und die CLIunseres Angular-Projekts auf Version 8 aktualisieren:

ng update @angular/cli @angular/core

Falls Angular uns benachrichtigt, dass Änderungen nicht in das Repository hochgeladen wurden, können wir den nächsten Befehl starten, um Abhilfe zu schaffen:

ng update @angular/core --from 7 –to 8 –migrate-only –allow-dirty

Und das war’s! Schon haben wir unser Angular-Projekt auf Version 8 aktualisier

The post Migration eines Projekts von Angular 7 nach Angular 8: Was sind die Vorteile? appeared first on WATA Factory.