# Frontend

Für das Frontend wird das JavaScript-Framework Vue.js (opens new window) verwendet, welches die neuesten JavaScript-Technologien verwendet, um Webprojekte so effizient und resilient wie möglich (opens new window) umzusetzen. Ein grundlegendes Konzept dieses Frameworks ist das Konzept der Singe File Components (opens new window), die einen modularen Aufbau des Projektes erlauben. Dies spiegelt sich auch im Code wider, welcher hierdurch als einzelne, möglichst neutrale Komponenten umgesetzt und je nach Bedarf wie Lego zusammengesetzt und über Projekte hinweg wiederverwendet werden kann.

# Initial Interview

Beim Erstgespräch werden vor Allem technische Details besprochen wie bspw. bestehende Hostingverträge und deren Übernahme, Austausch von Zugangsdaten und / oder der Abschluss eines neuen Hostings.

Es gibt einige Kriterien, die erfüllt sein müssen, damit der Hoster als nachhaltig eingestuft werden kann. Eine umfassende Sammlung dieser Kriterien findet sich im Ratgeber für grünes Webhosting (opens new window) von Utopia. Basierend auf dieser Liste waren für mich BioHost (opens new window) und GreenSta (opens new window) in der engeren Auswahl. Eine weitere gute Option scheint Infomaniak (opens new window) zu sein.

Diese Liste wird von Zeit zu Zeit aktualisiert. Wenn du weitere Optionen kennst, lass es mich wissen!

# Strukturelle Analyse

Auf Grundlage des Designs und Backends wird erst eine Skizze der Komponentenstruktur erstellt. Hier wird evaluiert, welche Komponenten wie aufgebaut werden müssen, damit sie an so vielen Orten wie möglich wiederverwendet werden können. Wichtig ist hierbei der Blick auf die funktionelle Umsetzung. Wenn diese ähnlich oder gleich funktioniert, ist es wahrscheinlich, dass eine Komponente erstellt werden kann, die an zwei unterschiedlichen Stellen im Code benutzt werden kann. Gestalterische Unterschiede können meistens via props, also Optionen, die bspw. eine andere Gestaltung ein- oder ausschalten können, gelöst werden. Sollten die Unterschiede aber einen gewissen Komplexitätsgrad aufweisen, sind separate Komponenten empfehlenswert. Getrennte Komponenten sind auf jeden Fall zu verwenden bei:

unterschiedlicher Funktion
grundverschiedenes Design
komplexe Transitions

# Datenabruf

Diese Struktur wird nun mit den Codekomponenten erstellt. Hierfür werden diese aus der Codebase eingesetzt oder komplett neu erstellt. Zu beachten sind die Web Content Accessibility Guidelines (WCAG) (opens new window) und die WAI-ARIA-Guides (opens new window).

Bereits bestehender Code aus vorherigen Projekten kann und soll wiederverwendet werden. Ziel dieses Schrittes ist es, alle Daten, die im Backend abgefüllt werden können, im Frontend sichtbar zu machen und somit ihre Funktionalität zu etablieren. Die Designvorgaben und hierdurch das Layout sollten hier bereits berücksichtigt werden, da dies oft bereits in der HTML-Struktur mitgedacht werden muss.

Zusammen mit dem Layout gehört die Navigation zu den wichtigsten Elementen des Projektes, da sie die intuitive Bedienung der Seite ermöglicht. Hierbei ist es besonders wichtig, die Seitenstruktur des Projektes vom Inhalt abzuleiten und diesen klar zu strukturieren. Die Darstellung sollte eine möglichst einfach verständliche, an den best practices des Webdesigns orientierte Gestaltung zur Grundlage haben und dieselben Funktionsprinzipen über alle Bildschirmgrössen hinweg aufweisen. Ein wichtiges zu beachtendes Konzept ist hier das mobile first principle (opens new window).

# Funktionalität

In diesem Schritt werden die Funktionen der Seite umgesetzt. Hierzu zählen zum Beispiel sich öffnende und schliessende Overlays und Sektionen (Akkordeons (opens new window)), Filter- und Sortierungsfunktionen, Formulare, etc. Diese werden rein funktionell nach Vorgaben u.a. der Web Content Accessibility Guidelines (WCAG) (opens new window) und des WAI-ARIA-Guides (opens new window) umgesetzt, um bestmögliche accessibility (opens new window) zu ermöglichen. Hilfe zu dieser Umsetzung findet sich im Authoring Practices Guide (opens new window) der Web Accessibility Initiative (WAI) (opens new window).

# Zwischenevaluation

Wenn diese Punkte, sowie extensives Cross-Browser-Testing (opens new window), umgesetzt wurden, ist die erste Umsetzungsphase abgeschlossen und das Projekt ist nun zu ca. 80% fertig. In diesem Schritt kann nun eine erste Version veröffentlicht werden, mit derer die Auftraggebenden ihren abgefüllten Inhalt mit dem finalen Design beurteilen können. Häufig werden in diesem Schritt nochmal etwaige Bugs oder unsauber funktionierende edge cases sichtbar, die im Folgeschritt angepasst werden können.

Um eine Live-Beurteilung zu ermöglichen, wird das Projekt auf einer Subdomain, bspw. dev.domain.com, gehostet. Später, wenn das Feedback eingebunden ist, kann auf die eigentliche Domain umgelenkt werden.

# Optimierung

Die Ergebnisse der Evaluation des Zwischenstandes werden in diesem Schritt umgesetzt. Auch Optimierungen der eingebundenen Medien, bspw. das sizes-Atrribut (opens new window), zählen hierzu sowie, falls nötig, eine grundlegende SEO-Optimierung (opens new window).

# Bugfixing

Die ersten zwei Wochen nach dem Launch sind eine leicht vulnerable Zeit, in der immer wieder unerwartete Fehler auftreten oder Anpassungen notwendig werden können, die vorher noch nicht ersichtlich waren. Dies können zum Beispiel Dinge wie Umbrüche bei langen Texten, unerwartet lange Ladezeiten bei viel Inhalt, Datumsformatierung etc. sein. Deshalb ist es wichtig, dies bei der Projektplanung der Anschlussprojekte im Hinterkopf zu behalten und etwas Puffer für diese Phase einzubauen.