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 manier van widgets bouwen met Mendix
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 widgets bouwen met 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 met Mendix
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. Mendix 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:
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. Gebruik de Mendix Pluggable Widget Generator om Widgets te bouwen met React
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.
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!
