Scaffolding generiert Code per Knopfdruck – das Gerüst für eine Anwendung ist so in Sekundenschnelle erstellt. Die Technik wird von einigen Model-View-Controller Frameworks unterstützt, mit denen der Programmierer die Verwendung der Datenbank spezifizieren kann. Zusammen mit Code-Templates wird automatisch Code zum Erstellen, Lesen, Aktualisieren und Löschen von Datenbankeinträgen generiert. Damit sind die CRUD-Funktionen (create, read, update, delete) direkt implementiert.
Wie funktioniert Scaffolding?
Das Verfahren nimmt dem Programmierer viel Arbeit ab, indem es Standard-Methoden automatisch erzeugt. Beispiel: Sie erstellen eine Klasse „User“ mit den Eigenschaften
- String Name,
- String Vorname,
- String Telefonnummer und
- String E-Mail-Adresse.
Normalerweise müssen Sie jetzt Ansichten (Views) mit Eingabefeldern und Controller für das Erzeugen, Bearbeiten, Anschauen und Löschen der User in Handarbeit erstellen. Scaffolding nimmt Ihnen diese Arbeit ab und generiert automatisch die Ansichten und zugehörigen Controller-Funktionen mithilfe vordefinierter Vorlagen.
Die generierten Dateien eignen sich für das schnelle Prototyping von Anwendungen und das Erzeugen von Testdaten. Zudem dienen die Daten als funktionale Grundlage, die Sie anschließend um zusätzliche Programmlogik und optimierte Ansichten erweitern können.
Yeoman: Scaffolding für moderne Web Applikationen
Abbildung 1 – Yeoman ist ein Scaffolding-Tool für moderne Webapps.
Yeoman ist ein Scaffolding-Tool für Web-Anwendungen. Per Kommando erzeugen Sie ein komplettes Projekt oder nützliche Teile unter Anwendung von „best practices“. Der Programmierer hat so in wenigen Sekunden ein funktionierendes Gerüst als Basis für die weitere Entwicklung zur Verfügung und steigert seine Produktivität. Dafür stellt Yeoman ein Generator-Ökosystem bereit – Generatoren für Angular, React, Backbone, Polymer und viele weitere Projekte stehen zur Verfügung. Insgesamt kommen drei Werkzeuge zum Einsatz:
- Das Scaffolding-Tool „yo“ erzeugt eine neue Anwendung. Es erstellt die Projektstruktur und lädt die notwendigen Ressourcen herunter.
- Die Build-Tools „Gulp“ und „Grunt“ dienen dem Bau, der Vorschau und dem Test von Projekten. Mit Grunt erstellen Sie Tasks, die unterschiedliche Funktionen übernehmen. Unter anderem können Sie damit CSS und JavaScript zusammenfassen und minifizieren oder Bilder optimieren. Hinweis: Grunt ist in JavaScript geschrieben und kann unabhängig von Yeoman verwendet werden.
- Der Package-Manager regelt das Dependency-Management. Bower und npm sind beliebte Optionen.
Yeoman konfiguriert automatisch wichtige Dinge wie Unit-Tests und das Dependency-Management, sodass Programmierer zu Projektbeginn enorm viel Zeit einsparen können. Durch die vorgegebene Struktur hilft es zusätzlich bei der Einhaltung von „Best Practices“. Die große OpenSource-Community stellt zahlreiche Generatoren für verschiedene Technologie-Stacks bereit.
Die Installation von Yeoman
Abbildung 2 – Erst Node.js installieren, dann folgt die Installation von Yeoman per Kommandozeile.
Sie können das auf Node.js basierende Yeoman inklusive Grunt und Bower als Node-Package-Module (npm) installieren. Node.js steht als grafischer Installer für Windows, Mac OS X und Linus bereit. Nach der Installation starten Sie die globale Installation per Kommandozeilen-Befehl:
„npm install -g yo“.
Im Anschluss ist die Installation eines Generators nötig:
„npm install -g generator-webapp“
Das erste Projekt
Im nächsten Schritt bauen Sie Ihr Test-Projekt. Dafür erstellen Sie einen Projektordner und richten dann das Projekt in Sekundenschnelle ein.
Eingabe in Kommandozeile in gewünschten übergeordnetem Ordner:
mkdir meine-test-app
cd meine-test-app
Jetzt wird das Projekt eingerichtet:
„yo webapp“
Abbildung 3 – Die Installation erfolgt per Kommandozeile
Zusätzliche Komponenten wie Bootstrap und Modernizr können optional installiert werden (siehe Abbildung 3). Die fertige Basis für das Projekt ist anschließend in kurzer Zeit erstellt und Sie können mit der Entwicklung beginnen. Interessanter sind weitere Yo-Generatoren mit zusätzlichen Funktionen. Beispielsweise erzeugt der Generator für AngularJS direkt neue Controller und Views. Abbildung 4 zeigt die Ansicht der fertig generierten Webapp – rufen Sie dafür die Datei „index.html“ im Ordner „app“ auf.
Abbildung 4 – Ansicht der fertig generierten Webapp
Probieren Sie die Möglichkeiten von Scaffolding mit Yeoman aus! Folgen Sie dazu am besten der offiziellen Anleitung.
Bildnachweis: Bild von Hitesh Choudhary auf Pixabay
- Kostenlose Übersetzungsprogramme – die besten Online-Tools in der Übersicht - 1. März 2023
- Microsoft Word kostenlos nutzen – die Online-Version mit allen Basisfunktionen - 7. Dezember 2022
- Digitale Transformation im Mittelstand – Status Quo - 6. Dezember 2022
Leider finde ich Blindfisch die Abbildung 4 nicht….
Hallo Hannes,
mein Fehler, hatte einmal Zwischenspeichern vergessen 😉 Die Abbildung ist jetzt sichtbar. Vielen Dank für den Hinweis.
Mit besten Grüßen
Wolf-Dieter