Ich programmiere seit zwölf Jahren und habe mit vielen Sprachen gearbeitet. Dazu gehören , , , , und schließlich . Jede Sprache oder jedes Framework hat ihre eigenen Regeln. Beispielsweise verwendet für Funktionsnamen . C C++ Java Python C# JavaScript Rust die Groß-/Kleinschreibung Allerdings gibt es bestimmte Regeln, Werkzeuge und Muster, die ich mittlerweile zu schätzen weiß. Diese baue ich in meine Frontend-Anwendungen ein. Diese Regeln finden bei mir einfach mehr Anklang und machen das Codieren zu einem reibungsloseren Prozess. Hier sind einige, die mir besonders gut gefallen: Funktionale Programmierung Mein erster Tipp kommt von C, der ersten Sprache, die ich gelernt habe. Erinnern Sie sich, als wir geschrieben haben? Wenn ich nur daran denke, bekomme ich Gänsehaut. Als React auf funktionale Komponenten umstieg, wurde der Code nicht nur einfacher zu lesen, sondern auch einfacher zu testen. React mit Klassen Es stimmt auch besser mit den Prinzipien der funktionalen Programmierung überein. Dieser Ansatz eignet sich hervorragend für Frontend-Frameworks, da diese sich häufig auf die Erstellung wiederverwendbarer Codeteile konzentrieren. Der Einsatz funktionaler Programmierung in der Frontend-Entwicklung war für mich schon immer eine hilfreiche Strategie, um dieses Konzept zu verstehen und auch neue Frontend-Funktionen zu entwickeln. Das Befolgen der Prinzipien der funktionalen Programmierung ist ein Muss in jeder meiner Frontend-Anwendungen. Wenn Sie mit funktionaler Programmierung nicht vertraut sind, empfehle ich Ihnen dringend, sich damit zu befassen. Dieser Punkt steht nicht ohne Grund am Anfang dieser Liste. Die Vorteile, die es für Ihren Entwicklungsprozess mit sich bringen kann, sind erheblich. weiter Codeformatierer Als ich zum ersten Mal mit dem Programmieren begann, habe ich der Codeformatierung nicht viel Aufmerksamkeit geschenkt. Ich schätze, alles begann an der Universität, wo ich C++ auf meiner coolen mit einem weißen Thema lernte. CodeBlocks-IDE Wenn ich mir ansehe, kann ich erkennen, dass ich zur Formatierung nur Leerzeichen verwendet habe. Ich habe keine Tools verwendet, um das automatisch zu erledigen. meinen alten Code von 2016 auf GitHub Jetzt ist mir klar, dass das ein Fehler war. Wenn Sie in Ihrem Projekt etwas automatisieren können, sollten Sie das auf jeden Fall tun. Jetzt richte ich und immer zu Beginn jedes Projekts ein. Wer dafür nicht viel Zeit aufwenden möchte, kann auf vorgefertigte Konfigurationen wie die von zurückgreifen. Prettier ESLint Airbnb Vertrauen Sie mir, Sie werden es nicht bereuen! Oh, und vergessen Sie nicht, in Ihrer IDE eine automatische Formatierung beim Speichern von Dateien einzurichten! Vorab festgeschriebene Aktionen Da Sie nun über fantastische Formatierer verfügen, lasst uns diese automatisieren! Ich kann mich nicht genau erinnern, wann ich angefangen habe, Pre-Commit-Hooks zu verwenden, aber sie waren eine große Hilfe in meinen Projekten. Warum manuell formatieren, wenn es vor jedem Commit automatisiert werden kann? Tools wie und machen diese Automatisierung möglich. Husky Lint-Staging Kebab-Fall für Dateinamen Auch wenn viele Fans und Kritiker hat, konzentriere ich mich gerne auf das Positive. Angular ist oft die erste Wahl für große Unternehmen und große Anwendungen. Ich denke, dass viele der in Angular getroffenen Entscheidungen darauf abzielten, die Wartung zu vereinfachen. Angular Deshalb habe ich mich entschieden, kebab-case für alle meine Frontend-Projekte zu verwenden. Es bietet einige Vorteile, wie zum Beispiel: : Ich muss mir keine Gedanken darüber machen, ob ich Pascal-Case, Camel-Case oder Snake-Case (falls Sie es vorziehen) verwenden soll. Beim Dönerkoffer gibt es nur eine Möglichkeit. Einfachheit : Wenn Sie in einem Team arbeiten, kann die Übernahme einer einzigen Namenskonvention wie „kebab-case“ dazu beitragen, dass alle auf dem gleichen Stand sind und das Projekt organisiert bleibt. Vergessen Sie nicht, dass Sie die Verwendung von kebab-case über die Eslint-Regel mithilfe Pakets erzwingen können: Konsistenz des Unicorn- 'unicorn/filename-case': [ 'error', { case: 'kebabCase', }, ], : Verschiedene Betriebssysteme gehen unterschiedlich mit Dateinamen um. Beispielsweise ist Windows die Groß- und Kleinschreibung egal, Linux hingegen schon. Durch die Verwendung von „kebab-case“, das Kleinbuchstaben und Bindestriche verwendet, vermeide ich Probleme. Plattformübergreifende Kompatibilität : Es gibt ein Problem beim Umbenennen einer Datei von Kleinbuchstaben in Großbuchstaben in Git. Mit der Dönerhülle muss ich mir darüber keine Sorgen machen. Keine Git-Probleme Ich mag es, die Dinge einfach zu halten. Wenn ich mein Leben einfacher machen und einige Vorteile daraus ziehen kann, bin ich dafür. Verwenden von Tags für Dateitypen Eine andere Sache, die ich von Angular übernommen habe, ist die Benennung von Dateien. Angular empfiehlt, Dateien so zu benennen, dass sie ihre Funktion und ihren Typ widerspiegeln. Ich finde, dass es mir dadurch leichter fällt, mich in der Struktur eines Projekts zurechtzufinden und es zu verstehen. In Angular besteht der Dateiname normalerweise aus drei Teilen: dem Funktionsbereich, der Rolle der Datei und dem Dateityp. zeigt beispielsweise, dass die Datei eine Komponente für die Funktion und eine TypeScript-Datei ist. ist ein Dienst für . heroes.component.ts heroes heroes.service.ts heroes Ich bin kein großer Fan von , verwende aber eine ähnliche Struktur für meine React-Komponenten. Hier ist ein Beispiel: services my-component ├── my-component.component.tsx ├── my-component.type.ts ├── my-component.style.css ├── my-component.spec.tsx └── my-component.story.mdx Ich verwende dieses Muster auch für meine Hooks und Funktionen. Dieses Muster lehrt mich auch, meine Tests neben den zugehörigen Dateien zu platzieren. Automatisieren Sie die Codegenerierung Das zuvor erwähnte Muster ist sehr hilfreich, aber wir können es durch Automatisierung noch besser machen. , und ich verwende immer , um dasselbe zu tun. Das Vorlagensystem von Plop ist sehr leistungsfähig, aber vor allem spart es Zeit. Angular CLI ermöglicht es Benutzern, Code automatisch zu generieren plop Durch die Automatisierung muss ich nicht viel Zeit damit verbringen, über die Grundstruktur einer Komponente nachzudenken. Diese Aufgabe kann automatisiert werden, sodass ich mich auf das konzentrieren kann, was ich wirklich tun möchte. Verwenden einer „Domain“ Ich werde hier nicht im Detail erklären, was eine ist. Wenn Sie mehr darüber erfahren möchten, empfehle ich Ihnen, zu lesen. Im Moment arbeite ich mit einem Team von Full-Stack-Entwicklern und wir haben festgestellt, dass es wirklich nützlich ist, eine in unserem Frontend-Projekt zu haben. domain diesen Artikel Domänenschicht Hier platzieren wir alle unsere Haupttypen und Operationen. Es dient als „Quelle der Wahrheit“ in unserer App. Wenn Sie sehen möchten, wie ich in meinen Apps mit „Domänen“ umgehe, können Sie sich ansehen. Ich verbringe dort viel Zeit damit, dieses Thema zu beschreiben. diesen Artikel Testen Sie Ihre Architektur Bei unserer Arbeit mit sind wir einmal auf ein Problem gestoßen, bei dem die Logik über mehrere Ebenen hinweg verwechselt wurde, etwa bei der Verwendung eines im Repository innerhalb unserer Domäne definierten Typs. Aus Sicht einer sauberen Architektur ist das ein No-Go, aber jeder macht Fehler. Kotlin Da entdeckten wir , ein Tool zum Unit-Testen unserer Architektur. Es prüft grundsätzlich, ob wir unsere Architektur korrekt einhalten. ArchUnit Wenn Sie eine bestimmte Architektur beibehalten, kann es nützlich sein, über ein Tool zu verfügen, mit dem Sie überprüfen können, ob diese nicht irgendwann kaputt gegangen ist. Ein Tool wie kann in dieser Hinsicht von unschätzbarem Wert sein. Dependency-Cruiser Und damit ist meine wesentliche Liste von Mustern aus anderen Sprachen und Frameworks zur Verbesserung Ihrer Frontend-Projekte abgeschlossen. Ich hoffe, dass Sie diese Informationen hilfreich fanden und dass mindestens eine dieser Strategien Sie dazu inspiriert hat, sie in Ihrer eigenen Arbeit umzusetzen!
