Sharing Data Model State in Back and Frontend

Given here are some thoughts about how to share data model state in the backend and frontend.

The backend is programmed in Python and comprises a WebAPI (application webservice), the CLI, and the ECT API. The frontend will presumably use Electron and comprise a GUI based on HTML and JS (or TS), possibly using Angular 2.

Requirements

We first given some basic design constraints/requirements (ordered by priority):

1. The majority of functions available in the frontend GUI shall be available in the backend (Python) WebAPI, API and CLI as well
2. On a data model save request, the data model's state should indicate the outdated elements so that an only changed parts must be saved (to external files)
3. Undo/redo shall be easy to implement in the frontend GUI and preferably also in the CLI

Design ideas

• The data model is basically defined and implemented in the Python backend and follows the concept of the Redux state container. The CCI-Tools redux repository contains a simple redux implementation for Python.
• Actual data model state changes only occur in the backend WebAPI state. The frontend polls for changes in regular intervals, e.g. 50 ms. On change, only the sub-path including the changed nodes of the data model tree are returned to the frontend, or just the actions that manipulated the data model state are returned. The frontend will apply the node changes (i.e. applying the actions) into it's own data model representation and update it's GUI accordingly. The UML sequence diagram below explains this idea.
• Because all state is in the backend, user could use the CLI to basically perform the majority of functions that are available through the GUI. This also includes creating a new data model instance, modifying it's state and then saving it. If the CLI operates through the WebAPI, the CLI changes would propagated to a running frontend (and vice versa)!
• The data model we are talking about here is basically the Workspace Concept which includes a workflow of parameterised data operations.

See also

1. TUTORIAL: TOUR OF HEROES: https://angular.io/docs/ts/latest/tutorial/
2. ANGULAR RESOURCES: https://angular.io/docs/ts/latest/resources.html
3. MANAGING STATE IN ANGULAR 2 APPLICATIONS: http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications
4. Getting Started with React/Redux:
   • https://egghead.io/series/getting-started-with-redux
   • https://github.com/tayiorbeii/egghead.io_redux_course_notes
   • https://github.com/sadams/todo-redux-react-webpack
   • https://github.com/reactjs/redux/blob/master/docs/FAQ.md#general-when-to-use
   • http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux
   • https://github.com/evancz/elm-architecture-tutorial/
   • https://github.com/petehunt/react-howto
   • http://redux.js.org/docs/introduction/Motivation.html

Random notes

• PhosphorJS the Desktop Toolkit von Continuum Analytics, is written in TypeScript (TS).
• PhosphorJS also works with Electron. Norman has a prototype.
• Angular 2 works also with plain JavaScript, not just TypeScript
• Flask backend + React frontend: https://github.com/alexkuz/flask-react-boilerplate