[REACT] Architecture suggestions for Bryntum and React Single Page Application stores

[mmelcot]

Back in 2017, we started to work with Bryntum ExtGantt and ExtScheduler that we included in our application to manage timelines.
In the same time we introduced React and Redux librairies to manage components and states in our front-end.

Screenshot from 2020-11-12 14-08-28.png (38.7 KiB) Viewed 1368 times

We were new to these technologies and at this time we hesitated a bit on the overall architecture, on how to make these blocks play well together.

• Our first idea was to put all the data in Redux (like for a standard React/Redux app), and feed Bryntum Gantt/Scheduler (through ExtJS memory proxy) and other React components
• However discussing with your team, it looked it wasn't feasible because of ExtJS 6.5.x [i]one + half-way[/i] binding between Proxy and data object. (See post https://forum.bryntum.com/viewtopic.php?f=39&t=8966)

Screenshot from 2020-11-12 14-08-37.png (145.75 KiB) Viewed 1368 times

In 2020, we introduced the new generation of Gantt and Scheduler components (no-ExtJS), in some new pages of our app.
We now plan to upgrade the legacy pages (that used ExtJS) with non-ExtJS components.

For this reason, we would like to discuss with you what seems to be the best approach to handle Bryntum timeline, together with other React components on a Single Page Application.
Thanks to your understanding of the inner mechanism of the Bryntum Task/Dependency/Other stores, could you provide us your suggestions and insights about such an architecture, where we would like to keep things simple, possibly in a single place and easy to maintain.

[saki]

As usually, there is no single one "best architecture" so I'll explain what is available and from that we can choose what would be (most) suitable for your application.

Bryntum Scheduler uses several stores internally (EventStore, ResourceStore, DependencyStore, AssignmentStore and these stores are used to hold data used for the visualisation. As in Ext the views are bound to these stores so any change in the data is automatically reflected in the view. This will never change – we will always have these stores.

They are subclasses of Bryntum AjaxStore what means that each of these stores is capable of loading and syncing data to the server all by itself. This would give one possibility of the architecture similar to right-hand picture.

The stores got a In Gantt and SchedulerPro got new envelope to provide a central place for all data in the form of ProjectModel. The data received from the server are dispatched to individual stores managed by project. With this we could simplify server APIs and implement just one capable of returning data required and digestible by the project. We're still looking at the right-hand picture.

So far for the "mixed" approach.

It is also easy to implement "pure" React-Redux solution. For such we would let server transport for React to deliver data to the Redux store and we would bind data property of the aforementioned stores to this data. This approach is further supported by https://www.bryntum.com/docs/gantt/#Core/data/mixin/StoreSync#config-syncDataOnLoad config option that causes the current datasets of the stores to be updated, not completely replaced (default).

We use this approach in our React + Redux Advanced example which uses Axios for server transport and feeds Redux store, which is bound to the Scheduler data.

With this we would get to the left-hand picture.

I hope you can use this as the basis for the application design, or keep asking, we'll be glad to assist you.