Bevor wir euch weiter über unsere Kommunikationsbemühungen erzählen, möchten wir heute wieder ein kurzes Update zur technischen Umsetzung geben. Wie bereits erwähnt, haben die einzelnen Teile fleetports intern Namen bekommen, in diesem Post stellen wir „Akari“ vor, unsere Benutzeroberfläche.

Bei Akari handelt es sich um fleetports Frontend, also die Website die man letztendlich zu Gesicht bekommt. Hier war es für uns von oberster Priorität, auf neueste Webtechniken zu setzen um am Zahn der Zeit zu bleiben und außerdem Modularität zu gewährleisten. Bei dieser neuen Art der Webentwicklung werden Websites in kleine Module unterteilt, die wiederverwendet werden können, anstatt wie früher eine einzelne große Website zu programmieren, die schnell unübersichtlich wird und schwer zu warten ist. Konkret wird eine Kombination aus Vue.js und Webpack verwendet. Vue.js ist für die Modularisierung der Website-Komponenten zuständig und sorgt für einen einheitlichen Datenflusszwischen den einzelnen Komponenten. Mit der Erweiterung Vuex wird ein lokaler Storage eingebunden, der als Single Source of Truth für die angezeigten Daten gilt – so wird sichergestellt, dass Anzeigefehler minimiert werden. Webpack ist ein sogenannter Module Bundler. Er macht aus den vielen kleinen Modulen, die über mehrere Dateien aufgeteilt sind, wieder eine einzelne Website, die ganz normal im Browser angezeigt werden kann. Webpack kann aber noch einiges mehr – es hilft bei der lokalen Entwicklung indem es einen Webserver zur Verfügung stellt und reduziert anschließend die Größe und damit die Ladezeit der Website. Dieses Verfahren wird Tree Shaking genannt und stellt sicher, dass nur jene Skripte eingebunden werden, die auch wirklich benötigt werden. So entsteht eine Webpage mit größtmöglicher Modularität und Entwicklerfreundlichkeit während eine gute Ladezeit erhalten bleibt.

Meldet euch gerne mit Fragen bei uns, sollte es Unklarheiten geben 😊 Bis zum nächsten Post!