Heim > Web-Frontend > js-Tutorial > KI-Codierungsassistenten, Starter-Vorlagen und mehr: Ein Leitfaden für weniger Arbeit

KI-Codierungsassistenten, Starter-Vorlagen und mehr: Ein Leitfaden für weniger Arbeit

Mary-Kate Olsen
Freigeben: 2024-11-20 00:03:02
Original
258 Leute haben es durchsucht

Sie sind ein JavaScript-Entwickler mit großen Träumen, erstaunliche Dinge zu entwickeln. Doch bevor Sie überhaupt mit der nächsten unglaublichen App-Idee beginnen können, müssen Sie Stunden damit verbringen, Standardcode und Infrastruktur einzurichten. Es müssen die Entwicklungsumgebung konfiguriert, CI-Pipelines eingerichtet und zahlreiche generische Funktionen erstellt werden, wie Benutzerprofile und Authentifizierungsflüsse.

Sie haben das Gefühl, dass dies nicht gerade die beste Nutzung Ihrer Zeit oder Ihres Talents ist. Dann beginnen Sie mit der Suche nach Abkürzungen. Tools und Ressourcen, die die alltäglichen Teile Ihrer App bewältigen können, sodass Sie sich auf die spezielle Funktion konzentrieren können, die Sie erstellen möchten.

Wahrscheinlich verlassen Sie sich bereits in gewissem Maße auf KI-Codierungsassistenten, aber die wahre Magie entsteht, wenn sie mit anderen Entwicklungstools und Ressourcen kombiniert werden, die darauf ausgelegt sind, unsere Projekte anzukurbeln.

Während KI viele Aufgaben rationalisieren kann, ist es wichtig zu verstehen, wie man bewährte Tools und Ressourcen effektiv nutzt. Diese können Ihrem KI-Assistenten dabei helfen, saubereren, besser getesteten und effizienteren Code zu generieren.

Projektvorlagen und KI-Codierungsassistenten

Projektvorlagen bieten vorkonfigurierte Setups für verschiedene Tech-Stacks. Es gibt sie schon seit langem, aber vielleicht widersprüchlich sind sie mit dem Aufkommen von KI-Codierungsassistenten sogar noch wichtiger geworden.

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Beispiel: Starter-Vorlagen auf Vercel.com und Remix.run

Eine Vorlage bietet den besten Kontext für Ihren KI-Assistenten und erspart Ihnen Stunden sorgfältiger Eingabeaufforderungen und langwieriger Gespräche mit Ihrem KI-Kameraden. Eine Vorlage ist detailliert. Es definiert die Entwicklungsumgebung, zu verwendende Abhängigkeiten, die Datenübertragungsmethodik, Frameworks, Zustandsverwaltung, Styling-Lösungen usw.

Eine Vorlage enthält auch Codierungskonventionen und Entwicklungsstandards. Mit einer soliden, getesteten und verifizierten Basis müssen Sie nicht das Ganze Punkt für Punkt zusammensetzen.

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Anpassen eines vorgefertigten Projekts (Vorlage) mit Cursor AI und der @Codebase-Erwähnung

Zusätzlich zur Vorlage selbst unterstützen einige KI-Assistenten (wie Cursor AI) auch eine allgemeine Anweisungsdatei, um die KI bei jedem Vorschlag anzuleiten, den sie macht. Sehen Sie sich beispielsweise diese Sammlung von Cusror AI-Anweisungen an, die von erfahrenen Entwicklern geschrieben wurden und in der .cursorrules-Datei verwendet werden können:

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

https://cursor.directory/

Infrastructure-as-Code- und KI-Codierungsassistenten

Beim Codieren geht es nicht nur darum, Frontend- oder Backend-Logik zu schreiben – es geht darum, das gesamte Ökosystem einzurichten, damit Ihre App erfolgreich ist. Mit Tools wie AWS CDK, Pulumi oder Terraform können Sie Ihre Cloud-Infrastruktur als Code definieren.

Moderne IoC-Tools wie SST sind sich der funktionalen Seite Ihrer Codebasis sehr bewusst. Sie werden in die Logik Ihrer App eingebettet, um eine optimierte und ausfallsicherere Entwicklung zu ermöglichen. Moderne IoC-Tools bieten oft unglaublich abstrakte APIs, die es für Sie und Ihren KI-Begleiter einfacher machen, es zu verstehen.

Durch die Verwendung von IoC kann Ihr KI-Codierungsassistent Sie besser unterstützen. Es kann Ihre Infrastruktur genauso manipulieren und erweitern wie Ihre Logik und Benutzeroberfläche. Ihre Codebasis ist alles, was Ihre KI braucht, um Ihnen gute Dienste zu leisten. Nichts bleibt verborgen, auch nicht die Ressourcen, die Ihre App antreiben.

/**  
* SST Example; the code for nextjs deployment   
* along with the creation of an S3 bucket (acesible to it)  
**/  

const bucket = new sst.aws.Bucket("MyBucket", {  
  access: "public"  
});  

new sst.aws.Nextjs("MyWeb", {  
  link: [bucket]  
});
Nach dem Login kopieren

Selbstgehostete UI-Bibliotheken und AI-Coding-Assistenten

