Wenn Sie diese nicht bereits befolgen, sollten Sie sofort damit anfangen

5. November, 2020 – 5 min read

Vor einigen Monaten, begann ich, an einem einjährigen Projekt zur Entwicklung von Webanwendungen zu arbeiten, und mir wurde klar, wie viele Entwickler sich der besten industriellen Praktiken bei der Front-End-Entwicklung von Webanwendungen nicht ganz bewusst sind. Auch ich war mir einiger Praktiken nicht bewusst. Daher habe ich mich entschlossen, diesen Artikel zu schreiben, um mein Wissen und meine Erfahrungen über die besten Praktiken bei der Entwicklung von Webanwendungen weiterzugeben.

Dieser Artikel konzentriert sich auf die besten Praktiken bei der Front-End-Entwicklung, da die Qualität des Front-End-Codes meiner Erfahrung nach der entscheidende Faktor für eine großartige Webanwendung ist, aber die meisten Entwickler halten sich nicht an diese Praktiken und entwickeln ihre eigenen Komponenten. Wenn Front-End-Entwickler diese Praktiken nicht befolgen, wird es sehr schwierig, den Code zu verwalten, es gibt keine Konsistenz im Design, und die Geschwindigkeit der Webanwendung wird sich ebenfalls negativ auswirken. Die Befolgung dieser Praktiken macht den Code sauberer und einfacher zu verwalten und erhöht die Produktivität aller Entwickler.

In diesem Artikel werde ich über die besten Praktiken sprechen, die man bei der Strukturierung der Frontend-Architektur des Projekts, beim Schreiben des Frontend-Codes und bei der Vorbereitung der Bereitstellung befolgen sollte. Fangen wir also an.

Wenn Sie mit dem Projekt beginnen, müssen Sie zunächst die Architektur des Frontend-Codes richtig strukturieren. Und dies sind die besten Praktiken, die jeder Front-End-Entwickler des Projekts befolgen muss.

Strukturierung des Style-Codes

Innerhalb des Styles-Ordners erstellen Sie separate Ordner für Konfigurationen, Base, Layout, Komponenten und Seiten, abhängig von Ihrer Webanwendung. Verwenden Sie eine separate Typographiedatei, um Größen und Farben für alle in der Webanwendung verwendeten HTML-Text-Tags (wie h1, h2,…) zu definieren. Die Farben sollten in einer Variablendatei definiert werden. Weisen Sie die Farben den Variablen mit geeigneten Namen zu und verwenden Sie diese Variablen, wenn die Farben auf der gesamten Website angewendet werden sollen. Fügen Sie diese Stildateien in die Ordner ein, die ähnlich wie im folgenden Bild erstellt wurden.

Sie können diese Dateien dann in die Hauptstildatei importieren. Wenn Sie scss in Ihrer Webanwendung verwenden, dann würde die Datei main.scss dem folgenden Code ähneln.

Strukturierung des JS-Codes

Grundlegend bedeutet die Strukturierung Ihres JavaScript, dass Sie Ihre Dateien aufteilen und Ihr eigenes JavaScript von dem trennen, das von anderen Stellen stammt. Plugins, Vendor und Skripte sind die drei Hauptordner, in die wir JS-Dateien unterteilen können. Plugins würden nützliche Codestücke enthalten, die wir überall in der Webanwendung verwenden, wie z. B. jQuery-Plugins, Vendors wären JavaScript-Code von Drittanbietern wie Frameworks und Bibliotheken, wie z. B. die Slick-Bibliothek, und der Skript-Ordner würde die Skripte enthalten, die wir für unsere Webanwendungslogik schreiben.