![\"JOR_Patrick_2018\"](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2018\/07\/JOR_Patrick_2018.jpg\")
<\/a><\/p>\nViele fragen sich bestimmt, was ein Praktikant bei einem weltweit agierenden Unternehmen wie Anexia eigentlich macht. Mit f\u00fcnf Dingen, die ich in meinem Ferialpraktikum gelernt habe, werde ich euch diese Frage beantworten.<\/p>\n
<\/p>\n
<\/p>\n
Phalcon<\/h2>\n
Zu Beginn komme ich direkt zu meinem Hauptt\u00e4tigkeitsbereich w\u00e4hrend meines Ferialpraktikums \u2013 dem Programmieren. Mit rund 43% des Codes ist PHP<\/a> die am meisten verwendete Programmiersprache meines Projektes. Vor allem f\u00fcr die API, an der ich gr\u00f6\u00dftenteils gearbeitet habe, wurde ausschlie\u00dflich PHP verwendet. Ein PHP-Projekt aus dem Nichts zu erschaffen, ist sehr kompliziert und aufwendig. Als Grundlage gibt es deshalb Programmierkonstrukte, sogenannte Frameworks<\/a>. Gewisse Klassen sind bereits vordefiniert und bilden den Rahmen der Anwendung. Im Projekt, an dem ich mitgearbeitet habe, wurde das Framework Phalcon<\/a> verwendet. Phalcon ist ein Hochleistungs-PHP-Framework ohne Overhead. Es ist ausschlie\u00dflich f\u00fcr die Entwicklung der Web-API verwendet. Hier spielt Geschwindigkeit eine gro\u00dfe Rolle. Das ist auch der Grund, weshalb sich Phalcon so gut eignet. Weitere Beispiele f\u00fcr PHP-Frameworks sind unter anderem Laravel oder CodeIgniter. Phalcon wird im Gegensatz zu diesen Frameworks als PHP-Extension am Server installiert.<\/p>\n <\/p>\n 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 \u00fcber die API an das Backend. \u00c4hnlich wie beim Backend gibt es auch f\u00fcr 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\u00fcssen. Die Anzahl von JavaScript Frameworks ist in den letzten Jahren erheblich angestiegen. Mittlerweile gibt es unz\u00e4hlige verschiedene solcher Frameworks und man verliert nicht nur schon langsam den \u00dcberblick, sondern auch die Auswahl wird immer schwieriger. Die bekanntesten Frameworks sind React, Vue und Angular. JavaScript Frameworks haben einige Vorteile. Bei Vue<\/a> ist es m\u00f6glich, eine Webseite in einzelne wiederverwendbare Komponenten zu unterteilen. So wird ein Projekt viel \u00fcbersichtlicher. Auch das automatische Updaten von Komponenten wird von Vue \u00fcbernommen. \u00c4ndert sich der Wert einer Variable, werden auch alle Komponenten, in denen die Variable verwendet wird, automatisch aktualisiert. Das macht das Laden von Daten \u00fcber eine API noch einfacher. Die geladenen Daten m\u00fcssen nur in eine Variable gespeichert werden, und die zugeh\u00f6rigen Komponenten werden aktualisiert.<\/p>\n <\/p>\n Nun stellt sich die Frage, wie die abgefragten Daten am besten clientseitig gespeichert werden. Wie f\u00fcr fast jedes Problem gibt es auch hierf\u00fcr eine passende JavaScript Library. Vuex<\/a> wurde speziell als Library f\u00fcr Vue.js entwickelt. Es ist ein zentraler Datenspeicher. Alle Komponenten einer Applikation k\u00f6nnen einfach auf diesen Datenspeicher zugreifen. Der Datenspeicher besteht dabei nur aus einem einzelnen Objekt, das alle Daten enth\u00e4lt. Um eine Variable zu speichern, gibt es sogenannte Actions. Hier kann die Variable vorbereitet werden und es k\u00f6nnen zus\u00e4tzlich asynchrone Operationen ausgef\u00fchrt werden. Zum Beispiel das Abfragen von neuen Daten \u00fcber eine API. Am Ende der Action muss die Variable \u2013 wie man es mit Vuex-Begriffen sagen w\u00fcrde \u2013 \u201eeine Mutation commiten\u201c. Mutations sind die einzige M\u00f6glichkeit, den Wert des Datenspeichers zu \u00e4ndern. Hier k\u00f6nnen dem Objekt des Datenspeichers auch neue Keys zugewiesen werden.<\/p>\n <\/p>\n Nuxt<\/a> ist, wie die oberen zwei Frameworks auch, ein JavaScript Framework. Es wird zum Erstellen von universellen Vue-Anwendungen ben\u00f6tigt. Wieso braucht man so etwas, schlie\u00dflich erleichtert Vue bereits die Entwicklung von JavaScript Anwendungen? Es gibt jedoch einen kleinen aber feinen Unterschied zwischen den beiden Frameworks: w\u00e4hrend bei Vue der Inhalt einer Webseite erst clientseitig mithilfe von JavaScript gerendert wird, wird eine Nuxt Anwendung bereits serverseitig gerendert. Mit nur einem Befehl \u2013 \u201enuxt generate\u201c \u2013 kann die statische Webseite erstellt werden. Nuxt \u00fcbernimmt 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.<\/p>\n <\/p>\n Um meine programmierten Anwendungen nun ausf\u00fchren zu k\u00f6nnen, werden verschiedene Services ben\u00f6tigt. In meinem Fall werden nicht nur ein Webserver, auf dem die Anwendung ausgef\u00fchrt wird, sondern auch weitere Services wie PHP und MySQL, ben\u00f6tigt. Auch hierbei gibt es verschiedene M\u00f6glichkeiten, eine Entwicklungsumgebung lokal aufzusetzen. XAMPP oder eine virtuelle Maschine mit VirtualBox w\u00e4ren eine M\u00f6glichkeit. Der Nachteil dabei ist, dass jeder Entwickler seine Entwicklungsumgebung selbst aufsetzen und konfigurieren muss. Auch \u00c4nderung der Konfiguration m\u00fcssen meist manuell vorgenommen werden. Docker<\/a> bietet daf\u00fcr eine L\u00f6sung. 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\u00fchren und die Entwicklungsumgebung wird automatisch aufgesetzt. In der Praxis k\u00f6nnen Anwendungen durch die Verwendung von Docker einfach skaliert werden.<\/p>\n Mit all den erw\u00e4hnten Tools und Erweiterungen k\u00f6nnen bereits sehr gro\u00dfe Anwendungen gebaut werden. Solche Frameworks erleichtern das Programmieren enorm. Applikationen k\u00f6nnen mit wenig Aufwand professionell entwickelt werden. Aufgrund der Vielzahl von verschiedenen Frameworks ist es jedoch sehr wichtig, nicht den \u00dcberblick zu verlieren und immer auf dem neuesten Stand zu bleiben.<\/p>\n<\/p>\nVue.js<\/h2>\n
<\/p>\nVuex<\/h2>\n
<\/p>\nNuxt<\/h2>\n
<\/p>\nDocker<\/h2>\n
\nFazit<\/h2>\n