Die »Moderne Webentwicklung« bietet uns die Möglichkeit, schnell mit der produktiven Arbeit zu beginnen. Wir zeigen Euch, wie Ihr mit Containern, Paketen und Versionierung wertvolle Zeit einspart und auch ohne viel Vorwissen noch effektiver werdet!

Veröffentlicht am 08.05.2020

— in Entwicklung

Am 25.11.2019 war es wieder soweit – die TYPO3 Usergroup Rhein-Ruhr e.V. traf sich im Unperfekthaus in Essen. Seit über 10 Jahren kommt am letzten Montag eines jeden Monats eine bunt gemischte Gruppe von TYPO3 Entwicklern, Enthusiasten und Anwendern zusammen, um sich über das TYPO3 CMS auszutauschen, sich bei Problemen zu unterstützen und gegenseitig zu inspirieren.

Du denkst jetzt – Das klingt ja interessant und das wäre auch was für Dich? Wir sind eine offene Gruppe und treffen uns immer in der Zeit von 18:15 bis 21:15 Uhr – schau doch einfach mal vorbei!

Dieses Mal durfte ich einen Vortrag zum Thema “Moderne Webentwicklung” halten und den Anwesenden einen Einblick in die Welt von Containern, Paketen und Versionierung bieten.

Definition »Moderne Webentwicklung«

Was macht »Moderne Webentwicklung« aus?

Die effiziente Arbeit an einem Projekt beginnt für uns bereits bei der Auswahl optimaler Tools – egal ob Entwicklungsumgebung oder alltägliche Helfer – wichtig ist, dass wir bei der Auswahl auf das Best Practice in der Entwicklergemeinde achten. Warum nicht von der Erfahrung und dem Wissen hunderttausender Entwickler profitieren? Spricht man in der Entwicklergemeinde von einem praktischen Tool? Schaut es Euch an, macht Euch damit vertraut und nutzt es! Solange es sich als Best Practice herausgestellt hat, denn – wie auch die Welt sich stetig weiter dreht, ist es auch hier ein Kommen und Gehen – wer würde heute noch mit »SVN« Projekte im Team versionieren oder mit »Photoshop« Webprojekte und Apps gestalten? Bleibt am Ball und haltet Euch auf dem Laufenden!

Aber nicht nur Best Practice ist wichtig. Es ist ebenfalls wichtig, dass die Tools aufeinander abgestimmt sind. Man stelle sich nur vor, dass der Entwickler ein Tool auswählt mit dem er vertraut ist und einfach gern arbeitet, das aber nur bedingt mit den anderen Tools in seinem Projekt kompatibel ist. Im ersten Moment wird der Entwickler gemütlich in seiner Komfortzone seiner Arbeit nachgehen – nach hinten raus wird sich diese Befindlichkeit aber mit mehr Arbeit rächen.  

Ihr arbeitet gern im Team? Ihr möchtet das Kundenprojekt zukunftsfähig gestalten? Wir auch! Und deshalb ist uns besonders wichtig, dass die verwendete Lösung teamfähig und skalierbar ist – beides Anforderungen, bei der uns die »Moderne Webentwicklung« unterstützt.  

»Moderne Webentwicklung« beinhaltet eine zuverlässige Entwicklungsumgebung und ein zuverlässiges Deployment. Die vielen Stunden Arbeit, die wir in ein Kundenprojekt investiert haben, sollen sich auch bei der Veröffentlichung auszahlen und nicht – im Worst Case – neue Probleme aufwerfen.

Was wären optimale Tools, wenn sie sich nur sehr unkomfortabel installieren lassen? Genau – furchtbar! Wir setzen auf Lösungen, bei denen ein unkompliziertes Setup gewährleistet ist, so stellen wir sicher, dass ein leichter Einstieg und ein produktives Arbeiten ab der 1. Arbeitsstunde möglich ist.

Die wichtigsten Punkte noch einmal zusammengefasst:

Definition »Moderne Webentwicklung«

  • Auswahl optimaler Werkzeuge
  • Best Practice in der Entwicklergemeinde
  • Unkompliziertes Setup
  • Teamfähig und skalierbar
  • Zuverlässige Entwicklungsumgebung / reibungsloses Deployment
  • Produktive und effiziente Arbeit an einem Projekt

 

Technologien

In meiner fast 13-jährigen Erfahrung als Backend Entwickler habe ich viele Technologien kennengelernt und noch mehr kommen und gehen sehen. Einige Technologien haben sich aber als Best Practice für uns und allgemein in der Entwicklergemeinde herauskristallisiert. Wir achten darauf, dass unsere IDE folgende Technologien unterstützt:

  • Docker und DDEV
  • yarn
  • composer
  • git

