5 Dinge, die ich in meinem Ferialpraktikum gelernt habe

Zu Beginn komme ich direkt zu meinem Haupttätigkeitsbereich während meines Ferialpraktikums – dem Programmieren. Mit rund 43% des Codes ist PHP die am meisten verwendete Programmiersprache meines Projektes. Vor allem für die API, an der ich größtenteils gearbeitet habe, wurde ausschließlich PHP verwendet. Ein PHP-Projekt aus dem Nichts zu erschaffen, ist sehr kompliziert und aufwendig. Als Grundlage gibt es deshalb Programmierkonstrukte, sogenannte Frameworks. Gewisse Klassen sind bereits vordefiniert und bilden den Rahmen der Anwendung. Im Projekt, an dem ich mitgearbeitet habe, wurde das Framework Phalcon verwendet. Phalcon ist ein Hochleistungs-PHP-Framework ohne Overhead. Es ist ausschließlich für die Entwicklung der Web-API verwendet. Hier spielt Geschwindigkeit eine große Rolle. Das ist auch der Grund, weshalb sich Phalcon so gut eignet. Weitere Beispiele für PHP-Frameworks sind unter anderem Laravel oder CodeIgniter. Phalcon wird im Gegensatz zu diesen Frameworks als PHP-Extension am Server installiert.

Eine Anwendung besteht jedoch meist nicht nur aus einem Backend. Bei unserem Projekt wurde auch ein Frontend, das die Benutzereingabe verwaltet, implementiert. Dieses holt sich die vorhandenen Daten von der API und sendet Benutzereingaben über die API an das Backend. Ähnlich wie beim Backend gibt es auch für das Frontend Frameworks. Diese basieren jedoch nicht auf PHP, sondern auf JavaScript. Der Vorteil liegt darin, dass Inhalte einer Webseite dynamisch geladen werden, ohne die gesamte Seite neu laden zu müssen. Die Anzahl von JavaScript Frameworks ist in den letzten Jahren erheblich angestiegen. Mittlerweile gibt es unzählige verschiedene solcher Frameworks und man verliert nicht nur schon langsam den Überblick, sondern auch die Auswahl wird immer schwieriger. Die bekanntesten Frameworks sind React, Vue und Angular. JavaScript Frameworks haben einige Vorteile. Bei Vue ist es möglich, eine Webseite in einzelne wiederverwendbare Komponenten zu unterteilen. So wird ein Projekt viel übersichtlicher. Auch das automatische Updaten von Komponenten wird von Vue übernommen. Ändert sich der Wert einer Variable, werden auch alle Komponenten, in denen die Variable verwendet wird, automatisch aktualisiert. Das macht das Laden von Daten über eine API noch einfacher. Die geladenen Daten müssen nur in eine Variable gespeichert werden, und die zugehörigen Komponenten werden aktualisiert.

Nun stellt sich die Frage, wie die abgefragten Daten am besten clientseitig gespeichert werden. Wie für fast jedes Problem gibt es auch hierfür eine passende JavaScript Library. Vuex wurde speziell als Library für Vue.js entwickelt. Es ist ein zentraler Datenspeicher. Alle Komponenten einer Applikation können einfach auf diesen Datenspeicher zugreifen. Der Datenspeicher besteht dabei nur aus einem einzelnen Objekt, das alle Daten enthält. Um eine Variable zu speichern, gibt es sogenannte Actions. Hier kann die Variable vorbereitet werden und es können zusätzlich asynchrone Operationen ausgeführt werden. Zum Beispiel das Abfragen von neuen Daten über eine API. Am Ende der Action muss die Variable – wie man es mit Vuex-Begriffen sagen würde – „eine Mutation commiten“. Mutations sind die einzige Möglichkeit, den Wert des Datenspeichers zu ändern. Hier können dem Objekt des Datenspeichers auch neue Keys zugewiesen werden.

Nuxt ist, wie die oberen zwei Frameworks auch, ein JavaScript Framework. Es wird zum Erstellen von universellen Vue-Anwendungen benötigt. Wieso braucht man so etwas, schließlich erleichtert Vue bereits die Entwicklung von JavaScript Anwendungen? Es gibt jedoch einen kleinen aber feinen Unterschied zwischen den beiden Frameworks: während bei Vue der Inhalt einer Webseite erst clientseitig mithilfe von JavaScript gerendert wird, wird eine Nuxt Anwendung bereits serverseitig gerendert. Mit nur einem Befehl – „nuxt generate“ – kann die statische Webseite erstellt werden. Nuxt übernimmt also das komplette UI-Rendering. Es bleibt trotzdem die Frage offen, wieso man Nuxt nun verwenden sollte. Heutzutage werden oft sogenannte SPAs (Single Page Applications) verwendet. Hierbei handelt es sich um Webseiten, die nur aus einer index.html-Datei bestehen. Der Inhalt wird dynamisch von Seite zu Seite mithilfe von JavaScript geladen. Wird solch eine Webseite erst clientseitig gerendert, kann es zu Problemen bei der Suchmaschinenoptimierung kommen, da anfangs kein Inhalt auf der Seite zu finden ist. Wird die Vue-Anwendung jedoch mit Nuxt bereits serverseitig gerendert, kann das Problem umgangen und die Suchmaschinenoptimierung verbessert werden.

Um meine programmierten Anwendungen nun ausführen zu können, werden verschiedene Services benötigt. In meinem Fall werden nicht nur ein Webserver, auf dem die Anwendung ausgeführt wird, sondern auch weitere Services wie PHP und MySQL, benötigt. Auch hierbei gibt es verschiedene Möglichkeiten, eine Entwicklungsumgebung lokal aufzusetzen. XAMPP oder eine virtuelle Maschine mit VirtualBox wären eine Möglichkeit. Der Nachteil dabei ist, dass jeder Entwickler seine Entwicklungsumgebung selbst aufsetzen und konfigurieren muss. Auch Änderung der Konfiguration müssen meist manuell vorgenommen werden. Docker bietet dafür eine Lösung. Es basiert auf dem Prinzip der Containervirtualisierung. Jeder Dienst, wie PHP, MySQL, oder ein nginx Webserver, kommen in einen eigenen Container. In diesen Containern sind alle Pakete und Konfigurationen enthalten. Die Images der Container und Dockerfiles mit Befehlen, die ein Image beschreiben, lassen sich leicht transportieren. Arbeitet man nun an einem neuen Projekt mit, ist ein Befehl auszuführen und die Entwicklungsumgebung wird automatisch aufgesetzt. In der Praxis können Anwendungen durch die Verwendung von Docker einfach skaliert werden.

Mit all den erwähnten Tools und Erweiterungen können bereits sehr große Anwendungen gebaut werden. Solche Frameworks erleichtern das Programmieren enorm. Applikationen können mit wenig Aufwand professionell entwickelt werden. Aufgrund der Vielzahl von verschiedenen Frameworks ist es jedoch sehr wichtig, nicht den Überblick zu verlieren und immer auf dem neuesten Stand zu bleiben. Um mein Praktikum zusammenzufassen ist zu sagen, dass es nicht nur sehr lehrreich und interessant war, sondern mir auch für die Zukunft viel gebracht hat. Das Arbeiten bei Anexia macht einfach Spaß und das ist meiner Meinung nach das Wichtigste. Falls du auch nach einem Praktikum, einer Lehrstelle oder einem Job suchst, schau bei unseren aktuellen Stellenangeboten vorbei und bewirb dich.