Umschalten der CSS-Frameworks in Komponenten

Question

ich ein UI-Anwendung entwickle mit Winkel- und ich kann eine oder mehrere der folgenden CSS-Frameworks wählen:

1. Bootstrap 4
2. Stiftung
3. scharfkantiges Material
4. ng-bootstrap oder ngx-bootstrap.
5. Eine vorgefertigte Vorlage, die ich kaufen kann.
6. Viele andere oder neue ...

Gibt es eine bewährte Methode, die Angular Anwendung zu entwerfen, so dass es leicht sein wird, auf der ganzen Linie zu einem anderen CSS-Framework weiter wechseln?

Eine Option, denke ich, besteht darin, ein neues Feature-Modul zu definieren, das alle Steuerelemente eines bestimmten CSS-Frameworks importiert und dann einen Wrapper darauf schreibt und in meiner Anwendung verwendet.

Zum Beispiel kann ich eine md-button mit meiner custom-button in einer Komponentenvorlage meines Moduls einpacken und in meiner Anwendung verwenden.

Wird dieser Ansatz funktionieren oder gibt es eine Standard-Design-Praxis, der ich folgen sollte?

Answer 1

Sie könnten das tun, aber meiner Meinung nach verschwenden Sie Ihre Zeit. Wie oft haben Sie in der Vergangenheit das Design-Framework ausgetauscht? Wahrscheinlich nie.

Die Ansicht einer Komponente umfasst viel mehr als die Komponenten niedriger Ebene, wie Schaltflächen und Eingaben. Es gibt Layout und Reaktionsfähigkeit, die alle in die Komposition der Ansicht eingreifen. Nehmen wir zum Beispiel an, Sie gingen mit Material Design und wickelten die md-button in my-custom-button. Wenn die Anwendung reift, werden Sie zweifellos Polsterung oder Rand um die Container hinzufügen, die diese Steuerelemente halten, wodurch sie mehr Material und mehr aussehen und fühlen. Der Tag kommt, um zu dem neuen Designmuster auf dem Block zu wechseln, und rate mal was? Auch wenn Sie diese Schaltflächen schnell für ein neues Aussehen austauschen können, bearbeiten Sie dennoch alle Ihre Ansichten, um dem neuen Aussehen zu folgen. Das heißt, Ansichten sind viel mehr als die Low-Level-Komponenten, die sie ausmachen, und es ist nicht den Aufwand wert, jede Komponente mit Ihren eigenen zu umhüllen.

Sinnvoller ist es, separate Vorlagen für jede Komponente zu erstellen.

Nehmen wir an, Sie haben Sie die gesamte Anwendung in Material, und jetzt möchten Sie auf neue Schärfe wechseln. Sie würden zuerst durchlaufen und alle Ihre Vorlagen umbenennen:

login.component.html>login.component.material.html

Und dann neue Vorlagen erstellen speziell den neuen Rahmen-Targeting:

login.component.newhotness.html

Als Nächstes erstellen Sie einen Build-Prozess das wäre Tauschen Sie die templateUrl zur Build-Zeit basierend auf einigen Konfigurationen. Mit dieser Strategie können Sie problemlos Technologien wie Ionic oder NativeScript integrieren, die nicht HTML für ihre Ansichten verwenden, sondern eine völlig andere XML-basierte Syntax.

SCHLUSSELERKENNTNISSE:

• Sie bestehende Bibliothekskomponenten mit Ihrer eigenen Variation nicht einwickeln
• Komponente Vorlagen in einer separaten Datei erstellen
• Wenn der Tag zu einem neuen Rahmen zu wechseln kommt, Erstellen Sie neue Vorlagen für jede Komponente und definieren Sie die älteren Vorlagen mit einem Namen, der das Framework beschreibt, aus dem sie besteht
• Bezahlen Sie! :)