Get best of the week

10 Prinzipien skalierbarer Front-End-Projekte

Webanwendungen haben seit ihrer Einführung einen langen Weg zurückgelegt. Wir wissen, welche wichtige Rolle JavaScript im Web spielt und welche unbegrenzten Möglichkeiten wir bei der Auswahl von Frameworks und Technologien haben. Jedes Framework hat seine eigenen Vor- und Nachteile, aber fast alle verwenden eine grundlegende Methodik. Tools wie create-react-app, next.js, vue-cli und andere sind für die anfängliche Erstellung des Projekts und seiner Struktur sehr nützlich. Andernfalls können Sie die Anwendung gemäß Ihren Präferenzen und Anforderungen des Projekts erstellen.

Dieser Artikel enthält eine Liste von Prinzipien, die beim Erstellen von Webanwendungen mit React and Vue hilfreich sind .. Sie helfen Ihnen dabei, die richtige Richtung festzulegen und die Entwicklung zu optimieren. Die meisten dieser Prinzipien gelten für die Erstellung von Software, die Liste wurde jedoch speziell für Webanwendungen entwickelt.

1. Designkomponenten, keine Bildschirme


  • Versuchen Sie, die gesamte Logik der Komponente so zu kapseln, dass sie überall leicht angezeigt werden kann, z. B. auf verschiedenen Bildschirmen und in verschiedenen Abschnitten.
  • Alle CRUD-Operationen gelten für die erforderlichen Daten für Controller / Lieferanten. Diese Daten werden dann an die ihnen zugeordneten Komponenten übertragen. Ein gängiger Ansatz ist die Verwendung von Redux / Vuex: Die Daten werden im Speicher gespeichert und als wahr angesehen, und die Container rufen die erforderlichen Informationen ab.

2. Trennen Sie die Präsentationsebenen von der Geschäftslogik / -verwaltung


Nicht alle Komponenten benötigen eine Verbindung zum Speicher, eine Server-API oder einen anderen Dienst. Wenn Sie Komponenten „gleichgültig gegenüber der Datenquelle“ machen, erhöhen sich die Möglichkeiten zur Wiederverwendung erheblich.

3. Verwenden Sie die Standardmethode zur Datenextraktion.


  • Dieses Prinzip veranschaulicht wunderbar Rest-Hooks , die die Erstellung einer einfachen und verständlichen Struktur von API-Aufrufen fördern.
  • Für einige Projekte ist die Verwendung von Aufrufen mit expliziter Datenextraktion ausreichend. Wenn Sie jedoch mit zahlreichen Quellen und Beziehungen arbeiten, hilft Ihnen die Abstraktion der Server-API.

4. Verwenden Sie eine allgemeine Benutzereingabestrategie


  • Dazu gehören Formulare, Etikettenauswahl, Validierung und Validierung sowie Fehlerbedingungen.
  • : antd.
  • UI-, .

5.



6. Storybook


Storybook ist ein großartiges Tool für die Interaktion mit Designern und die Diskussion von Funktionen. Es dient als „Style Guide“ für Ihre Anwendung.

7. Verwenden Sie Linters und Formatierer


  • Beispiele für Linter: ESLint, Stylelint .
  • Die meisten Schnellstart-Tools wie die Create-React-App installieren Linters für Sie vor. Wenn Sie jedoch mit der alten Codebasis arbeiten, können Linters unbrauchbar sein.
  • Sie helfen bei der Suche nach Fehlern, können aber auch verwendet werden, um den vom Team geschriebenen Code zu formatieren. Dies reduziert die kognitive Belastung bei der Arbeit an Funktionen, die Sie von Ihren Kollegen erhalten haben.
  • Das sonarJS eslint-Plugin hilft, die Qualität des Codes zu verbessern, indem es seine logische Struktur überprüft.
  • prettier — . . .

8.


  • .
  • CSS- CSS-in-JS.
  • .

9.


:


- — commitlint


10. Changelog unterstützen


Zu Beginn eines Projekts ist es normalerweise einfach, alle Änderungen im Speicher zu behalten. Während das Projekt wächst, kann Changelog das Haupt-Repository sein, in dem bemerkenswerte Änderungen an der Codebasis beschrieben werden. Monate und sogar Jahre werden vergehen und es wird immer noch für Sie relevant sein.

Die Liste geht weiter und weiter


Ja, hier können Sie je nach Umfang Ihres Projekts und den verwendeten Technologien viele weitere Punkte hinzufügen. Dies wird ausreichen, um viele Front-End-Anwendungen radikal zu verbessern. Fast jedes Prinzip kann schrittweise und abhängig von den Prioritäten angewendet werden, die Sie und Ihr Team festlegen. Sie müssen also nicht darüber nachdenken, wie Sie alles auf einmal anwenden können :)

More articles:


All Articles