“React in a Big Way”

In the experten.werkstatt at solutions.hamburg, Baschir Jaghoori and Martin Backschat are sharing their experiences of developing a React-based framework. We interviewed the two software architects ahead of the workshop.

mgm live: Baschir and Martin, you are developing at mgm a framework based on React. What kind of a framework is it and what parts are you playing in the project?

Martin: Our vision is to develop a kind of construction kit for business applications – one that is model-based in areas such as forms, including validations and calculations, lists with search filters and faceting options, and also for use cases and layouts for applications. The project is known as A12. We already have many building blocks, both client-side and server-side, such as widgets, engines to interpret runtime models, validation components, user management, and security. My current task is to bring the components together at the application level.

Baschir: As an architect for client-side development I am responsible for everything that is connected with typescript in the browser. That includes above all our engines, which operate with models. The models define parts of the application. Using React we can convert the runtime  state simply and stably in HTML.

mgm live: How did you come to use React?

Baschir: Our starting point was an XForms engine that we had used for forms in customer projects. The engine was written in Java and translated into JavaScript using GWT. We wanted to take the engine into the next generation on the basis of native JavaScript technology. React came onto the market at exactly the same time, which was a real stroke of good luck for us. It is a superb match for our model-based approach.

Martin: Starting from the engine for forms we asked ourselves which areas of the application recur in a similar form in many customer projects, are in our experience well understood and can be described and parametrized by using models. In this way further models, engines, and components took shape with the result that we are now on the way to covering entire applications. React is a client-side game changer. You can simply think top-down and render what you see. The key feature for engines is that they function from the idea in much the same way as Redux – as a kind of store-based architecture. The form engine, for example, takes the model and the data and then presents the form. That works in the engine much the same as in Redux – for the most part in a stateless and functional way.

mgm live: Which experiences would you like to convey in the experten.werkstatt?

Baschir: We have learnt a lot from the special way in which we use React. We would like to pass this knowledge on and to show how, in an enterprise context, to develop model-based solutions of one’s own based on React, Redux, and Typescript. They make up a very powerful combination.

Martin: The way in which we use React can prove very interesting for enterprise architects. We not only use React as a view technology; we also use other elements from the React ecosystem such as Redux for state management. The combination with models and engines is incredibly exciting for all scenarios in which several similar kinds of development work are required. Full use of the technology is made in an entirely different way. Take forms, for example. For one form it is not worth developing a model and building an engine; for 1,000 forms with many variants and versions it is another matter. The model-based approach saves an enormous amount of time and costs.