Den typischen Prozess zuerst Design, dann Implementierung kennt jeder. Bei der Implementierung gilt es dann, zuerst das Design in vorm von beispielsweise HTML nachzubauen. Doch was ist, wenn es viel schneller gehen könnte? Mittels Low-Code Frameworks wie Luisa ist das möglich. In diesem Blogartikel wird das Framework kurz beschrieben und eine kleine Anwendung als Beispiel durchgemacht.

Was ist Low-Code?

Wie der Begriff schon verrät, ist das Ziel wenig Code selbst schreiben zu müssen. Nützlich ist das vor allem für Personen mit geringen Programmierkenntnissen. Die Idee ist, dass Fachleute sich um den visuellen Teil der Anwendung kümmern, der dann zur Laufzeit durch Softwarekomponenten interpretiert wird. Es gibt verschiedenste Frameworks, die unterschiedliche Ansätze verfolgen. Wichtig ist jedoch, das richtige Verhältnis zwischen Modellierung und Code zu finden, sodass im Endeffekt die Komplexität verringert und nicht erhöht wird.

Luisa

Luisa verfolgt den Ansatz, dass nur der Frontend-Code generiert wird, sprich HTML und CSS, die Businesslogik hingegen ist Aufgabe des Programmierers bzw. der Programmiererin. Zurzeit werden Figma und Quant-UX als Design-Tools und Vue.js als Framework unterstützt. Luisa ist Open Source und kann kostenfrei genutzt werden.

In seinem Code muss nur die Luisa-Komponente eingebaut werden, die dann den Rest erledigt. Im Development kann man Luisa mit dem Design-Projekt verbinden, sodass Design-Änderungen sofort in der Anwendung sichtbar sind. Für Production kann das Design-File auch heruntergeladen und eingebunden werden. Ändert sich etwas am Design muss das File erneut heruntergeladen werden. Um Logik hinzufügen zu können, werden Data- und Method-Binding benutzt. In Figma benötigt man dazu das Figma-Low-Code Plugin, in Quant-UX steht einem diese Funktion von Haus aus zur Verfügung. Im Code können ebenso Anpassungen beim Design gemacht und benutzerdefinierte Komponenten verwendet werden.

Beispiel

Nachfolgend wird ein kleines Beispiel durchgemacht, um zu sehen, wie Luisa eingebunden und verwendet wird. Die Applikation soll nach Eingabe eines Datums, die restlichen Tage bis dahin ausgeben. Hierbei wird Quant-UX verwendet.

Design erstellen

Zuallererst wird ein neues Projekt in Quant-UX erstellt und ein Screen hinzugefügt. Auf diesem wird nun ein Date Picker, ein Button und ein Text platziert.

Dann sieht es in etwa so aus:

Hinweis: Ich habe die Schriftgröße auf 16 px erhöht.

Projekt Setup

Da in diesem Beispiel ein neues Projekt erstellt wird, ist es am einfachsten das Starterprojekt zu klonen.

git clone https://github.com/KlausSchaefers/luisa-vue3-starter.git

Anschließend nicht vergessen, die node modules zu installieren.

npm install

In Home.vue muss nun der richtige Token zum Design-Projekt eingetragen werden. Diesen bekommt man in Quant-UX indem man auf das Projekt klickt und dann Share auswählt.

data: function () {
    return {
      design: "token...",
      viewModel: {
        date: '',
        result: defaultText
      },
      config: {
      }
    }
  },

Bei Quant-UX wird der Token so eingetragen. Bei Figma müssen sowohl die Figma File ID, welche man aus der URL herauslesen kann, als auch der Access Key, welchen man in den Settings bekommt, eingetragen werden.

Nun heißt es, Projekt starten und testen, ob das Design aus dem Quant-UX Projekt angezeigt wird.

npm run serve

Die Applikation sieht schon mal schön aus. Nun fehlt nur noch die Logik.

Logik hinzufügen

Um Daten auslesen und der Applikation sagen zu können, was sie beim Klick auf den Button tun soll, müssen in Quant-UX Variablen- und Methodennamen hinzugefügt werden. Dazu klickt man beispielsweise auf die Datumsauswahl, wählt auf der rechten Seite „Prototype“ und fügt mit „Add Data Binding“ eine neue Variable hinzu.

Um eine onClick-Methode hinzuzufügen, wählt man den Button aus und gibt unter „Low Code – Callbacks“ den Methodennamen an.

