News

Upgrade der DCCS Website auf Liferay 7.0
Upgrade der DCCS Website auf Liferay 7.0

Vor einigen Wochen haben wir die Homepage der DCCS auf die neue Liferay Version 7.0 gehoben. Die Gründe dafür waren mannigfaltig.

Screenshot der alten WebsiteDie alte Homepage war etwas in die Jahre gekommen, Menüführung und Darstellung waren auf den Desktop ausgelegt und nicht für die Darstellung am Smartphone optimiert. Auch das Look & Feel fühlte sich nicht mehr modern an. Das World Wide Web ist beständig im Wandel, neue Technologien, höhere Bandbreiten und auch stilistische Strömungen verändern beständig das Aussehen von Webseiten.

Daher war es Zeit, die Website zu erneuern, ihr einen modernen und responsiven Anstrich zu geben. Dies unabhängig von der Technologie. Es wurde allerdings aus mehreren Gründen entschieden, auch gleich ein Upgrade von Liferay 6.2 auf die Version 7.0 durchzuführen.

Zum Ersten um praktische Erfahrung mit Liferay 7 und speziell auch dem Upgrade-Prozess zu sammeln. Mehrere Kunden haben bereits Interesse an der neuen Liferay Version bekundet, und beim Energieversorgungsunternehmen KELAG haben wir inzwischen auch das Intranet auf die Version 7 gehoben. Die Erfahrungen, die wir hier vorab mit der eigenen Website sammeln konnten, kamen uns dabei sehr gelegen. Auch dort wurden Inhalte neu organisiert und das Design modernisiert.

Zum Zweiten um die neuen Features nutzen zu können und für die Zukunft gerüstet zu sein. Liferay 6.2 schreitet beständig dem "End of Life" entgegen (Premium Support endet Dezember 2017) und in absehbarer Zeit wäre es sowieso notwendig das Versions-Upgrade durchzuführen. Dann wären auch diverse Anpassungen erforderlich gewesen, um Theme und Templates an die Version 7 anzupassen. Das sind aber Komponenten, die sowieso bei der Umstellung auf das neue Look & Feel überarbeitet werden mussten. Daher war es auch ökonomisch, diese Komponenten gleich für die aktuelle Version zu entwickeln.

Das Upgrade an sich teilte sich in folgende Bereiche:

Upgrade OS und Infrastruktur

Die Infrastruktur hatten wir als Trivialität eingeschätzt, wir trafen aber auf ein kleines Problem. Wir verwenden als Datenbank Mysql, allerdings hat Liferay die Version 5.6.4 als Minimalanforderung. Das verwendete Betriebssystem Debian stellt standardmäßig höchstens Version 5.5 bereit. Die Datenbank zu wechseln erschien uns hier als schönste Lösung. Vielerorts, wie z.B. auch bei der Wikipedia, wurde Mysql duch MariaDB ersetzt und wir entschlossen uns auch dazu. MariaDB wurde als Fork ("Kopie") von Mysql geschaffen, als diese in den Besitz von Oracle wechselte und sie kann praktisch immer als 1:1 Ersatz dienen.

Die Umstellung von Mysql auf MariaDB gestaltet sich problemlos: Export der Datenbank am Altsystem, Import in die neue Datenbank.

Bei der neuen Infrastruktur sollte man auch die Suchengine nicht vergessen. Liferay verwendet als Suchengine nicht mehr Lucene sondern wechselte auf Elasticsearch. Liferay bringt zwar eine integrierte Version mit, was zum Entwickeln praktisch ist, aber für den Produktivbetrieb sollte diese nicht verwendet werden. Elasticsearch aufzusetzen gestaltete sich anhand der Dokumentation von Liferay einfach und die Konfiguration in Liferay ebenso.

Upgrade der Datenbank

Im Gegensatz zu früheren Liferay Versionen wird der Upgrade des Datenbank-Schemas nicht mehr beim Hochstarten von Liferay automatisch durchgeführt. Eine gute Entscheidung, da dieses Vorgehen uns in der Vergangenheit schon Kopfzerbrechen bereitet hat. Glassfish hat zum Beispiel ein festes, nicht veränderbares Zeitlimit beim Hochstarten und jeder "normale" Upgradeversuch scheitert zwangsläufig. Ein lösbares Problem, aber dennoch eines, auf das man gerne verzichtet.

