Webentwicklung mit Symfony und Vue.js – So arbeiten wir!

Im Dschungel des Internets gibt es wahnsinnig viele Frontend- und Backend-Frameworks in den verschiedensten Programmiersprachen. Diese unterstützen die Entwickler dabei, die eigenen Ideen und Projekte so einfach wie möglich umzusetzen.
Die Meinungen, bei der Auswahl des richtigen Systems, gehen sehr weit auseinander. Der eine schwört zum Beispiel auf Node.js beziehungsweise Express im Backend, während der andere nicht mehr ohne ein Ruby basiertes Framework leben kann.

Da wir durch Magento und WordPress aus unserem Tagesgeschäft an PHP und Javascript gewöhnt sind, stand die Programmiersprache bei uns schon fest. Letztendlich haben wir uns für Symfony und Vue.js entschieden und uns über die letzten Jahre von Tag zu Tag mehr verliebt.

In diesem Blogbeitrag möchte ich unsere Begeisterung für die Kombination der beiden Systeme teilen und zeigen, wie wir sie im Alltag miteinander verheiraten. Dabei möchte ich keine allzu tiefgreifenden technischen Details besprechen, aber dennoch auf eine angemessene Tiefe eingehen, um das Thema adäquat zu behandeln.

Symfony & Vue.js – kann man das essen?

Um die Antwort schon mal vorwegzunehmen: leider nicht. Es ist aber auch viel besser als das!
Kommen wir erstmal zu Symfony. Symfony ist ein Backend-Framework, basierend auf der Programmiersprache PHP.

Unter einem „Backend“ versteht man den Teil einer Softwareanwendung, der sich um die Datenverarbeitung und Logik hinter beispielsweise der Benutzeroberfläche kümmert.
Ein „Framework“ kann man sowohl im Front- als auch Backend als Grundgerüst ansehen, welches viele Funktionen mitbringt, die vom Entwickler sehr einfach implementiert oder genutzt werden können.

Offizielle Erweiterungen, Modularität und die eigene Würze

Symfony bietet von Haus aus sehr simple Möglichkeiten, um die verschiedensten Anforderungen vor allem dynamisch und intuitiv abzubilden. Zusätzlich zu den Bordmitteln gibt es auch noch ein umfassendes Repertoire an offiziellen Symfony-Packages, die man sich dazu installieren kann. Diese schmiegen sich perfekt in das bestehende System ein und sind natürlich auch wieder, wen wundert’s, unfassbar einfach anzuwenden.

Sollte man doch mal an den Punkt gelangen, wo man sich eingestehen muss „Mist, ich glaube, Symfony kann das ja gar nicht“, hat man die Möglichkeit, das System selber problemlos zu erweitern. Durch den modularen und übersichtlichen Aufbau von Symfony ist das nicht nur simpel, sondern auch sehr sauber möglich und fühlt sich sogar gewollt an.

Logik ohne schöne Benutzeroberfläche? – Ohne mich!

Selbst als der größte Backend-Entwickler-Nerd möchte man doch, dass die eigenen Anwendungen intuitiv zu benutzen sind. Vor allem, wenn auch andere diese benutzen sollen. Um unser Frontend schön, intuitiv und gut strukturiert aufzubauen, nutzen wir Vue.js.

Vue ist ein Frontend-Framework, das in Anlehnung an die sehr bekannte JavaScript-Library „React“ entwickelt wurde. Es zeichnet sich vorrangig durch die sogenannte „Reactivity“ aus. Diese jetzt genau zu erklären wäre viel zu technisch, deswegen belasse ich es bei einer sehr vereinfachten Erklärung: Bei eventuellen Datenänderungen (z.B. Temperaturanzeige) muss die Seite nicht regelmäßig aktualisiert werden, sondern Vue kümmert sich darum, den Bereich neu zu rendern, der sich im Datensatz geändert hat. Das ist performant und sehr benutzerfreundlich.

Auch hier lassen sich, wie bei Symfony, jede Menge ergänzende Packages installieren.
Neben den unzähligen Erweiterungen, die explizit auf Vue abgestimmt sind, lassen sich aber auch reine Vanilla-JavaScript Libraries bzw. jedes npm-Package integrieren. Das ist möglich, da die Vue-Komponenten, abgesehen von den speziellen Vue-Features, auf normalem JavaScript basieren und damit auch stark erweiterbar sind.

Symfony und Vue sind zwei Frameworks, die sich, vereint in einer Symbiose aus Backend und Frontend, undenkbar groß erweitern lassen. Genau das ist es, was es zu einer echt soliden und performanten Kombination für Webanwendungen macht.

„Headless“ – Vollständige Flexibilität

Backend und Frontend sind zwar zwei komplett verschiedene Dinge, müssen in einer Anwendung aber natürlich miteinander verknüpft werden. Eine Möglichkeit wäre es, diese beiden Komponenten fest miteinander zu verdrahten.

Funktionieren würde dies natürlich, ratsam ist es jedoch nicht. Viel zu hoch das Risiko, dass zum Beispiel Vue als Frontend-Framework irgendwann nicht mehr „cool genug“ ist und man zum neuen, heißen Scheiß wechseln möchte. Hätte man ein Projekt so aufgebaut, dass beide Systeme sehr starr miteinander verdrahtet sind, müsste man einen großen Aufwand betreiben, um beide voneinander zu trennen und neu zu verheiraten.

Der Trick an der ganzen Sache

Aus diesem Grund programmieren wir ohne Kopf… Ich meine kopflos… Also „Headless“.
Die Headless-Vorgehensweise beschreibt im ersten Schritt den Aufbau des Backends ohne die Berücksichtigung des Frontends. Wir entwickeln also erst die komplette Datenverwaltung, -speicherung und Logik, bevor wir überhaupt auch nur einen Gedanken an Benutzeroberfläche und Usability verschwenden. Bei dem „nicht fest verdrahten“ handelt es sich also weniger um eine Vorgehensweise, als vielmehr um eine richtige Planung.

Das Vue-Frontend wird dann auf Basis der vom Backend gelieferten Datenstruktur aufgebaut und umgangssprachlich wie ein Kopf „obendrauf gesetzt“. Wenn wir nun von Vue zu irgendeinem anderen Framework wechseln wollen, dann müssen wir nichts mehr trennen. Wir können den Vue-Part einfach archivieren und mit dem neuen Framework eine Benutzeroberfläche auf der bereits bestehenden und immer noch einwandfrei funktionierenden, Datenstruktur aufbauen.

Andere Sprachen, mehrere Quellen und REST-API

Das gibt uns übrigens auch die Möglichkeit von einem JavaScript Frontend in eine ganz andere Programmiersprache zu wechseln oder sogar das Backend aus verschiedenen Quellen gleichzeitig anzapfen zu können. Nach außen hin steht eine REST-API zur Verfügung und jedes System, das damit arbeiten kann, ist bereit angeflanscht zu werden.
Diese Flexibilität ist nicht nur schön modular und sauber, sondern lässt unsere Entwickler auch nachts ruhig schlafen, obwohl sich die Framework-Welt täglich weiterentwickelt.

Warum die Liebe?

Diesen Part wollte ich eigentlich nutzen, um unsere Liebe zu den Frameworks nochmal zu benennen und zusammenzufassen. Ich glaube aber, dass das gar nicht mehr nötig ist. Die Simplizität in der Umsetzung und Erweiterung, gepaart mit der einwandfreien Verknüpfung von Back- und Frontend spricht schon für sich.

Ich weiß, dass gegenseitiges „Framework-Bashing“ da draußen sehr beliebt ist und jeder seinen Liebling für „das Richtige“ hält. An sowas sind wir im Team aber überhaupt nicht interessiert. Wir sind der Meinung, dass jedes Framework seine Daseinsberechtigung hat und ein aufgeschlossener Austausch die Webentwickler-Welt belebt.

Wir sind offen für alles

Trotz unserer rosaroten Brille, die man bestimmt überhaupt nicht beim Lesen gemerkt hat (🥸), sind wir deswegen natürlich immer offen von neuen coolen oder sogar besseren Systemen zu hören.

Wenn ihr also denkt, dass ihr eine viel bessere Kombi gefunden habt oder ihr vielleicht einfach mal erzählen möchtet, wie ihr im Team so arbeitet, könnt ihr gerne den Austausch mit mir oder meinem Team suchen. Wir freuen uns, von euch zu hören!

_{Der Blogbeitrag enthält Bilder von storyset, Freepik und pikisuperstar auf Freepik}