So ist für SOTA Studio jederzeit sichergestellt, dass wir schnell produktiv und effizient arbeiten können. Aber nicht nur die alten Hasen und festen Mitglieder unseres Team können mit diesen Technologien schnell einsteigen – auch neue Teammitglieder können dank unserer vorab getätigten Auswahl der optimalen Tools unkompliziert einsteigen und schnell mit ihrer Arbeit beginnen. Beispiel für einen Best Case gefällig?

  1. Tools installieren
  2. Quellcode klonen
  3. Ggf. Pakete und Abhängigkeiten installieren
  4. Ggf. Daten(bank) migrieren
  5. Umgebung starten
  6. Loslegen

Das dauert keine 15 Minuten und Eure neue Ressource kann mit der Arbeit beginnen!

 

Wie Docker und Container Euer Leben vereinfachen

Stellt Euch vor, Ihr könntet mit einer Konfiguration alle Betriebssysteme (Windows, Mac, Linux) bespielen. Und stellt Euch dann noch vor, dass Eure Entwicklungsumgebung vom restlichen System abgekapselt ist. Klingt zu schön um wahr zu sein? Da haben wir eine freudige Nachricht für Euch: Docker macht’s möglich!

Docker virtualisiert für Euch das Dateisystem, die Datenbank und weitere »Server« und »Services«. Und zwar in einer Entwicklungsumgebung, die abgekapselt vom restlichen System ist. Dies bringt Euch Sicherheit und Geschwindigkeit, da das Host-Betriebssystem nicht kompromittierbar ist.

Docker bietet Euch eine sichere lokale Entwicklung, unabhängig von Web-Hostern. Dies ist auch – aber nicht nur – interessant bei Projekten, die mit einer langen Entwicklungszeit einhergehen.

Docker arbeitet mit sogenannten »Containern«. Jeder Container steht für ein Softwarepaket und hat eine eigene Aufgabe. Zum Beispiel: Webserver, Datenbank und Suchserver. Die Container kommunizieren miteinander, funktionieren aber unabhängig voneinander.

Aber wie funktioniert das eigentlich? Mit einer einzigen Docker-Konfigurationsdatei weiß Docker – im Speziellen »Docker Compose« – welche Container erstellt werden sollen, welche Software ein Container benötigt, wie Container erreichbar sein und wie sie untereinander kommunizieren sollen.

Die in den Containern anfallenden und sich ändernden Daten, wie etwa Quellcode und Datenbank, können mühelos gespeichert und versioniert werden. Und stehen somit bei Bedarf dem Team zur Verfügung.

Ihr habt jetzt schon im Geiste Eure Zeit- und Arbeitsersparnis ausgerechnet? Dann haben wir jetzt noch eine weitere Variable für Eure Gleichung: DDEV!

DDEV automatisiert für uns die Arbeiten, die wir mit Docker manuell machen würden. Ihr sagt DDEV einfach, an welchem Projekttyp (z. B. TYPO3 CMS oder Shopware) Ihr arbeiten möchtet und DDEV nimmt die Installation selbstständig und vollumfänglich für Euch vor. Zu schön um wahr zu sein? Probiert es aus – Ihr werdet begeistert sein!

Die wichtigsten Punkte noch einmal zusammengefasst:

  • Virtualisierung von Dateisystem, Datenbank und weiteren »Servern« und »Services«
  • Abkapselung der Entwicklungsumgebung vom restlichen System
  • Vom Betriebssystem unabhängiges Setup
  • Host-Betriebssystem nicht kompromittierbar
  • Sichere lokale Entwicklung
  • Einfach auf anderen Geräten reproduzierbar

 

Paketverwaltung – Abhängigkeiten und Versionen unter Kontrolle

Pakete, Versionen und Abhängigkeiten – all das habt Ihr mit den wundervollen Helfern »homebrew«, »yarn« und »composer« allzeit im Griff! Während »homebrew« Anwendungen, Tools und Bibliotheken auf macOS installiert, nutzt man »yarn« für das Frontend und »composer« für php-Bibliotheken. Alle drei Paketverwaltungen haben sich als Best Practise in der Entwicklergemeinde herauskristallisiert und erleichtern unseren Arbeitsalltag enorm. Wie sie das tun? – Mit einer zentralen Verwaltung von Bibliotheken, Paketversionen und Abhängigkeiten.

Die Paketverwaltungen installieren automatisch die benötigten Pakete in der gewünschten bzw. benötigten Version. Dies kann die aktuellste Version eines Paketes sein, aber auch eine ältere Version. So ist sichergestellt, dass auch Projekte, die auf einer älteren Version eines Systems (alte php- oder CMS-Version) erstellt wurden, unkompliziert bearbeitet werden können.

Und wie das im Leben so ist – manchmal bestehen Abhängigkeiten. Viele Pakete benötigen andere Pakete, um einwandfrei arbeiten zu können. Die Paketverwaltung übernimmt hier einen großen Teil Eurer Arbeit, indem sie prüft, welche Pakete in welcher Version obligatorisch sind, damit Euer benötigtes Paket funktioniert. Diese weiteren Pakete werden ebenfalls automatisch installiert. Und – ein netter Nebeneffekt – direkt am dafür vorgesehenen Ort abgelegt.  

