Now FSM + Extensions and Extension Points get assembled

In the previous articles we have described how Hierarchical State Machines (HFSMs) can be used to define the whole application logic and advantages of using Services, Extension Extension Points to build user interfaces. This blog post continues this series and describes how these architectural patterns are used together.

Demo :

A HFSM engine alone does not determine how information is processed and displayed on the screen. It is the code associated with each step that determines it.
Each state can declare the services on activation and remove them when the state is completed. Extension Points are visual services, pieces of UI, that activate dynamically and insert themselves automatically in the slots defined by extension points.

In hierarchical state machines each parent state can define extension points and child states that will gradually add and remove extensions as the application progresses. This allows us to build highly dynamic applications that are configured automatically at each moment during its execution.

With classical architectures all changes, in the application logic or in user interfaces, require code modifications and thus rebuilding and re-deployment of the whole monolithic system.

With our architectural approach the logic of the application is reversed and defined by a FSM configuration that does not contain code. We only need to change or re-order the sequence of states to modify the application logic. We can also dynamically bind actions with each state without changing the code. And everything works as a whole thanks to FSM and dynamic services (extensions and extension points).

Conclusion:

The combination of the two techniques can reduce time and costs of application development and transform the curve of complexity from exponential to linear.

With a library of statecharts it becomes possible to reuse these to define logical blocks and make them available in a dedicated repository with the corresponding state handlers.

There are already quite a good number of marketplaces dedicated to UI layouts or individual components.
Using FSM as the application backbone opens the way for a marketplace, of reusable logical blocks, that enable you to build Lowcode web apps. We'll get back on that.

credit for data: https://github.com/shopifypartners/product-csvs