Frontend Block Michelle Roksandic
In meinem dritten Ausbildungsblock konnte ich einen Einblick in die Frontend-Entwicklung der MySign gewinnen und viele wertvolle Erfahrungen sammeln.
Über einen Zeitraum von ungefähr acht Wochen hatte ich zusammen mit meinem Mitlernenden Levin die Gelegenheit, in die Frontend-Entwicklung der MySign einzutauchen. Alles begann mit einer obligatorischen Einführung durch unseren Ausbilder Välu, der seit Jahren als Frontend-Entwickler tätig ist. Dank meines Basislehrjahres konnte ich vor knapp einem Jahr bereits einige Erfahrungen sammeln, weshalb diese Einführung eine gute Wiederholung und Auffrischung meines Wissens war. Darüber hinaus lernte ich viele neue Bereiche und Themen kennen, von denen ich bisher nichts gehört hatte, doch Välu erklärte uns alles geduldig und beantwortete alle unsere Fragen.
Zunächst beschäftigten wir uns mit dem grundlegenden Aufbau des Frontends, der Zusammenarbeit der beiden Sprachen HTML und CSS und wie die Programmiersprache JavaScript dabei unterstützend wirken kann. Kurz gesagt, sagen wir dem Browser mit diesen Beschreibsprachen (HTML und CSS), wie der grundlegende Aufbau der Website ist und wie der Content auszusehen hat.
Zum Grundaufbau gehört auch die klare Unterscheidung zwischen Frontend und Backend. Das Frontend ist die Präsentationsebene einer Website, also der Teil, den die Benutzer sehen. Hier muss sichergestellt werden, dass die Benutzeroberfläche ordnungsgemäss und einfach funktioniert, damit das Benutzererlebnis so positiv wie möglich ausfällt. Dazu gehört auch, dass die Seite auf verschiedenen Browsern, Betriebssystemen und Bildschirmgrössen funktioniert. Das Backend hingegen arbeitet im Hintergrund und enthält alle Komponenten, die die Nutzer nicht sehen, wie zum Beispiel Datenbanken.
First try
Bekanntlich lernt man am besten, wenn man das neu erlernte Wissen direkt anwendet. Unsere erste Aufgabe bestand darin, einen Screenshot einer Website, den wir von Välu erhalten hatten, nachzubauen. Dabei gab es keine spezifischen Vorgaben, wie wir vorgehen sollten; wir sollten die Seite einfach so gut wie möglich nachstellen, dabei aber eigene Bilder und Farben verwenden. Diese Aufgabe war ein guter Start, um wieder in den Arbeitsfluss zu kommen, denn nach einem Jahr ohne Codieren vergisst man schnell einiges.
Links ist der Screenshot von Välu und rechts die Seite, die ich nachgebaut habe
Als wir fertig waren, nahm sich Välu die Zeit, unseren Code zu überprüfen und zu korrigieren. Dabei achtete er darauf, was man hätte schöner schreiben können und vor allem, wie wir den Code vereinfachen könnten. Gerade bei grösseren Projekten ist es wichtig, den Code so einfach und kurz wie möglich zu halten, denn dies verringert die Menge an Code, die geschrieben werden muss, und der Browser muss weniger laden. Das verkürzt nicht nur die Arbeitszeit der Entwickler, sondern verbessert auch das Benutzererlebnis der Besucher.
Dafür gibt es unter anderem das sogenannte «BEM» (Block Element Modifier). Dies ist eine Methode, um ein CSS-Stylesheet ordentlich zu strukturieren. Ebenfalls neu dazugekommen ist die Templating-Sprache «Nunjucks». Damit können wir sich wiederholende Elemente vermeiden. Ein Beispiel dafür ist der Header. Der Header mit der Navigation und dem Logo bleibt auf jeder Seite gleich, sodass man ein separates File erstellen kann, das auf jeder Inhaltsseite am Anfang eingebunden wird. So muss der Code für den Header nicht auf jeder Seite neu geschrieben werden, was den Zeitaufwand verringert und den Code übersichtlicher macht.
Schnuppertag
Als wir unsere erste Übung abgeschlossen hatten, stand bereits das nächste kleine Projekt bevor: der Schüler-Schnuppertag. Da wir unseren Ablauf etwas geändert hatten, mussten wir eine kleine Website erstellen, die die SchülerInnen als Anleitung nutzen konnten. Um den Aufbau und das Styling kümmerte sich Välu, während ich mich weiterbildete.
In der MySign nutzen wir nicht das «normale» CSS, sondern das sogenannte Tailwind CSS. Dabei wird das CSS in das gleiche File wie der HTML-Code geschrieben. So muss man sich keine Gedanken mehr über Klassennamen machen, da diese vordefiniert sind und genau beschreiben, was sie tun. Da ich noch nie mit Tailwind CSS gearbeitet hatte, musste ich mich erst darüber informieren, wie es funktioniert und aufgebaut ist. Schlussendlich war ich noch für die Content-Befüllung und das Erstellen einer neuen Seite zuständig. Dabei konnte ich gleich ausprobieren, wie Tailwind CSS funktioniert.
Frontend-Block Präsentation
Um den Block abzuschliessen, bekamen wir einen etwas anderen Auftrag. Normalerweise müssen wir eine Präsentation über unser neu erworbenes Wissen vorbereiten, doch dieses Mal sollten wir uns zusammensetzen und eine Website erstellen, auf der alle Informationen zu unserem Frontend-Block enthalten sind. So können wir auch gleich an einem realen Beispiel zeigen, was wir alles gelernt haben.
Dafür habe ich zuerst ein neues Projekt im GitLab erstellt, die benötigten Berechtigungen freigegeben und das Projekt in meinen Ordner gezogen. Das gibt mir die Möglichkeit, meine Änderungen zu «committen und pushen», sodass Levin die neueste Version «pullen» und damit arbeiten kann. Zudem kann man jegliche Änderungen auch noch Jahre später anschauen, nachvollziehen und gegebenenfalls wiederherstellen.
Von nun an arbeitete ich die Website von Grund auf, indem ich nach und nach die Inhaltsseiten erstellte und direkt das SCSS-Styling hinzufügte. Da ich mit Tailwind CSS noch nicht so vertraut war, habe ich mich dafür entschieden, ein externes SCSS-File einzubinden.
Fazit
Meine Zeit im Frontend hat mir sehr gut gefallen und ich konnte viele wertvolle Informationen und Erfahrungen mitnehmen. Unter anderem weiss ich jetzt, wie wir hier bei MySign vorgehen, wie ich mit GitLab arbeiten kann und ich habe während meines Blocks viele nützliche Tipps und Tricks gelernt.
Besonders gefallen hat mir, dass ich jeden Tag etwas Neues lernen konnte und mit der Zeit fiel es mir viel leichter, Fehler zu erkennen und strukturierter zu arbeiten. Programmieren erfordert viel Training und Geduld. Die Technik entwickelt sich rasend schnell weiter, sodass man immer auf dem neuesten Stand bleiben und sich stetig weiterbilden muss, um mithalten zu können. Genau das ist einer der Gründe, warum ich die Frontend-Entwicklung so spannend finde. Ein weiterer Grund ist, dass es mir Spass macht, etwas Neues zu lernen und zu sehen, wie ich mich mit der Zeit verbessere. Klar kann es manchmal sehr frustrierend sein, wenn man seine eigenen Fehler nicht findet und nichts mehr funktioniert, doch die eigenen Fortschritte und Erfolge schliesslich zu sehen, ist es definitiv wert.
Ich hatte einige Schwierigkeiten damit, von alten Gewohnheiten abzusehen und umzudenken. Im Basislehrjahr haben wir die absoluten Grundlagen gelernt, doch hier werden die Dateien anders aufgebaut, andere Sprachen verwendet und allgemein der Code anders geschrieben – eben so, wie es professionelle Entwickler tun. Ich hoffe, dass ich in Zukunft wieder einmal im Frontend-Bereich arbeiten darf, um noch mehr zu lernen und meine Fähigkeiten weiter zu verbessern.