What do we need for the JS process designer?

This is a completely js-based application, different from a general web application, which is oaop. What kind of work does it need?

Concept:

1. Container
Yes, container is required. Container has two purposes: Layout and management components. Containers are required to coordinate the communication and impact between components. Manage the status between components. The component must be registered with the container. The container must handle events transmitted by components, call methods of other components, or ignore or continue to spread to the upper-level containers.

2. Components
The purpose of a component is to completely block Dom programming dependencies, and block underlying browser events, such as mouse clicks and double-clicking, to completely encapsulate these events. Components have their own lifecycles: initialization, rendering, re-painting, and destruction. Page rendering is completed by components, such as nodes, artboards, and connections.

3. Model
Modeling on pages is necessary, such as activity nodes and processes. These models are connected with components and their statuses affect each other, for example, changing the node component name actually affects the attributes of the node model. The addition of the canvas node will actually add an active node to the response process definition model.

4. Interaction with the server
The interaction with the server is based entirely on XML. The process definition model has its own XML method, which is parsed from XML to the model, and from the model to XML, two-way process. Local Storage. A natural choice.
 
Possible difficulties:
The biggest difficulty is the implementation of components, event processing and propagation mechanisms.

Development Process:

1. Selection of underlying databases
The work required by the underlying library for object-oriented development: inheritance, interface implementation, unified event processing interface, and element Dom programming encapsulation.

2. Development of Basic Components
Canvas, graphical components, link components, pop-up panels, simple table components, and trees. Encapsulate basic events. Events can be customized.

3. Container development and management components
Components are actually container implementations, such as the canvas concept. Mutual influence between nodes in the canvas.

4. Support for adding models

5. js parsing between XML and Model

Refer:
EXT is a good reference, but it is too cumbersome. The more features, the slower the implementation. Refer to the concepts of containers and components.
The implementation of draw2d is too simple. It is basically a graphics library, and the implementation of graphics components is considered.

Rong Hao original, reprinted please indicate the source :)