ICF Ladies Lounge 18 Webseite auf Basis von Processwire
Wir freuen uns, euch die neue Ladies Lounge 18 Website vorstellen zu dürfen. Die nächste ICF Women’s Conference wird in Zürich und mehreren Satellitenstandorten in ganz Europa stattfinden und wir haben — passend zum Thema BRAVE — mutig neue Wege bei der Entwicklung der Website eingeschlagen.
Mit dem Wachstum der Ladies Lounge von einem Einzel-Event zu einem Multi-Site Anlass sind auch die Anforderungen und Herausforderungen an die Webseite gestiegen. Eine einfache HTML Webseite genügt schon lange nicht mehr.
Unser Ziel mit der Neuentwicklung ist es, die verschiedenen Locations mit unterschiedlichen Sprachen und teils abweichenden Angeboten einheitlich und übersichtlich zu präsentieren — und dabei gleichzeitig den administrativen Aufwand zu minimieren. Neben dem neuen mutigen Look und Feel, präsentiert sich die diesjährige Webseite nun schlichter und einfacher und die Informationen sind mit weniger Klicks erreichbar.
Einige Highlights der neuen Webseite
- Alle Inhalte werden nur an einer Stelle gepflegt, auch wenn sie mehrmals auf der Webseite angezeigt werden
- Inhalte können direkt auf der Webseite mit Doppelklick bearbeitet werden:
- Mehrsprachigkeit im Frontend und Backend
- 100% massgeschneidertes Datenmodell für die Erfassung der Inhalte:
- Dynamische Rechte: Editoren können ihre Standorte in allen verfügbaren Sprachen bearbeiten und die weiteren Inhalte jeweils nur in der eigenen Landessprache
- Einfaches Login mit Google Account via OAuth2:
- Hundertprozentige Kontrolle über den generierten Code und totale Freiheit bei der Wahl der Frontend-Lösung
- Saubere Trennung von Inhalt (Daten) und Darstellung
- Nur etwa 3 Wochen Entwicklungs-Zeit
Möglich gemacht hat dies Processwire, das CMF (Content Management Framework) welches im Hintergrund zum Einsatz kommt und den Entwicklungs- und Administrations-Aufwand gegenüber dem Vorgänger-System massiv vereinfacht.
« Mit Processwire haben wir eine Lösung gefunden, die genau dies bietet: Grösstmögliche Flexibilität und dennoch eine sehr flache Lernkurve. »
Die Suche nach einem passenden System
Oder Funktionsumfang vs. Komplexität
Es ist schwer ein System zu finden, welches Flexibilität und Umfangsreichtum mit Einfachheit kombiniert, sowohl in der Bedienung als auch der Entwicklung. Die Suche nach einem solchen System gestaltet sich schwer. Die Open Source Welt bietet einem im Grossen und Ganzen folgende Optionen:
Meist ist es so; mit dem Funktionsumfang eines System steigt auch der Einarbeitungs- und Bedienungsaufwand — oder das System ist leicht zu bedienen, kann aber auch wenig, und muss für gehobene Ansprüche über seine Grenzen aufgebohrt werden.
Ganz anders Processwire: Man muss keine systemeigene Sprache lernen, sich nicht durch eine Plugin Hölle kämpfen und mit dem Loop herumschlagen, man muss sich nicht mit Systemgeneriertem Frontend-Code quälen oder gar ein neues PHP Framework erlernen.
Statt ein System zurechtzubiegen und um zu konfigurieren, legt Processwire eine solide Basis um eine neue Webseite in kürzester Zeit von Grund auf massgeschneidert zu programmieren. Es bietet hierzu alle nötigen Mittel, um bei der Umsetzung schnell und effektiv zu sein und schlägt die perfekte Balance zwischen Einfachheit und Funktionsumfang. Eine umfangreiche aber nicht überfüllte Plugin-Auswahl ergänzt spezielle Bedürfnisse und dank der intelligenten API sind fehlende Funktionen ausserdem schnell selber hinzugefügt.
« In den wenigen Monaten seit wir Processwire entdeckt haben, sind wir regelmässig von der Einfachheit erstaunt, mit der wir ans Ziel kommen. »
Alle Grundanforderungen sind gegeben:
- Massgeschneiderte Inhaltstypen (Custom Content Types)
- Flexibles und erweiterbares Berechtigungssystem
- Mehrsprachigkeit
- Übersichtliches und benutzerfreundliches Backend
- Überschaubares Plugin-Verzeichnis
- Funktionierendes Frontend-Editing
- Einfaches Templating mit 100% Frontend-Freiheit
Darüber hinaus verfügt Processwire über eine aussergewöhnlich freundliche und hilfreiche Community. Fragen werden in der Regel in wenigen Stunden konstruktiv beantwortet. Die Entwicklung geht in flotten Schritten voran, der Code ist extrem leicht verständlich und einfach aufgebaut. Processwire hat eine umglaublich mächtige und dennoch einfache API, und für wichtige Dinge gibt es (zwar nicht 1000) aber bestimmt ein Modul das zumindest als gute Ausgangslage zur Weiterentwicklung dient. Nicht zuletzt ist die Dokumentation leicht verständlich, umfangreich und clever.
Unsere Erfahrung zeigt, dass selbst für die Erweiterung von Dingen wie dem Berechtigungssystem — in anderen System höchst komplex — mit Processwire schnell selber eine einfache Lösung gefunden werden kann.
Dies schlägt sich auch positiv im Benutzerinterface nieder. Das sonst so “einfache” Wordpress stolpert bei der Bewältigung etwas komplexerer Aufgaben genau über seine scheinbare Einfachheit und wird plötzlich komplex:
Der Processwire Weg
Im Unterschied zu vielen anderen Systemen pflegt man in Processwire nicht einzelne generische Seiten, sondern massgeschneiderte Inhaltstypen. Man erstellt also nicht eine Seite für eine Location in der man manuell drei Spalten erzeugt und darin Bilder abgelegt — die sowohl Bilder von Speakern oder auch der Location sein könnten — sondern man erfasst einen Datensatz des Typs “Location” und verbindet diesen mit einem oder mehreren Datensätzen des Typs “Speaker”.
Jeder dieser Datensätze (in Processwire Pages genannt, analog zu Nodes in Drupal) hat spezifische Eingabefelder welche für den Typ massgeschneidert sind. Möglich macht dies ein System welches aus folgenden Grund-Komponenten besteht:
- Eine Page ist ein erfasster Inhalt, zum Beispiel der Event-Ort Zürich oder “Pastor Lia” als Guest-Speaker. Einer solchen “Seite” liegt immer ein Template zugrunde welches definiert, von welcher Art die Page ist, etwa vom Typ Location, Speaker oder Preistabelle
- Ein Template ist der Bauplan einer einzelnen Page. Templates sind die Grund-Bausteine einer Processwire Webseite. Jedes Template ist in sich eine Ansammlung von Fields. Sie regeln auch Dinge wie Berechtigungen und es kann definiert werden, in welchem Kontext und wie oft sie vorkommen können. So kann man zum Beispiel definieren, dass vom Typ “Teaser” nur eine Seite existieren kann und dass Seiten des Typs Speaker nur als Kinder von Locations angelegt werden dürfen.
- Fields sind die einzelnen Eingabefelder, welche einem Template zugrundeliegen, z.B: ein Textfeld, ein Linkfeld oder ein Upload-Feld für Bilder. Wenn Templates Moleküle sind, dann sind Fields die Atome. Jedes Feld kann / muss einzeln konfiguriert werden. Diese Konfigurationen können von Templates wieder überschrieben werden — extrem mächtig. Fehlt ein Feld, etwa zur Erfassung der Uhrzeit, kann dies mit Modulen einfach nachgerüstet werden.
- Template-Files regeln danach die Ausgabe einer Page eines bestimmten Templates. Es kommt einem Controller gleich — kann aber auch direkt die View sein — je nach Template-Strategie. Hier kann über die Processwire API mit einfachen Selektoren auf die Erfassten Inhalte zugegriffen werden:
// get one page of the type location
$location = $pages->find('template=Location, name=zurich');// get global speakers
$speakers = $pages->find('template=Speaker, global=1');// join with local speakers
$speakers->append($location->speaker_relation);// display name of global and local speakers
foreach ($speakers as $speaker) {
echo "<h1>$speaker->firstname $speaker->lastname</h1>";
}
Dieser Ansatz führ dazu, dass man sich bei der Entwicklung einer neuen Webseite zuerst fragt, welche Inhaltstypen benötig werden, und wie diese Aufgebaut sind. Ein Inhalt vom Typ Speaker benötigt etwa ein Feld Name, eine Berufsbezeichnung und eine Liste von Social-Media Links wohingegen Inhalte vom Typ Location eine Adresse und einen Anfahrtsplan benötigen.
Für unser Setup ergaben sich folgende massgeschneiderten Inhaltstypen:
- Invitation: Einladungs-Text mit Bild
- Teaser: Bild & Video-Element
- Location: Event Ort, zeitgesteuert inkl. Ticket-Link und Informationen
- Speaker: Global und lokal
- Programm mit Tages-Ablauf
- Preise: Zeitgesteuert
So sieht der Inhaltstyp “Speaker” für den Editor aus:
Diese Herangehensweise ermöglicht es, dass der Editor Inhalte nur noch an einem Ort erfassen muss — auch wenn diese für den Benutzer an mehreren Stellen auf der Webseite angezeigt werden. Das Datum eines Events wird im System beispielsweise nur im Tages-Ablauf erfasst, aber auf der Webseite sowohl bei der Location selbst, als auch auf der Ticket-Seite ausgegeben. Da dem System die Art der Inhalte bekannt sind, können wir auch dynamisch darauf eingehen — eine Location ohne Ticket-Link kann beispielsweise anders dargestellt werden, als eine, welche bereits einen Verkaufsstelle hat.
Unsere Erfahrungen mit Processwire
The good
Processwire ist das erste CMS seit Urzeiten, dass wirklich (fast) von A-Z Freude macht — egal ob API, Dokumentation, Community, Module oder Backend-Interface. Alle paar Stunden wird man wieder positiv überrascht und ein Erfolgserlebnis ist nie weit. Die Lernkurve ist sehr flach und das System schnell verstanden. Selbst Module hat man rasch selber erstellt ohne viel Erfahrung.
Processwire ist nicht over-engineered und setzt auf schnörkellosen PHP Code — und genau darin liegt die Kraft: Einfachheit = leicht verständlich = weniger Code = sicherer = leichtere Wartbarkeit = schneller entwickelt …
Selbst komplexe Module bestehen in Processwire meist nur aus ein paar hundert Zeilen Code — oft deutlich weniger. Und wenn “Hooks” wordpressgeschädigten Entwicklern ein kaltes Schauern über den Rücken fahren lässt, so sind Hooks in Processwire ein mächtiges Tool, den Core zu erweitern. Der Hauptenwickler Ryan ist ein Wunderkind — aktiv, redegewandt und hilfsbereit.
Module von Processwire sind selbst über Major Releases stabil, da die Code-Basis so sauber, simpel und klein ist.
Es gibt ein GraphQL Plugin — hat jemand Headless CMS gesagt?!
Image und File-Handling ist eine Freude:
echo "<img src='{$speaker->image->size(400, 600)->url}' alt=' {$speaker->fullname}' />";Ich könnten noch den ganzen Tag weitermachen…
The not sooo good
Die Definition der Felder und Templates wird in der Datenbank gespeichert, somit ist die Trennung zwischen Inhalt und System nicht gewährleistet. Dies erschwert die saubere Weiterentwicklung mit getrennten Live- und Entwicklungs-Umgebungen. Hierfür gibt es jedoch ein Migrations-Modul, welches vielversprechend aussieht — ein anderes Modul, welches diese Konfigurationen ins Dateisystem schreiben sollte hatte leider unser System zerschossen.
Ich dachte, es sei schwer absolute URLs aus dem System zu kriegen — Ha! Was für ein Narr ich war. Soviel zum Thema positive Überraschung. (Vielleicht hast du es gemerkt, der Punkt gehört eigentlich nach oben.)
Aber wenn wir gerade dabei sind — dass ich gedacht habe, dass es nicht geht, liegt an der nicht ganz vollständigen Dokumentation. Sie ist zwar weit besser als viele andere, aber dennoch fehlen an der einen oder anderen Stelle nützliche Hinweise. Wie im obigen Beispiel, hilft hier jedoch die freundliche Community schnell weiter.
processwire.com wirkt etwas altbacken. Vielleicht ist dir aufgefallen auf welche hohem Niveau man bei Processwire jammern muss.
Es ist kein gratis-Tesla dabei.
Fazit
Processwire ist für jeden, der sich über irgendwelchen Typo3-, Wordpress- und Drupal-Irrsinn aufregt eine frische Briese, klares Wasser, eine reine Freude.
Es eignet sich hervorragend als CMF und Headless CMS und wir fragen uns permanent — warum ist das System nicht bekannter?
Wer Wert auf einfachen aber sauberen Code, Flexibilität, Stabilität, Speed, schnelle Entwicklungszeiten und maximale Freiheiten legt, sollte dringend einen Blick darauf werfen.
Man muss PHP mögen — oder zumindest nicht hassen — und sich damit abfinden, dass das System nicht bis zum Excess overengineered ist. Dann steht einem alles offen — mit GraphQL kann man auch ein komplett entkoppeltes Frontend bauen.
Wir sind von der Einfachheit von Processwire überzeugt worden und werden zukünftig weitere Seiten ebenfalls damit umsetzen.
Hilfreiche Links & Resourcen
- Dokumentations Übersicht
- API Dokumentation und Selektoren
- API Cheatsheet ziemlich praktisch, nicht ganz vollständig für Version 3.0
- Captain Hook Übersicht über Hooks
- Blog, meist wöchentliche Updates, Ryan ist eine Rakete…
- Weekly.PW Newsletter pro Woche, spannend
- Wireshell Kommandozeilen-Interface für Processwire
- Es gibt einen Module Generator
- Netter Artikel zu Processwire
- Demo Seite zum reinschauen
Plugins & Techniken, die wir verwendet haben
- Custom Frontend Setup mit Uikit 3 und SCSS, und Markup Regions
- Uikit Backend Theme (github)
- Oauth2 Login Module
- Eigenentwicklung Login with E-Mail
- Pro Fields für Repeater Matrix Felder (Infos, Preistabellen, Tagesabläufe)
- Wire Upgrade um Plugins und den Core zu aktualisieren
- Wire Mail Mandrill um Mails zu versenden
- FunctionalFields für übersetzbare Frontend-Texte die nicht Teil eines Inhaltstypen sind (Überschriften, Button-Labels etc)
- Runtime Markup für dynamische Backend-Felder (Kombination Vor- und Nachname)
- Tracy Debugger für schnelle Fehlersuche
- Textformatter OEmbed um Vimeo und Youtube Links in Embed Codes umzuwandeln
