The experten.werkstatt of solutions.hamburg provided an opportunity for professional exchange among software experts. mgm was on site at the Developer Day on September 6th and organized the track “Enterprise Framework on React“. A brief report.

From September 6 to 8, 2017, not only students and teachers populated the media campus of the Hamburg University of Applied Sciences. They were joined by a number of curious older semesters with green badges and wristbands, which ran through the corridors and followed purple arrows on the red linoleum floor. The trigger for this was the experten.werkstatt of solutions.hamburg, Germany’s largest digitization congress. Here, experienced software developers and architects were given the opportunity to once again visit lecture halls and seminar rooms and exchange their practical experience.

Framework enthusiasm, Aliens and Picasso

Hamarz Mehmanesh, CEO of mgm, started the track “Enterprise Framework on React” on September 6th with a very clear explanation of the context and motivation that led to the development of the model-driven framework A12 at mgm. The main reason for this was that there were certain expenses associated with enterprise applications that could not be reduced by the frameworks available on the market – despite all the enthusiasm with which software developers constantly evaluate new frameworks and test them with small applications.

From a manageable application that initially contained forms with 300 fields, a grown application with 40,000 fields and millions of validation rules emerged.

Example ELSTER Online: From a manageable application that initially contained forms with 300 fields, a grown application with 40,000 fields and millions of validation rules emerged. In order to make the high efforts of subject-specific changes manageable, the idea arose to outsource the domain-oriented content to models. Special editors give business experts and experts the opportunity to adapt these models – without the intervention of a developer. Further efforts that the framework addresses are the increasing requirements on user interfaces. Here Hamarz described the path from UI/UX experts as external resources – the aliens – to the intermediate step as internally appreciated “Picasso” service providers to actual team colleagues who are seamlessly integrated into the development process.

A perfect match: React and model-driven development

In the second part, Baschir Jaghoori and Martin Backschat highlighted selected technical aspects of the framework. Baschir started with a live demo on a test system, which showed an example application in the industrial insurance sector created with A12. It demonstrated that business users today expect a certain “app feeling”. He then went on to show how React and Virtual DOM technology is used in the framework using a few code examples. For example, a tree widget is created by means of a template for the component, while certain features are placed in their own code fragments and can be added in a cascade.

After examples of forms and repeatability, Baschir gave an impression of the model-driven aspects of the framework and how rendering with React coincides with it: “We see the information from the business domain as a kind of state. The model is always leading, the UI is derived.”

Martin started one level higher and first presented current developments to build whole business applications in a model-driven way. The focus was on architectural considerations with regard to the use of React and the Redux store architecture. Starting from the question of how elements can be wired at the application level, Martin explained the basics of the “choreography of engines”. A central challenge: How to cut the application? And which aspects are even raised to the application level?

Today, almost all common practices used by developers on the server side can also be used in the client – even dependency injection.

The talk was concluded with reflections on the React ecosystem and the extent to which concepts such as immutability influence the entire technical architecture. One last observation: Today, almost all common practices used by developers on the server side can also be used in the client – even dependency injection. This makes it possible to control a greater complexity in the client architecture.

Design meets development

With Livia Böhme and Fred Funke, two UI/UX experts completed the track. The focus of their presentation was the question: How do you manage to incorporate design in a software house and integrate it into the development process? Livia first presented the most common forms of organization. The work around UI is either located downstream of the development according to the motto “Make it beautiful” or upstream as in the typical agency model. The problem with these approaches is that they result in a great deal of effort and inconsistencies. mgm therefore relied on the approach to embed UI/UX as part of the agile development process and to have overlaps both in the direction of business analysis and development. Using examples, Livia showed how this form of organization works and how design decisions can be made comprehensible.

“Lego kit without instruction”: Therefore, patterns are important – recommendations for the interaction of different components.

Fred first addressed the design challenges in the context of framework development. For example, a component-based UI must be designed for reusability in a wide variety of contexts and deal with nested structures. Moreover, the mere provision of components is not enough. That would be like a “Lego kit without instruction”. Therefore, patterns are important – recommendations for the interaction of different components. Livia then introduced the A12 widget showcase, which shows business analysts the available components directly in the browser and provides guidelines for use. Last but not least, the UI/UX experts demonstrated the UI Designer – the editor of A12, which enables the user interface to be set up. And this is where things have come full circle: Changes to the UI model led directly to changes in the user interface rendered with React – without any further development effort.