Früher war alles besser, oder auf jeden Fall einfacher. Ein paar HTML- und CSS-Files via FTP auf den Server geladen und fertig war die Webseite. Musste der Inhalt dynamischer daherkommen, wurden die HTML-Files durch PHP-Files mit einer Prise Logik ersetzt. Heute läuft nichts mehr ohne TypeScript, Sass/SCSS, Content-Management-Systeme, Frameworks, Continuous Integration und Deployment Pipelines.
Sie verstehen nur Bahnhof? Kein Problem, wir machen einen Schritt zurück und versuchen, in dem Technologie-Durcheinander anhand eines fiktiven Fallbeispiels ein wenig Ordnung zu schaffen. Starten wir bei den Grundlagen, welche nötig sind, um die im Folgenden erwähnten Technologien richtig einzuordnen.
Grundlagen des Web
Das Web basiert auf einer sogenannten Client/Server-Architektur, anders formuliert bedeutet das: Über einen Client wird auf entfernte Ressourcen zugegriffen. Im Falle des WWW ist der Client Ihr Browser (zum Beispiel Internet Explorer, Firefox oder Chrome) und die entfernte Ressource ist ein Server, der alle möglichen Inhalte beheimatet (zum Beispiel HTML Files, PDFs oder Videos). Wir unterscheiden dabei zwischen Front-end und Back-end.
Das Front-end
Das Front-end beschreibt alles, was im Client (sprich Browser) angezeigt oder verarbeitet wird. Alle Browser müssen sich auf ein spezifisches Set von Instruktionen einigen, damit alle Webseiten überall in etwa gleich aussehen und sich identisch verhalten. Dieses Set von Instruktionen wird in HTML, CSS und Javascript definiert.
Die Grundlage bildet die Hypertext Markup Language (HTML), eine Auszeichnungssprache, welche speziell für die Darstellung von Dokumenten im Browser entwickelt wurde. Empfängt der Browser also die Zeichenkette < img src="./logo.png" >, dann weiss er genau, was damit zu tun ist – nämlich das Bild mit dem Dateinamen logo.png vom Server zu holen und darzustellen. Aber seien wir ehrlich: So ein Logo auf weissem Hintergrund ist nicht sehr spannend. Aus diesem Grund gibt es Cascading Style Sheets (CSS), um die in HTML definierte Dokumentenstruktur etwas anschaulicher zu gestalten.
Schon wissen alle Browser, dass das Bild nicht einfach irgendwie dargestellt werden soll, sondern in einer gewissen Grösse. Das letzte Bindeglied in unserem Trio ist Javascript. Damit werden Inhalte in Bewegung gebracht oder dynamisch verändert, ohne eine Seite neu zu laden. Denken Sie dabei zum Beispiel an den Facebook-Like – Sie klicken darauf und die Zahl der Likes verändert sich direkt, ohne dass Sie die Seite nochmals neu laden müssen.
Das Back-end
Beim Aufruf einer Webseite spricht man von einem Anfrage/Antwort-Zyklus. Der Browser fordert eine Ressource an und ein Server liefert sie aus. Ist vom Back-end die Rede, ist damit alles gemeint, was auf diesem Server geschieht. Auf einem Server sind verschiedene Dienste wie ein Webserver, eine Datenbank oder die Runtime für eine Programmiersprache installiert. Im Vergleich zum Browser müssen wir uns auf dem Server nicht auf ein fixes Set von Technologien beschränken, sondern sind völlig frei in der Wahl, solange die gewählte Technologie eine für den Browser kompatible Antwort liefern kann. Prominente Vertreter unter den Webservern sind Apache und Nginx und bei den Programmiersprachen PHP, Python oder Java (nicht zu verwechseln mit dem clientseitigen Javascript). Ruft also ein Browser https://www.xyz.ch auf, wird diese Anfrage an einen Server geschickt, vom Webserver empfangen, in einer Programmiersprache interpretiert und zum Schluss eine Zeichenkette als Antwort zurückgegeben.
Fallbeispiel Cosmo Y
Genug der Grundlagen, verschaffen wir uns einen Überblick zu den aktuellen Web-Technologien im Einsatz. Wir präsentieren Ihnen das fiktive Unternehmen Cosmo Y, das eine neue Webpräsenz inklusive Webshop und Anbindung an das hauseigene CRM-System benötigt. Cosmo Y ist ein Luft- und Raumfahrtunternehmen, das Transporte und Unterkünfte auf dem Mars anbietet. Nebst eines internationalen, rein informativen Webauftritts wird auch ein Webshop für die Buchung von Aktivitäten auf dem Mars benötigt.
MPA vs. SPA vs. PWA
Am Anfang muss sich Cosmo Y eine Grundsatzfrage stellen: Multi Page oder Single Page Application, kurz MPA oder SPA? Mit einer SPA ist nicht etwa gemeint, dass der gesamte Inhalt auf einer Seite dargestellt wird. Vielmehr sprechen wir dabei von einem Unterbruch im eingangs erwähnten Anfrage/Antwort-Zyklus. Eine SPA stellt eine einmalige Anfrage an den Server, alle nachfolgenden Anfragen werden durch den Browser im Hintergrund mittels Javascript gestellt. Dies gibt uns mehr kreative Freiheit wie ganzseitige Animationen beim Aufruf einer neuen Seite, bringt jedoch höhere Entwicklungskosten mit sich, da ein Teil der applikatorischen Logik vom Server in den Client verlagert wird. Beispiele sind Twitter, Google oder Facebook, welche ihr gesamtes Angebot als SPAs entwickeln. Progressive Web Apps, auch PWAs genannt, sind eine Erweiterung von SPAs mit zusätzlicher Offline-Fähigkeit sowie Zugriff auf die Funktionen des Geräts, über das die PWA aufgerufen wird (Native-Funktionalität, z.B. Push-Mitteilungen). MPAs werden häufiger für klassische Unternehmenswebseiten eingesetzt, aber auch grosse Anwendungen wie Ebay oder Amazon sind als MPA umgesetzt worden.
Alle drei Ansätze haben ihre Vor- und Nachteile. Cosmo Y hat vorgängig einen Anforderungskatalog erstellt und entscheidet sich aufgrund dessen für eine hybride Vorgehensweise:
1. Unternehmensseite www.cosmo-y.com als MPA mit grundsätzlichen Informationen - Wer ist Cosmo Y?
- Was ist unser Angebot?
- Marketing-Material und Kosten
2. Webshop shop.cosmo-y.com als PWA damit die User einfach mit dem Angebot interagieren können- Tickets kaufen
- Den Shop offline durchstöbern
- Hilfe via Chat bekommen
- Push-Mitteilungen auf das Gerät erhalten
Mit einer MPA-Unternehmensseite erreicht Cosmo Y eine schnelle, flexible und optimal indexierte Webseite, die über Suchmaschinen leicht zu finden ist. Inhalte sind auch mit Hilfsmitteln wie Screenreadern lesbar und lassen sich einfach in einem Content Management System (CMS, mehr dazu später) verwalten.
Stehen eine SPA oder eine PWA zur Diskussion, benötigt dies mehr Arbeit im Front- und Back-end. Gewisse Funktionalitäten wie Routing, URL-Auflösung und Navigation müssen bei diesem Vorgehen mehrfach implementiert werden. Eine klare Schnittstellenspezifikation für die Kommunikation mit dem Server ist Pflicht. Für Cosmo Y und dessen Webshop lohnt sich der Aufwand, da wir keine Absprünge durch langsame Ladezeiten wollen und der Einkauf ohne störendes Neuladen in einem Fluss möglich sein soll. Dank PWA ist auch eine Offline-Verfügbarkeit möglich, der Checkout erfolgt, sobald der User wieder online ist.
CMS und dynamische Inhalte
Um die eigentlichen Inhalte auf die Seite und den Webshop von Cosmo Y zu bringen, braucht das Unternehmen nun noch ein CMS. Unter Inhalt verstehen wir nicht nur reinen Text, sondern auch Bilder, Videos oder PDFs. Die Auswahl an möglichen CMS ist riesig und für alle bekannten Programmiersprachen ist ein System vorhanden. PHP bietet bei Weitem die grösste Auswahl, Java bedient eher den Enterprise-Bedarf und Javascript (Node) ist der Grünschnabel mit mehreren jungen CMS-Systemen, wovon viele erst noch den Test der Zeit bestehen müssen.
Auch für die Wahl des geeigneten CMS hat Cosmo Y einen Anforderungskatalog mit Kriterien erstellt. Unter uns gesagt: Fast jedes CMS schreibt sich diese gross auf die Flagge, wirklich erfüllt werden sie nur von den wenigsten.
- Versionierung: Einzelne Inhalte sind versioniert, Änderungen können rückgängig gemacht oder wiederhergestellt werden.
- Publishing Workflow: Inhalte können als Drafts vorbereitet, überarbeitet und zu gesetzten Zeitpunkten veröffentlicht oder zurückgezogen werden.
- Inhaltstypen: Es gibt nicht nur Seiten, sondern es muss trivial sein, weitere Typen wie Teammitglieder oder Blogposts hinzuzufügen.
- Mehrsprachigkeit: Es soll eine Mischform von übersetzten und nicht übersetzten Inhalten möglich sein. Die Mehrsprachigkeit soll sich durch alle anderen Kriterien ziehen.
- Ökosystem: Es gibt eine grosse Anzahl von Erweiterungen, welche nicht händisch entwickelt werden müssen – zum Beispiel für Formulare, SEO oder einen Webshop.
- Media Management: Es können verschiedene Medienformate in strukturierter Weise verwaltet und bei Bedarf mit Metadaten versehen werden.
- Erweiterbarkeit: Eine einfache Erweiterbarkeit mit spezifischer Business-Logik ist gegeben, zum Beispiel die Synchronisation mit dem hauseigenen CRM.
- Usability: Das System soll für Editoren übersichtlich und einfach in der Handhabung sein.
- Headless: Ermöglicht die Umsetzung von SPAs und bedeutet, dass der erfasste Inhalt nicht direkt via Template Engine gerendert, sondern als API zur Verfügung gestellt wird.
Bekannte CMS sind zum Beispiel Wordpress, Drupal oder Django CMS. Cosmo Y entscheidet sich aufgrund seiner Anforderungen für das in PHP geschriebene Craft CMS.
Unternehmensseite als MPA
Der Webauftritt von Cosmo Y muss auf allen Browsern und Mobilgeräten funktionieren. Eine der grossen Herausforderungen ist die Adaption an unterschiedliche Fenster- und Gerätegrössen – man spricht dabei von Responsive Design.
Die Entwickler-Kollegen von Cosmo Y erhalten von ihrem Design-Team in einem ersten Schritt die finale Gestaltung der Seite und alle fertigen Grafiken. Der Austausch findet via Figma statt. Letzteres ist ein Web-basiertes Tool, das die kollaborative Umsetzung im Team und einen reibungslosen Workflow zwischen Design und Entwicklung ermöglicht. Unter anderem deshalb, weil Farbwerte, Abstände und weitere CSS-Attribute direkt ausgelesen werden können. Als Nächstes müssen die Entwickler die statischen Designs in Front-end-Komponenten umsetzen. Dies geschieht mittels HTML und CSS. Glücklicherweise gibt es moderne Hilfsmittel, sogenannte CSS Preprocessors wie Sass, SCSS oder Stylus, welche diese ermüdende Arbeit ein wenig erleichtern. Diese in sich geschlossenen Komponenten werden anschliessend zu fertigen Templates zusammengesetzt.
Gewisse Komponenten können mit Javascript erweitert werden (Progressive Enhancement), andere sind statisches HTML. Komponenten sollen ohne Kontext und möglichst isoliert funktionieren. Durch diesen modularen Ansatz kann Cosmo Y viel Code wiederverwenden, was auch nachträgliche Weiterentwicklungen vereinfacht. Der gesamte Prozess ist dank des MPA-Ansatzes einfach und in enger Zusammenarbeit von Front-end und Back-end umsetzbar und nach Abschluss mit Lighthouse messbar. Ein weiterer Vorteil dieses Vorgehens für Cosmo Y: Animierte Elemente können mit ein wenig Funktionalität, beispielsweise einer Bildergalerie zu den Mars-Aktivitäten oder einem Akkordeon-Element mit Preisinformationen, per Javascript und Frameworks wie Vue.js ohne grosse Probleme eingebaut werden.
Webshop als PWA
Die Front-end- und Back-end-Entwickler von Cosmo Y arbeiten im Vergleich zur MPA für die PWA nur bedingt zusammen und haben einen stärkeren Fokus auf ihre jeweilige Domäne. Das Back-end stellt eine REST-Schnittstelle zur Verfügung, über die das Front-end relevante Daten lesen und schreiben kann – zum Beispiel einen Endpunkt, um eine Aktivität auf dem Mars in den Warenkorb hinzufügen zu können. Das Front-end ist für den gesamten restlichen Aufbau zuständig, was den Einsatz eines JS-Frameworks wie Vue.js unabdingbar macht. Routing und HTML-Rendering werden von Javascript übernommen, ebenso das Abrufen der Inhalte via AJAX – alles Aufgaben, die in einer MPA typischerweise das CMS übernimmt.
Lassen Sie uns dies am Shop-Feature «Jetzt buchen» etwas genauer aufzeigen:
1. Der Webshop-Besucher klickt auf das entsprechende Element auf dem Screen, um ein Ticket auf den Mars zu buchen.
2. Mittels AJAX-Call wird der Server dazu aufgefordert, das Produkt «Ticket to Mars» mit dem klickenden Benutzer zu verknüpfen.
3. Der Server überprüft, ob es dieses Produkt überhaupt gibt und falls ja, ob es noch verfügbar ist.
4. Sind alle Überprüfungen erfolgreich, wird dem Browser der aktuelle Warenkorb-Zustand zurückgegeben (beispielsweise das Total in Franken).
5. Javascript empfängt diesen neuen Zustand und aktualisiert alle betroffenen Elemente. In unserem Beispiel das Warenkorb-Total und das Produkt selbst, welches neu als bereits im Warenkorb angezeigt wird.
Die Entwickler von Cosmo Y setzen auch auf Service Workers. Das ist eine moderne, von den meisten Browsern unterstützte Technologie, die zwischen der Webapplikation und dem Netzwerk sitzt und viele Vorteile bietet. Sie ermöglicht der Applikation, auf die Verfügbarkeit des Netzes zu reagieren und so zum Beispiel gewisse im Voraus synchronisierte Ressourcen zur Verfügung zu stellen. So können damit, wie im Fall von Cosmo Y bei einer kurz bevorstehenden Reise, unter anderem Push-Mitteilungen verschickt und Hintergrundprozesse angestossen werden. Eine PWA kann auf einem Mobilgerät wie eine App inklusive Icon installiert werden und erhält dadurch zusätzliche Privilegien und Möglichkeiten für eine gerätenahe Integration der Webapplikation.
Applikationen und die zwölf Faktoren
Wir haben nun viel über Webseiten und CMS-Systeme gehört, aber wie sieht es mit Software im traditionellen Sinn aus? Cosmo Y nutzt beispielsweise das beliebte Framework Django für eine interne Applikation, um Kundenbeschwerden zu erfassen und zu verarbeiten.
Ein Framework meint dabei nichts anderes als eine Sammlung von gängigen Funktionen, gebündelt in einem Paket. Typische Funktionen sind zum Beispiel Routing und Middleware, eine Template Engine, Session und Error Handling, Logging, Validation, Caching sowie verschiedene sicherheitsrelevante Funktionen wie Authentifizierung, Autorisierung und Verschlüsselung.
Im Gegensatz zu klassischer Software, welche Sie auf Ihrem Computer installieren, wird eine Applikation im Web als Dienst angeboten. Es gibt verschiedene Möglichkeiten, wie ein solcher Dienst entwickelt werden kann. Eine moderne und häufig verwendete Methode nennt sich Twelve-Factor App (12FA, 12factor.net). 12FA bezieht sich dabei nicht auf eine Programmiersprache oder ein Framework, sondern beschreibt, wie spezifische Probleme gelöst werden sollen. Die Methode strebt unter anderem das Deployment auf Cloud-Plattformen, deklarative Formate für die Automatisierung der Konfiguration sowie schnelle iterative Entwicklungszyklen an.
Bis zur Unendlichkeit und noch viel weiter
Das Web ist komplizierter denn je, bietet aber auch ein Riesenpotenzial – nicht nur für Webseiten, sondern auch für Applikationen aller Art. Die Grenze zwischen nativer Software und Web-Applikationen verschmilzt immer mehr. Neue Browser-Features und eine tiefere Integration in die Betriebssysteme und Mobile Devices eröffnen zudem ganz neue Möglichkeiten, Use Cases und eine stark verbesserte User Experience. Man darf gespannt sein, was die Zukunft bringt und welche neuen Herausforderungen auf uns Web-Entwickler zukommen werden.
Die Autoren
Sidney Widmer ist Back-end Developer und verfügt über langjährige Erfahrung in der Erstellung von komplexen Web-Applikationen mittels verschiedener Frameworks.
Gianluca Guarini ist Front-end Developer mit umfassender Expertise in HTML5 Semantik, SEO und Functional Programming. Er ist Autor eines Front-end-Buches und eines Online Guide auf HTML.it und tritt gelegentlich als Speaker an Fachkonferenzen auf.
Unterstützt wurden sie für diesen Artikel von
Gina Held (Grafik) und
Sarah Hefti (Inhalt). Die vier Möchtegern-Astronauten arbeiten für
Dreipol, eine auf das Design und die Entwicklung von Apps und Webseiten spezialisierte Agentur mit Sitz in Zürich.
Info:
www.dreipol.ch
