So programmieren wir Websites, die lange Freude bereiten

Seit vergangenem Oktober ist unsere neue Website online. Sie ist mit dem neuesten Stand der Technik programmiert, den wir auch für Websites unserer Kundschaft einsetzen. Doch welche Werkzeuge lassen sich längerfristig einsetzen? Und wo führt der technische Fortschritt zu ständigen Anpassungen? Das zeigen wir in diesem Blogpost am Beispiel unserer Website auf. So viel vorneweg: Im Frontend ändern sich die Zeiten, im Backend bewähren sich altbekannte Tools.

Übrigens setzen wir wie bei unseren vorherigen Websites auf Open-Source-Software - also Software, bei der der Quellcode frei zugänglich und änderbar ist. Sie macht Websites flexibler, kosteneffizienter und sicherer!

Frontend: Es gilt, agil zu bleiben

Das Frontend ist das Schaufenster einer Website: Es handelt sich um die sichtbare und interaktive Benutzeroberfläche, die im Browser dargestellt wird. Als Agentur, die Usability, Design und Technologie ins Gleichgewicht bringt, legen wir bei der Gestaltung und Umsetzung sehr viel Wert auf Innovation und Flexibilität.

Vor diesem Hintergrund gibt es bei unserer neuen Website eine grosse Neuheit: Anders als früher verzichten wir auf Frontend-Frameworks, also auf vorgefertigte Sammlungen von HTML, CSS und JavaScript-Code. Der Hauptgrund ist, dass wir unsere Websites meistens länger warten, als dass die Frameworks gepflegt werden. Passiert dies, müssen wir den Code selbst weiterpflegen. Also machen wir es lieber gleich von Anfang an.

Der initiale Implementationsaufwand ohne Frameworks ist nur geringfügig höher - wenn überhaupt. Denn meistens folgen unsere Websites sowieso nicht einem Standard-Design, sondern einem individuell angepassten visuellen Design. Kommt hinzu: Gerade bei langlebigen Projekten bedeutet der initiale Aufwand nur einen Bruchteil der Gesamtkosten.

Unsere Entwicklungs-Tools im Frontend sind heute:

• Webpack als Modul-Packer: Dieses Werkzeug sammelt Assets wie JavaScript-Dateien und CSS und stellt sie in optimierter Form für den Browser bereit. Wir konfigurieren Webpack so, dass Source Maps generiert werden. Diese werden im Normalfall nicht geladen, können aber beim Debugging helfen. Unsere Source Maps beinhalten den vollen Frontend-Code der Website.
• PostCSS zur Bearbeitung von CSS: Wir nutzen insbesondere Autoprefixer, aber auch weitere Plugins wie postcss-nested, postcss-for und postcss-custom-media.
• Babel oder ESBuild als Transpiler: Diese Werkzeuge helfen uns, moderneres JavaScript schreiben zu können, als dies die aktuell verwendeten Browser verstehen.
• Als Entwicklungswerkzeuge verwenden wir: Pre-commit, Black, Prettier, ESLint und einige andere Tools.

Backend: Langfristige Investitionen lohnen sich

Obwohl das Frontend einer Website oftmals im Mittelpunkt der Aufmerksamkeit steht, sollte das Backend auf keinen Fall vernachlässigt werden. Schliesslich ist es der Motor, der alles am Laufen hält. Deshalb möchten wir euch einen Einblick in die Technologie hinter der neuen Website von Feinheit geben.

Obwohl: Hier hat sich kaum etwas geändert! Nur in grauer Vorzeit haben wir bei Feinheit mal mit der Skriptsprache PHP gearbeitet. Aber das ist wirklich lange her: Seit 2008 machen wir, ein paar wenige WordPress-Websites mal ausgenommen, keine Websites mehr mit PHP.

Die Standard-Werkzeuge in unserer Backend-Toolbox sind:

• Python als Programmiersprache: Python ist eine der beliebtesten Programmiersprachen und wird für alles Mögliche eingesetzt, bei weitem nicht nur für Websites. Fun Fact: Der Name kommt von Monty Python, auch wenn schon länger eine Python-Schlange als Logo verwendet wird.
• Django als Werkzeugkasten: Django ist die stabile Grundlage, die wir für fast alle Websites einsetzen - egal wie gross oder klein. Django ist flexibel, stabil und befindet sich seit der Veröffentlichung im Jahr 2005 in stetiger Weiterentwicklung. Django erlaubt uns, den Inhalt der Website in einer sauber strukturierten Form zu speichern, bearbeitbar zu machen und ihn in verschiedensten Formen wiederzuverwenden.
• feincms3 als Content-Management-System: Unsere Eigenkreation nutzen wir auf unserer neuen Website für den Blog, die Projektdokumentation und weitere Inhaltsseiten.

Als Infrastruktur verwenden wir:

• Linux als Betriebssystem für Webserver: Die Serveradministration machen wir aber nicht selbst, sondern kaufen diese im Normalfall bei unserer Partnerin Nine Internet Solutions ein.
• nginx als Webserver
• PostgreSQL als Datenbankserver
• redis als Cache: Ausserdem nutzen wir die Datenbank auch immer wieder gerne als Queue oder als sehr schnellen Speicher.

Feinheit - die Agentur für langlebige Websites

Kommen wir zum Fazit: Beim Backend ist es wichtig, eine solide Grundlage aufzubauen. Denn ohne funktionierendes Backend bleibt das schönste Frontend nur Makulatur. Seit vielen Jahren investieren wir von Feinheit in Backend-Werkzeuge, die sich bewähren und langlebig sind. Das Frontend gestalten wir so, dass wir agil bleiben können. Denn hier kommt es häufiger zu Innovationen, und Bedürfnisse ändern sich. Häufig lassen sich Anpassungen vornehmen, ohne dass eine ganze Website über Bord geworfen werden muss. Nach diesen Prinzipien haben wir unsere eigene neue Website aufgebaut. Auch nach einigen Monaten finden wir sie toll und sind sicher, dass sie uns noch einige Zeit begleiten wird!

Du willst ebenfalls eine Website, die dir lange Freude bereitet? Dann melde dich bei uns. Wir helfen gerne weiter.