Das Upgrade wird nun über eigene Commandline Tools durchgeführt und funktionierte auf Anhieb tadellos. Hier hatten wir aus der Erfahrung mit Schwierigkeiten gerechnet - in der Vergangenheit mussten wir immer wieder nachbessern und mehrere Anläufe versuchen.

Neues Theme

Das neue Theme wurde auf der "grünen Wiese" konzipiert und umgesetzt. Einerseits wollten wir uns in der kreativen Freiheit nicht durch alte Strukturen beschränken, andererseits war das alte Theme und die meisten Templates in der Scriptsprache Velocity entwickelt. Von Liferay wird allerdings die Verwendung von Freemarker empfohlen und die Verwendung von Velocity wurde "deprecated" (missbilligt). Daher wurde das neue Theme auf Basis von Freemarker von Grund auf neu entwickelt.

Mit Liferay 7 wurde die Theme Entwicklung wunderbar modernisiert. Man kann nun endlich in Liferay scss wirklich nutzen, da nicht mehr der gute alte, aber in die Jahre gekommene, YUI Compressor sondern State-of-the-art Tools wie gulp genutzt werden, um das Theme zu generieren. Auch Features wie "gulp watch" erleichtern die Arbeit ungemein. Dabei werden Änderungen im Code automatisch nach dem Speichern im Editor im Browser angezeigt, ohne das ein manueller Refresh notwendig ist. Dieses Feature beschleunigt die Entwicklung ungemein. Man speichert im Editor und kann die Änderung auf dem zweiten Monitor im Browser sofort begutachten. Oder wenn man parallel das Smartphone auf dem Tisch liegen hat, auch dort. Wie gesagt: die Änderung wird ohne Userinteraktion nach dem Speichern sofort sichtbar.

Neue Templates

In Liferay gibt es das unglaublich praktische Feature der Strukturen und Templates (Vorlagen). Dabei definiert man Felder wie Titel, Kurzfassung, Text, Vorschaubild etc., und diese Felder werden dann durch die Vorlage dargestellt. Man gewinnt durch die Vorlage die Möglichkeit, verschiedene Darstellungen des selben Inhaltes zu generieren. Listenansicht, Vollansicht, Desktop, Mobile, ...

Redakteure füllen nur Formularfelder aus und können sich damit auf den Inhalt konzentrieren. Die Darstellung wird durch das Template generiert und kann durch einen Entwickler für Desktop und Mobile optimiert werden.

Die alten Inhaltsvorlagen waren ebenfalls in Velocity entwickelt und wurden daher in Freemarker neu erstellt. Dabei wurde speziell auf die Darstellung am Smartphone geachtet.

Redaktionelle Überarbeitung der Seitenlandschaft

Die alte Seitenlandschaft war für eine moderne Website zu übersichtlich. Speziell am Smartphone will man sich nicht mit einer tiefen Navigation beschäftigen, sondern einen klaren und übersichtlichen Einstieg in die zentralen Themenkreise vorfinden. Wir haben das so realisiert, dass der gesamte alte Seitenbaum in einen auf "unsichtbar" gesetzten Knoten "OldPages" verschoben wurde. Die neuen Seiten wurden dann anhand der neuen Vorgaben manuell angelegt, ein neuer Seitenbaum strukturiert und die Inhalte überarbeitet. Darin lag dann auch der größte Teil des Aufwandes. Die Entwicklung einer neuen Seite, mit neuen Inhaltstypen und neuem Design ist das eine. Sehr oft wird allerdings der redaktionelle Teil unterschätzt, der jedoch beträchtlich ist. Nach Abschluss der Arbeiten wurde OldPages dann gelöscht.

SEO und Redirects

Allerdings sind diese gelöschten Seiten ja zum Teil noch irgendwo verlinkt und man möchte auch den mühsam aufgebauten Seitenrang nicht verlieren. Nutzer, die auf einen Link zu einer alten, gelöschten Seite klicken, sollen passenden Content präsentiert bekommen. Dazu wurde am Altsystem die Liste der Seiten/Links exportiert und dann redaktionell zu jeder alten Seite die neue URL überlegt. So wurden mehr als 200 Links zusammengestellt, die eine neue Heimat haben. Für diese Links wurden Redirects im Apache Webserver eingerichtet.

Performance & Optimierungen

Am Ende wurden noch diverse Performance Verbesserungen durchgeführt. Da es sich dabei um ein umfangreicheres Thema handelt, wird es in einem eigenen Artikel betrachtet.

 

 
Ihr Ansprechpartner
Christoph Rabel
cr@dccs.at