How to React to the new way Mendix widgets are built

The low-code platform Mendix brings a lot to the table, but eventually, once you start to develop more complex applications, you can be in a situation where something isn’t possible out-of-the-box. This is where custom widgets come in.

Pluggable widgets

Custom widgets have previously been developed within the Dojo framework. Without going into further detail about it, I am happy to say it now has changed. The Mendix Studio Pro 8.0.0 release has introduced a new way of building custom widgets.

The now called Pluggable widgets are built with the React library. Mendix has stated that these widgets use simpler and more powerful Mendix APIs. This also comes with the powerful capability to use external dependencies and install them using npm.

React

Another huge benefit, in my opinion, is that React has a smaller learning curve than the Dojo framework. React has a small API to learn, for the rest, it’s just JavaScript. Writing a custom widget is mostly like any React component. As Mendix itself is been using the React library under the hood now, learning React is a good investment for any low-code front-end developer.

While walking the learning path of React, I do get excited about this news and believe this gives more possibilities in making faster widgets. In the past, I developed JavaScript functions outside of Mendix rather than inside a Dojo widget. For me, it would just take too much extra development time combined with the Dojo learning curve. React is a library that helps create components faster, just like Mendix. The two technologies complement each other in my view.

Start building pluggable widgets

Mendix has provided a how-to for creating a simple widget yourself. Further documentation seems to be absent at the time of writing. As the how-to helps develop a simple widget step-by-step, I intend to make a very compact list of the steps.

First-time set-up

Before implementing any of this, you need some tools and knowledge to get started. Some experience with Mendix, JavaScript (React, Typescript) and HTML/CSS is recommended. Furthermore, you need some tools: an integrated development environment (IDE), the Visual Studio Code. Lastly, you have to install the following:

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

Point 2 till 4 can be directly downloaded through the built-in command line from Visual Studio Code.

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

Create new

Now that you’ve done all that, it’s time to create something new. The last program that you need to download, the Pluggable Widget Generator, helps to build from the root folder of an existing Mendix project. Open the project folder with Visual Studio Code. From the root, use the built-in command line:

mkdir CustomWidgets
cd CustomWidgets
yo @mendix/widget TextBox

The code creates a folder containing one or multiple widgets. The name of the widget (TextBox) could be anything. The script will ask some questions where Mendix would recommend TypeScript while my preference today is JavaScript ES6.

Development

Open the widget folder in VSCode and start the development process with the following command:

npm run dev

Now you're all set to develop the pluggable widget with React.

Work in progress

The pluggable widgets are brand new. Documentation is constantly being updated and new features come with the latest studio releases. With the latest release of Mendix 8.7, it is now possible to load your own list of data. Create your own custom carousel, listview, datagrid, … this is exciting!

Takeaway

This is a good time to start learning how to develop pluggable widgets. The documentation on the Mendix part is changing with every studio release and there is a ton of documentation on developing with React. This will be simpler to learn than the Dojo widgets. The Mendix Yeoman generator provides a good starting point.