Die wichtigsten Punkte noch einmal zusammengefasst:

  • Zentrale Verwaltung von Paketen
  • Verwaltung von Abhängigkeiten
  • Verwaltung von Paketversionen
  • Betriebssystem → homebrew (macOS)
  • Frontend → yarn
  • Backend → composer (php)

 

Versionierung – git hat’s im Griff

Push und Pull – der Alltag eines Entwicklers, der agil arbeitet. Jeder Entwickler, der in einem Team an einem (großen) Projekt arbeitet, steht vor der Herausforderung, dass alle Teammitglieder zu jeder Zeit den selben Entwicklungsstand haben. Und einige von Euch waren sicherlich schon mal mit dem folgenden Problem konfrontiert, – Die Version von Entwickler A kollidiert in Teilen mit der Version von Entwickler B. An dieser Stelle leistet git wertvolle Arbeit.

Es bietet uns eine dezentrale Quellcodeverwaltung, sodass alle Projektbeteiligten jederzeit über den aktuellen Stand verfügen. Anhand sogenannter »Branches« oder Versionszweige, können Entwickler an unterschiedlichen Funktionen und Änderungen arbeiten. Nach Abschluss der Arbeiten, werden diese in den Hauptzweig übernommen. Das ist eine gängige Praxis in der Softwareentwicklung.

Nehmen wir einmal an, die aktuelle Version ist 1.0.0 und der Hauptzweig heißt »master«. An einer neuen Version 1.1.0 wird in den Zweigen »dev/feature-x« und »dev/feature-y« gearbeitet. Anschließend wandern beide Arbeiten an neuen Funktionen in den »master«. Dieser Stand kann mit einem Tag (englisch für Etikett) versehen werden – sagen wir »v1.1.0« – und schon ist der Workflow perfekt.

Natürlich kann es auch zu Konflikten kommen, wenn beispielsweise zwei oder mehr Personen an der selben Datei arbeiten. Bei dem Zusammenführen dieser Arbeiten können sogenannte »Merge-Konflikte« entstehen. Und das ist eine weitere Stärke von git. Es hebt in Konflikt stehende Dateien und Bereiche hervor und lässt uns entscheiden, welchen Stand wir wünschen.

Bei einem Konflikt gibt es zwei sehr praktische Beispiele.

  • Zwei entwickelte Features fügen CSS hinzu – margin und padding am selben Element – wir wollen alles behalten.
  • Die Methode einer php-Klasse wurde überarbeitet – wir wollen den neuen Code behalten oder führen beide Änderungen im Rahmen eines kleinen Refactorings zusammen.

Und das Beste: jede Änderung kann ganz oder teilweise rückgängig gemacht werden. So ist es sogar problemlos möglich einen Stand von vor Monaten oder Jahren wiederherzustellen. Und da alle Änderungen in der Regel über einen namentlichen Autor, einen Zeitstempel sowie Kommentar verfügen, ist die Arbeit stets nachvollziehbar und transparent.

Die wichtigsten Punkte noch einmal zusammengefasst:

  • Dezentrale Quellcode-Verwaltung
  • Versionierung von Code via Tags, Branches und mehr
  • Änderungen können rückgängig gemacht werden (Beispiel: Update vom TYPO3 CMS Core oder Extensions)
  • Eigenhosting (GitLab) oder Cloud Hosting (Bitbucket, Github)

 

Fazit

Zeit ist Geld – auch und vor allem bei der Entwicklung von Projekten. Wer will sich da schon gern mit mühevoller Einrichtungsarbeit aufhalten?! Mit der Auswahl der optimalen Tools können wir Entwickler uns auch mit wenig Vorkenntnissen mehrere Tage Einrichtungszeit sparen und stattdessen direkt mit der produktiven Arbeit beginnen.

Die »Moderne Webentwicklung«  mit TYPO3 CMS und DDEV funktioniert mit nur 5 Befehlen!

Allgemeine Einrichtung – einmalig

  • Docker via homebrew installieren
  • DDEV via homebrew installieren


Projektrelevante Einrichtung

  • TYPO3 CMS Distribution via composer laden → composer create-project
  • DDEV initialisieren → ddev config
  • DDEV starten → ddev start

Und schon könnt Ihr loslegen!

Um das Ganze noch einmal zum »Mitnehmen« zu haben, gibt es hier eine Präsentation zu dem Thema als Download.
 

Artikelbild »Php code on dark background in code editor« von zurich84

Andy Hausmann


Andy Hausmann ist Inhaber von SOTA Studio, freier Dozent und Stratege für moderne Markenführung und Kommunikation. Mit über 10 Jahren Erfahrung im Bereich der Webentwicklung ist er zudem Spezialist für nachhaltige und skalierbare Businesslösungen.