Danach sollte es im Prototype-Modus ungefähr so aussehen:

• Date Picker: date
• Text: result
• Button: calculate

Nun kann wieder in das Vue.js Projekt gewechselt und anfangen werden, die Variablen zu verwenden und die Methode hinzuzufügen.

In Home.vue kann man unter „data“ die verwendeten Variablen mit einem Defaultwert auflisten.

data: function () {
    return {
      design: "token...",
      viewModel: {
        date: undefined,
        result: "Select a date to calculate the remaining days"
      },
      config: {
      }
    }
  },

Die calculate Mathode kann man dem „methods“ Objekt beifügen. Um zu sehen, ob alles funktioniert, kann man sich hier erstmal das Datum ausgeben lassen. Variablen können über das „viewModel“ Objekt verwendet werden.

methods: {
    calculate() {
      console.log(this.viewModel.date)
    }
  }

Startet man das Projekt mit npm run serve bzw. läuft es noch, sollte man nachdem man ein Datum ausgewählt und auf den Button geklickt hat, dieses in der Konsole des Browsers sehen.

Nun kann der eigentliche Code geschrieben werden. Die Rechnung der übrigen Tage lässt sich der Übersicht halber in eine andere Funktion auslagern.

function calcRemaining(date) {
  const diff = new Date(date) - new Date()
  return diff > 0 ? Math.ceil(diff / (1000 * 60 * 60 * 24)) : 0;
}

methods: {
    calculate() {
      if (this.viewModel.date) {
        const days = calcRemaining(this.viewModel.date)
        this.viewModel.result = `${days} days left`
      } else {
        this.viewModel.result = "Select a date to calculate the remaining days"
      }
    },
  }

Gibt es ein Datum, so sollen die übrigen Tage bis dahin angezeigt werden, ansonsten soll den User*innen mitgeteilt werden, dass zuerst ein Datum ausgewählt werden muss.

Weitere nützliche Infos

Möchte man, dass sich der Button im gehoverten Zustand vom normalen unterscheidet, so kann man einfach in Quant-UX den Hover-State bearbeiten. Dafür wählt man den Button aus und ändert im Design-Fenster unten unter „Hover“ beispielsweise die Hintergrundfarbe.

Was die Responsiveness betrifft, haben alle Komponenten von Haus aus eine relative Breite. Man kann im Design-Fenster allerdings auch festlegen, dass die Höhe und/oder die Breite fix sein soll (unter „Fixed Size“).

Ebenso kann man angeben, inwiefern das Element an das übergeordnete Element angeheftet werden soll, sodass es beispielsweise immer links, rechts oder mittig platziert wird (unter „Pin“).

Benutzerdefinierte Komponenten kann man in Quant-UX, wenn ein Element ausgewählt ist, unter „Prototype“ – „Low Code – Rendering“ angeben. Im Code muss dann das main.js File bearbeitet werden. Hat man beispielsweise MyTextComponent in Quant-UX hinterlegt und zum Vue-Projekt hinzugefügt, so würde man die Komponente in main.js so registrieren.

createApp(App)
    .use(router)
    .use(Luisa)
    .component('MyTextComponent', MyTextComponent)
    .mount('#app')

Fazit

Luisa beschleunigt den Entwicklungsprozess erheblich. Man muss keine Zeit mit HTML und CSS vergeuden, sondern kann direkt mit der Implementierung der Logik starten. Dadurch hat man genau eine Basis für das Design und sobald sich etwas am Prototyp ändert, ändert sich das auch im Projekt. Für einfache Anwendungen ist Luisa sehr praktisch. Bei komplexeren Projekten, speziellen Anforderungen oder einem hohen Bedarf an Individualisierung stößt das Framework jedoch an seine Grenzen. Im Bereich des Responsive Designs stößt man ebenfalls rasch an Einschränkungen. Verwendet man beispielsweise eine Tabelle, so ist diese immer gleich hoch und die Höhe der Zeilen variiert je nach Anzahl. An dieser Stelle sei erwähnt, dass ich noch nicht versucht habe, das CSS manuell anzupassen, und eventuell bietet Figma hier mehr Flexibilität. Das müsste noch genauer getestet werden. Die Dokumentation fällt insgesamt recht knapp aus. Es lohnt sich aber dennoch einmal hineinzuschauen und Luisa auszuprobieren.

Quellen

https://luisa.cloud/

https://javascript.plainenglish.io/luisa-the-low-code-ui-framework-5aad9a8bbf50