Baidu Brain Map analysis: How to carry on the Progressive development of Complex Web applications

On April 8, 2017, Zhang Bo delivered a speech titled “Progressive” Development of Complex Web Applications at “HTML5 Dreamworks & Microsoft Developer Salon No. 05 — Continuous Integration”. As the exclusive video partner, IT mogul Said (wechat ID: Itdakashuo) is authorized to release the video through the review and approval of the host and the speaker.

Baidu Brain Map is an online mind map editing tool, which is often used in work planning, brainstorming, meeting minutes, reading notes, exam Outlines and so on.

The bottom layer of Baidu Brain Map is based on SVG vector graphics library. On this basis, it is a mind map package — Kityminder-Core. There is also a Hotbox with perfect mapping function, which is a shortcut menu of upper and lower text. The final result is an editor, kityminder-Editor.

These are functional constructs, but there are also business applications such as file management, user authentication, sharing, historical versioning, and so on. It can be seen that the whole structure from the inside to the outside of the universality continues to decrease, the degree of customization also increases. This is a gradual process, with different target populations finding the desired features.

Kity is a vector graphics library with object-oriented support at its lowest level. It is well known that JavaScript is a weakly typed language, and if you want to use it to accomplish engineering output, you need object-oriented support. So we built an implementation of an object-oriented language based on ES5, including defining classes, extending classes, inheritance, and blending. Below is the Kity class inheritance relationship.

One of the core contents of Kity is the concept of coordinate system, which is divided into its own coordinate system and reference coordinate system. There is only one self coordinate system, which defines the graph. The reference coordinate system is selected by the observer, and there are different coordinate systems for different references. Its purpose is to observe the graph.

The two-dimensional linear transformation matrix in the figure above can clearly present the graphical transformation in the two-dimensional space.

Linear transformation relative to the specified coordinate system: shape.getTransform (refer):matrix

The region relative to the graph’s own coordinate system: shape.getBoundarybox ():box

Area relative to the specified coordinate system: shape.getrenderBox (refer):box

Shapeevent.getposition (refer):Point specifies the position of the event relative to the specified coordinate system

ExecCommand execCommand(command,args)

2. Query the command status as follows: queryCommandState(command) 0 is returned if the command can be executed, -1 is returned if the command cannot be executed, and 1 is returned if the command has been executed

3. Query Command result: queryCommandValue(Command)

In these three functions, the Command argument represents the Command that needs to be passed in, and args supplements the argument. For example, minder.execCommand(‘ expand ‘) expands the current node.

AppendChildNode: Adds child nodes to the selected node

Arrange: Adjusts the location of a selected node

Camera: Sets the current style for the center point of the current field of view

Image: Adds an Image to the selected node

Progress: Sets the Progress of a node

Parent: indicates the Parent node

Children: array of child nodes

Root: indicates the Root node

Data: indicates node Data, such as text, remarks, and priority

Rc: renderContainer, the container that the node renders

Attached: Indicates whether the node is independent

Type: root, main, sub

Rendering in Kityminder-core determines the appearance of a node and provides a contentBox after rendering. There are currently 10 renderers available.

The implementation of rendering is based on the runtime support provided by core/render base class, which can render center, top, bottom, left, right, outline and outside positions relative to its own coordinate system.

Layout is to determine the position of a node relative to its parent node and provide a layoutBox, which by default is the coordinate system relative to the parent node. Each node data has layout property. Kityminder-core offers 5 main layouts and 10 neutron layouts.

A template is a collection of layouts and wiring, and currently brain Maps offers six of the templates shown above.

Kityminder-editor is based on Angular1.x, relies on the execCommand function, and adds hotbox and UI.

Hotbox, also known as Hotbox UI, is an efficient way to interact with context. It’s a shortcut menu. You can select a node and tap the space to display it. Then you can use the arrow keys to select the desired function. This eliminates the need for frequent mouse-clicking on the toolbar.

Finite state machine is an introductory concept of computing theory. It is a mathematical model that represents a finite number of states and transitions between these states. The initial state in the brain map is Normal. When the user enters the input state, it will switch to the input state. In the selected state, tap the space to switch to the Hotbox state. This allows for different interactions in different states.

Because it is real-time collaboration, it cannot be locked. In addition, when multiple clients communicate with the same server, they actually send data increments. Based on JSON-diff, the JSON increments at different times can be obtained. In addition, it is based on webSocket, we use the JS library SocketIO.

Must meet:

All client and server operations are performed in the same order

The set of all client and server operations is consistent

In order to solve the real-time editing problem, we implement a real-time collaboration algorithm based on version number. Above is a server-side operation process, you can see it has a three client server, a client sends a request to the server first, after the server receives the head part by patch update to the latest operation, and the version number from the renewal, finally responded to a client, at the same time, the version number and diff broadcast to other clients.

For easy editing on the client side, we have divided the node into three states: HEAD (confirmed snapshot), pending (pending snapshot), and Work (working snapshot). The version number of the client is strictly ascending and is merged in ascending order.