Story
Mendix
React

Mendix widgets bouwen nu nog makkelijker met React

Door Duco Zitman | Invalid Date

Je zult het low-code platform Mendix waarschijnlijk wel kennen. Maar wist je ook dat met de toevoeging van React je je ontwikkelingen naar de next level kan trekken? Het geeft niet alleen een ongekende ervaring voor gebruikers, het stelt je een groter publiek in staat om te bouwen. Met deze vooruitgang kunnen programmeurs van ieder niveau makkelijk een gepersonaliseerde low-code widget bouwen.

Een nieuwe insteek

Voorheen werden gepersonaliseerde widgets gebouwd binnen het Dojo-framework. Dit was niet altijd ideaal. Er is veel voorkennis nodig, weinig documentatie beschikbaar en je bent lang bezig voordat je iets simpels hebt opgezet. En daarom zijn we blij dat Mendix Studio 8.0.0 (beta) hier verandering in brengt.

Met Mendix maak je namelijk compacte webcomponenten (pluggable widgets) aan de hand van de React-bibliotheek. Er worden hierbij API’s van Mendix gebruikt die erg eenvoudig maar krachtig zijn. En vanuit npm zijn stukken software van derden makkelijk te downloaden en implementeren.

De kleine leercurve van React

Een groot voordeel van React is dat de leercurve kleiner is dan die van zijn voorgangers. React heeft maar een kleine library en een paar references om te leren, en de rest is gewoon Javascript. Makkie toch?

Nee, maar zonder grappen, het leren van React is een goede investering voor elke low-code front-end developer. Als je dat eenmaal onder de knie hebt, kun je gepersonaliseerde widgets maken en alle functionaliteiten van React inzetten. Daarnaast complementeren React en Mendix elkaar mooi, waardoor je hun krachten mooi kunt bundelen.

Stappenplan voor het bouwen van pluggable widgets

Mendix heeft een eigen how-to tekst opgezet voor het maken van een simpele widget. Jij hoeft niet door die hele lap tekst te scrollen, want hebben wij een compact stappenplan gemaakt. Zo kan jij makkelijk aan de slag.

Stap 1. Instellingen voor het eerste gebruik

Voordat je aan de slag gaat, heb je wel een aantal tools en kennis nodig. Ervaring met Mendix, JavaScript (React, Typescript) en HTML/CSS raden we je aan. Daarnaast heb je nog wat programma’s nodig: de Integraded Development Environment (IDE) en Visual Studio Code. En dan - we zijn er bijna - moet je nog het volgende installeren:

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

Nummer 2 en 4 kun je ook direct downloaden door de volgende stuk code in Visual Studio Code toe te voegen:

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

Stap 2. Bouw iets nieuws

Zo, nu dat je alles hebt, is het tijd om iets nieuws te maken! Met de Mendix Pluggable Widget Generator bouw je vanuit de root map (de hoofdmap) van een bestaand Mendix project. Open de project folder met Visual Studio Code en gebruik de volgende ingebouwde commande line:

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

Deze code creëert een folder waar een of meerdere widgets in komen. Leef je uit op de naam van de widget, want hier kun je van maken wat je wilt. Daarna zal het script je nog wat vragen stellen (zie afbeelding hieronder) zoals welke programmeertaal je wilt gebruiken. Wij raden JavaScript E56 aan.

Mendix afbeelding

Stap 3: ontwikkelen maar

Open de widget folder in VSCode en start met bouwen door de volgende code in te voeren:

  • npm run dev

Nu ben je er helemaal klaar voor om een pluggable widget te maken met React!

De toekomst van Mendix en React

Pluggable widgets van Mendix zijn gloedjenieuw en daarom is er ook nog maar weinig over geschreven. Gelukkig is er al wel veel te vinden over React, dus lees je daarop alvast goed in.

Vergeleken met de oudere wijze van widgets bouwen, ontbreken er nog functionaliteiten bij Mendix zoals toegang tot entities. Deze zullen hopelijk binnenkort worden toegevoegd. Toch kan er alvast gebouwd worden aan de eerste testen en simpele widgets. Ook wij zijn alvast aan het bouwen geslagen! Mocht je nog vragen hebben of vind je het gewoon gezellig om te bellen? Neem dan vooral contact met ons op!

Duco Zitman


E: duco.zitman@incentro.comT: +31616323454
volgende story
Headless e-commerce: alles (echt alles) over dit cms van de toekomst
Door Bart Klaver | 2019 M07 26