Question

Widget development with Webpack and React

15

Hi, At Finaps we have developed a new development environment to create Mendix widgets which include libraries like React. It is actually an adaptation of a NPM, Webpack, and Babel toolchain, so you can easy include any NPM package and target (very) old browsers like for instance IE 9. This new toolchain works for any Mendix version which we've tested (that is Mx 6 and 7) and is future-proof. This isn't actually a question, we just want to share this with the community because we are really excited about the new possibilities for widget development! It is really cool to be able to use technologies like React, Plotly, and Material Design components. The boilerplate, with an explanation on how it works, can be found for free (open-source license) at: https://github.com/Finaps/boilerplate-mendix-react-widget Have fun developing widgets! We really like to hear your experience with widget development :)

asked 2017-09-20

Emile Broeders

3 answers

Andries Smit · Answer 1 · 2017-10-19

Hi Emiel,

Thanks for sharing. Great seeing people experimenting with React combined with Mendix. Well done!

Though there are some downsides; the Mendix platform does not ship with React as a result all custom widgets need to bundle React them self making them bigger and less suitable for mobile or low bandwidth.

React comes with a great concept of data flow, though the Mendix platform does not support it at the moment, so you will need to understand both React as Dojo lifecycle make the widget more prone to errors and complex to maintain and optimize.

Personally I would encourage people to dive into React, through you should be carefull building widgets for Mendix app store and for production environments.

Some of the R&D supported custom widgets are already based on React, unfortunately React is not available for all custom widgets.

Hope that React will be first class citizen for everyone of the Mendix platform soon.

Cheers, Andries

Emile Broeders · Answer 2 · 2017-10-20

Hi Andries,

Thanks for the comment. I am aware that this method allows the development of complex widgets, which was my intent all along. This comes obvious with the downside that the complexity of the project increases, but that is inevitable with more complex features. It is true that if you make custom widgets for your Mendix project, then you need a Javascript knowledge to build it. That is still the same whether you use React or not.

What I tried to achieve with this boilerplate was presenting a method to build complex widgets with nice complex features, such as interactive data charts, as simple as possible within Mendix. I think that the tools presented work quite well and allows developers to build really cool things. As an example, for some projects we now use the D3 library to build widgets similar to what can be found here: https://github.com/d3/d3/wiki/Gallery .

As long as Mendix does not provide first class citizen support for these kind of projects, we have to resort to these kind of tools. It is my hope that this will no longer be necessary in the near future.

Best,

Emile

Ryan Mocke · Answer 3 · 2018-10-12

As some one new to react from a mendix background, it is interesting to see there is already a movement for a mendix/react future.