Es gab einen spürbaren Wandel hin zur direkten Einbettung von UI-Komponenten in Projekte, anstatt sie als (unveränderliche) NPM-Pakete zu installieren, was Ihnen mehr Flexibilität beim Optimieren und Erweitern gibt.

Ein großer Vorteil einer eigenen Instanz von UI-Komponenten als Teil Ihrer Codebasis besteht darin, dass es für Ihren KI-Codierungsassistenten einfacher ist, bei Bedarf neue UIs zu erstellen und dabei auf Ihre benutzerdefinierte Sammlung von Komponenten und deren (möglicherweise) geänderte Komponenten zu verweisen Verhalten und APIs.

Einige Komponentensammlungen wie shadcn/ui bieten ein CLI-Tool, das Sie beim „Kopieren-Einfügen“-Prozess unterstützt. Andere Tools wie Bit können Ihnen dabei helfen, dasselbe mit jeder auf der Bit-Plattform gehosteten UI-Bibliothek zu tun. Jede Komponente kann entweder installiert oder in Ihr Projekt kopiert werden.

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Eine benutzerdefinierte Sammlung von Radix-Komponenten, die auf der Bit-Plattform gehostet werden

Im Fall von Bit Platform kann ein dedizierter KI-Assistent auch eine benutzerdefinierte Sammlung gemeinsam genutzter Komponenten basierend auf Ihren bevorzugten Komponentenbibliotheken erstellen.

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Generieren einer gemeinsamen Sammlung benutzerdefinierter Material-UI-Komponenten auf der Bit-Plattform

Composable Codebase und AI Coding Assistant

Composable Software oder Composable Codebases sind zwei eng verwandte Konzepte, die es auch schon seit einiger Zeit in der Softwareentwicklung gibt.

Im Wesentlichen besteht eine zusammensetzbare Codebasis aus modularen, wiederverwendbaren und unabhängig verwaltbaren Komponenten oder Modulen. Diese Module können auf unterschiedliche Weise zusammengestellt werden, um neue Systeme zu erstellen oder bestehende zu modifizieren. Ein System kann während der Build-Zeit, zur Laufzeit oder als Hybrid zusammengestellt werden und das Frontend, Backend und sogar seine Infrastruktur bilden.

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Beispiel: Eine zusammensetzbare React Apollo-Serveranwendung, bestehend aus wiederverwendbaren Komponenten

Der „zusammensetzbare“ Ansatz wird von vielen wegen des standardisierten, wartbaren und äußerst anpassungsfähigen Codes, den er erzeugt, geliebt und übernommen.

Standardisiert“, da dieselben Komponenten im gesamten System wiederverwendet werden. „Wartbar“, weil Komponenten im System ein klares Abhängigkeitsdiagramm bilden, das ihre Beziehung zueinander beschreibt, aber auch, weil die Gesamtzahl der Codezeilen (LOC) drastisch reduziert wird. Schließlich ist es „anpassungsfähig“, da Komponenten in unterschiedlichen Konstellationen eingesetzt werden können, um auf neue Bedürfnisse einzugehen.

KI-Codierungsassistenten geben der Zusammensetzbarkeit eine völlig neue Wendung.

Plattformen wie Bit haben diesen Ansatz übernommen und bieten ein Zuhause für unabhängige Komponenten sowie einen KI-gestützten Codierungsassistenten. Dieser Assistent geht über die einfache Codegenerierung hinaus. Es versteht das Abhängigkeitsdiagramm des Systems und priorisiert die Wiederverwendung vorhandener Komponenten gegenüber der Erstellung neuen Codes von Grund auf.

Diese strategische Wiederverwendung stellt sicher, dass die Codebasis effizient und wartbar bleibt und unnötiges Aufblähen vermieden wird. Da die wiederverwendeten Komponenten außerdem bereits getestet und validiert wurden, ist Ihnen ein besserer Schlaf garantiert.

Sehen Sie sich zum Beispiel die folgende Eingabeaufforderung an den KI-Assistenten von Bit an:

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Generieren einer neuen Funktion mit dem KI-Codierungsassistenten von Bit

Die generierte Komponente wäre eine Zusammensetzung bestehender unabhängiger Komponenten aus Ihrer Codebasis:

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Die KI-generierte Komponente „Kontaktformular“ besteht aus vorhandenen Komponenten aus der Codebasis

Die Komponente wird dann erstellt und getestet, bevor sie Ihrer Codebasis hinzugefügt wird, die gewissermaßen eine kuratierte Sammlung wiederverwendbarer Komponenten ist:

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Eine KI-generierte Komponente wird erstellt und getestet, bevor sie Ihrer Codebasis auf der Bit-Plattform hinzugefügt wird

Abschluss

Niemand hat sich mit dem Codieren beschäftigt, weil es ihm Spaß machte, Boilerplates zu erstellen oder sich mit Pipelines herumzuschlagen. Die wahre Magie entsteht, wenn man sich auf die kreativen, bahnbrechenden Dinge konzentrieren kann, die wirklich wichtig sind. KI-Codierungsassistenten sind hier, um zu helfen. Wenn Sie sie jedoch ohne einen Plan oder eine Methodik verwenden, kann dies oft zu langwierigen und ermüdenden Gesprächen mit Ihrem KI-Partner führen.

Das obige ist der detaillierte Inhalt vonKI-Codierungsassistenten, Starter-Vorlagen und mehr: Ein Leitfaden für weniger Arbeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage