Softwareoptimierung: So profitieren Sie in onOffice enterprise von Vue.js

Vue.js

Während andere Softwarehersteller ihre Updates noch lange per Post auf CD-ROM verschickten, war onOffice einer der ersten Anbieter von webbasierter Immobiliensoftware. Seitdem hat sich viel getan: Webanwendungen sind mittlerweile in allen Bereichen Standard und die Technologie hat sich enorm weiterentwickelt. Von dieser Entwicklung soll natürlich auch unsere Software profitieren. Wir sind deshalb auf das clientseitige JavaScript-Webframework Vue.js umgestiegen und zeigen Ihnen in diesem Beitrag, wie Sie bei onOffice konkret davon profitieren.

Inhalt:

Changing a running System

Die Herausforderung besteht darin, ein System im laufenden Betrieb auf eine völlig neue technologische Basis zu stellen. Unser Entwicklerteam muss nicht nur die bestehende Software pflegen und für einen reibungslosen Betrieb sorgen, sondern gleichzeitig wichtige Komponenten technisch überarbeiten, ohne die Funktionalität zu beeinträchtigen. Metaphorisch gesprochen müssen wir das Auto fahren, dabei auf Geschwindigkeitsbegrenzung und Kraftstoffverbrauch achten und gleichzeitig die Reifen wechseln.

PHP: Der Ist-Zustand

Unsere Software basiert auf PHP. Diese Programmiersprache ist nach wie vor der bewährte Standard. Sie arbeitet jedoch serverseitig – das bedeutet, dass bei jedem Klick eine Anfrage an den Server gestellt wird und alle Daten neu übertragen werden. Die Seite wird also jedes Mal komplett neu geladen. Bei einer so umfangreichen Software wie onOffice enterprise wirkt sich das natürlich auf die Performance aus, da der Browser alle Inhalte neu rendern, d. h. herunterladen und verarbeiten muss.

Code

JavaScript: Kleines Helferlein

JavaScript entlastet an einigen Stellen: Es läuft lokal im Browser. Nur bestimmte Aktionen, sogenannte Requests, werden als Anfrage an den Server gesendet und wieder zurückgesendet. So wird nicht die ganze Seite mit allen Inhalten aus der Datenbank neu geladen, sondern nur der entsprechende Bereich. Ein Beispiel dafür sind unsere Dashboard-Widgets, die bei Bedarf mit einem Klick einzeln aktualisiert werden können. Dank JavaScript wird das jeweilige Widget separat aktualisiert und nicht das gesamte Dashboard.

Der Nachteil ist, dass die Umsetzung bestimmter interaktiver Operationen mit JavaScript recht kompliziert ist und mehr Programmieraufwand erfordert.

Die Alternative: Vue.Js

Die Lösung für dieses Problem ist Vue.Js. 2021 haben wir bei onOffice begonnen, mit diesem Framework zu arbeiten, das die Programmierung von Schnittstellen vereinfacht. Das liegt unter anderem daran, dass man mit Vue.Js sehr einfach Abhängigkeiten definieren kann. So kann man beispielsweise festlegen, dass die Seite nur dann neu geladen wird, wenn sich Werte in Datensätzen ändern oder eine E-Mail eintrifft. Dadurch wird es für den Entwickler wesentlich einfacher, z. B. eine neue E-Mail sofort im Posteingang erscheinen zu lassen, ohne dass der Benutzer die gesamte Seite neu laden muss.

Was ist Vue.Js?

Vue.Js basiert auf JavaScript und dient im Allgemeinen der Frontend-Entwicklung, also der Entwicklung grafischer Oberflächen für Webanwendungen. Es wurde 2014 von Even You entwickelt und erfreut sich seitdem wachsender Beliebtheit, da es eine unabhängige Alternative zu React von Meta (ehemals Facebook) und Angular von Google darstellt.

Vue.Js zeichnet sich dadurch aus, dass es einfach zu erlernen und dennoch sehr mächtig ist. Benutzeroberflächen können leicht verändert werden, ohne dass das zugrundeliegende Konstrukt komplett ausgetauscht werden muss. Der größte Vorteil sind die so genannten GUI-Bibliotheken. GUI steht für Graphical User Interface. Es umfasst alle Funktionen, Ansichten und Schaltflächen, mit denen der Benutzer interagieren kann. Dank dieser GUI-Bibliotheken in Vue.Js müssen Entwickler nicht mehr alle GUI-Elemente selbst entwerfen und entwickeln, sondern können auf Komponenten und sogar ganze Views in bestehenden Bibliotheken zurückgreifen. Das spart mittelfristig viel Entwicklungszeit beim Design. Außerdem ist Vue.Js modular aufgebaut, d.h. man kann sich die einzelnen Komponenten je nach Bedarf zusammenstellen, was bei einer komplexen Software wie onOffice enterprise von Vorteil ist.

Adresshierachrie

Vue.Js bei onOffice

Der Zugriff auf Komponenten und GUI-Bibliotheken in Vue.Js reduziert den Programmieraufwand für unsere Entwickler erheblich. Darüber hinaus bietet Vue.Js bessere interaktive Möglichkeiten als JavaScript: So können einzelne Bereiche der Benutzeroberfläche in Abhängigkeit von bestimmten Ereignissen aktualisiert werden, ohne dass die gesamte Datenbank neu geladen werden muss. Stattdessen werden kleinere Requests an den Server gesendet, die nur das lesen und verarbeiten, was wirklich benötigt wird.

Wie profitieren Sie davon? Eine konkrete Umsetzung finden Sie in der grafischen Übersicht der neuen Adresshierarchie. Die Beziehungen der Kontakte werden in einer hierarchischen Baumstruktur dargestellt – diese wurde mit Hilfe einer Vue.Js Bibliothek umgesetzt. Hier konnte das Entwicklerteam auf bestehende Vue.Js-Komponenten zurückgreifen, anstatt die gesamte Organigramm-Ansicht neu zu programmieren. Ebenfalls auf Vue.Js basiert die neue Oberfläche der E-Mail-Verwaltung.

Schneller, höher, weiter

Vue.Js erleichtert und beschleunigt die Entwicklung, da man in kürzerer Zeit zu verlässlichen Ergebnissen kommt und weniger von Grund auf neu entwickeln muss. Wir erwarten dadurch nicht nur eine zeitgemäße Oberfläche, sondern auch eine Steigerung der Performance von onOffice enterprise.

Sie möchten mehr über Vue.js und der Technologie von onOffice enterprise erfahren? Dann empfehlen wir Ihnen unseren Tech-Blog. Dort erfahren Sie u.a. wie unseren ersten Schritte in Vue.js aussahen.

Keine doppelten Kosten: Wechseln Sie jetzt zu onOffice

Wir verrechnen die Kosten Ihrer bisherigen Softwarelösung für die Zeit, in der Sie dort noch gebunden sind (bis zu 12 Monate). Somit haben Sie keine Doppelbelastung und können sich voll und ganz auf onOffice enterprise konzentrieren.

Weitere interessante Artikel

So schön waren die onOffice business-beats 2024 

Über 600 Gäste waren bei den onOffice business-beats in Aachen. Für alle, die mit uns in Erinnerungen schwelgen möchten, oder dieses Jahr nicht dabei sein konnten, haben wir einen Rückblick zusammengestellt.

Jetzt lesen

Neue Partnerschaft zwischen PROPUP und onOffice: Die digitale Zukunft der Immobilienvermittlung gemeinsam gestalten

Maklerinnen und Makler müssen ständig auf dem neuesten Stand der Technik sein, um ihre Kunden bestmöglich & auch effizient zu bedienen. In diesem Streben nach Innovation und Exzellenz freuen wir uns, eine aufregende neue Partnerschaft bekannt zu geben: onOffice und PROPUP.

Jetzt lesen

Richtiger Umgang mit Off Market Immobilien: So geht diskrete Immobilienvermarktung!

Nicht nur Personen des öffentlichen Lebens nutzen den Service einer diskreten Immobilienvermarktung. Immer mehr Menschen wünschen sich mehr Privatsphäre beim Verkauf ihres Eigenheims. Immobilien „off market” zu verkaufen, ist eine gute Lösung.

Jetzt lesen

Sie möchten über Neuigkeiten rund um onOffice, aktuelle Events und Trends informiert bleiben?



Sie können den Newsletter jederzeit wieder abbestellen, indem Sie dem Link „Newsletter abbestellen“ in der Mail folgen. Gleichzeitig können Sie sich jederzeit per Mail an marketing@onOffice.com wenden, um den Newsletter abzubestellen. Öffnungsraten von Newslettern werden erfasst und zur Serviceverbesserung ausgewertet.