Story
Mendix

Mendix Widgets jetzt noch einfacher mit React erstellen

By Huib de Graaf | 30. Juli 2019
Übersicht:

Low-Code-Plattform Mendix

Die Low-code platform Mendix ist Ihnen wahrscheinlich bekannt. Aber wussten Sie auch, dass Sie mit dem Zusatz von React Ihre Entwicklungen auf die nächste Stufe bringen können? Es schafft nicht nur ein noch nie dagewesenes Erlebnis für die Benutzer, sondern ermöglicht es Ihnen auch, für ein größeres Kundenkreis zu bauen. Mit dieser Weiterentwicklung können Programmierer jeder Erfahrungsstufe leicht ein personalisiertes Low-Code-Widget erstellen.

Eine neue Art der Erstellung von Widgets mit Mendix

Zuvor wurden personalisierte Widgets innerhalb des Dojo-Frameworks erstellt. Dies war nicht immer ideal. Es ist viel Insiderwissen erforderlich, es gibt wenig Dokumentation, und Sie verbringen viel Zeit, bevor Sie etwas Einfaches eingerichtet haben. Und deshalb sind wir froh, dass Mendix Studio 8.0.0 (beta) dies ändert. Mit Mendix erstellen Sie kompakte Webkomponenten (steckbare Widgets) unter Verwendung der React-Bibliothek. Hierfür werden APIs von Mendix verwendet, die sehr einfach aber mächtig sind. Und von npm lassen sich Softwareteile von Drittanbietern einfach herunterladen und implementieren.

Die kleine Lernkurve beim Erstellen von Widgets mit React

Ein großer Vorteil von React ist, dass die Lernkurve kleiner ist als bei seinen Vorgängern. React hat eine kleine Bibliothek und wenige Referenzen, die man lernen muss. Der Rest ist basierend auf Javascript. Easy, richtig? Das Erlernen von React ist eine gute Investition für jeden Low-Code-Frontend-Entwickler. Sobald Sie das gemeistert haben, können Sie personalisierte Widgets erstellen und alle Funktionalitäten von React nutzen. Darüber hinaus ergänzen sich React und Mendix sehr gut, so dass man ihre Stärken kombinieren kann.

Schritt-für-Schritt-Plan für die Erstellung von pluggable Widgets mit Mendix

Mendix hat einen eigenen How-to-Text für die Erstellung eines einfachen Widgets erstellt. Sie müssen sich nicht durch den ganzen Text scrollen, denn wir haben einen kompakten Schritt-für-Schritt-Plan erstellt. Auf diese Weise können Sie einfach loslegen.

Schritt 1. Mendix-Einstellungen für die erste Verwendung

Bevor Sie loslegen, benötigen Sie eine Reihe von Werkzeugen und Kenntnissen. Wir empfehlen Erfahrung mit Mendix, JavaScript (React, Typescript) und HTML/CSS. Außerdem benötigen Sie einige Programme: die Integrierte Entwicklungsumgebung (IDE) und Visual Studio Code. Anschließend müssen Sie ausschliesslich die folgenden Programme installieren:

  1. Node.js
  2. Npm
  3. Yeoman
  4. Mendix Pluggable Widget Generator

Nummer 2 und 4 können auch direkt heruntergeladen werden, indem das folgende Codestück in Visual Studio Code hinzugefügt wird:

  • npm installieren npm@latest -g
  • npm install yo -g
  • npm install @mendix/generator-widget -g

Schritt 2. Verwenden Sie den Mendix Pluginfähigen Widget Generator, um Widgets mit React zu erstellen

So, jetzt, wo Sie alles haben, ist es an der Zeit, etwas Neues zu schaffen! Mit dem Mendix Pluginfähigen Widget Generator bauen Sie aus dem Stammverzeichnis eines bestehenden Mendix-Projekts. Öffnen Sie den Projektordner mit Visual Studio Code und verwenden Sie die folgende integrierte Befehlszeile:

  • mkdir CustomWidgets
  • cd CustomWidgets
  • yo @mendix/widget TextBox

Dieser Code erstellt einen Ordner, in dem ein oder mehrere Widgets platziert werden. Haben Sie Spaß mit dem Namen des Widgets, denn Sie können ihn beliebig gestalten. Dann stellt Ihnen das Skript einige Fragen (siehe Bild unten), z. B. welche Programmiersprache Sie verwenden möchten. Wir empfehlen JavaScript E56.

Mendix afbeelding

Schritt 3: Entwickeln

Öffnen Sie den Widget-Ordner in VSCode und beginnen Sie mit der Erstellung, indem Sie den folgenden Code eingeben:

  • npm run dev

Jetzt sind Sie bereit für die Erstellung eines steckbaren Widgets mit React!

Die Zukunft von Mendix und React

Mendix pluggable Widgets sind brandneu und daher wurde bisher wenig über sie geschrieben. Glücklicherweise gibt es bereits eine Menge über React zu finden, also lesen Sie sich unbedingt ein. Verglichen mit der älteren Art, Widgets zu bauen, fehlen in Mendix noch Funktionalitäten wie der Zugriff auf Entitäten. Diese werden hoffentlich bald hinzugefügt. Trotzdem können Sie schon jetzt erste Tests und einfache Widgets bauen. Wir sind auch schon am Bauen! Haben Sie noch Fragen oder möchten Sie einfach nur anrufen? Bitte kontaktieren Sie uns!

Teilen Sie den Artikel via

Huib de Graaf

Vertriebsleiter Deutschland

Wollen Sie mehr wissen?

Nehmen Sie Kontakt auf mit Huib.

Nächster Artikel story

RAD-Methodik: Schnelle App-Entwicklung

By Huib de Graaf | 3. März 2021