Uidesigner 3.0 Architectural Design Summary

Uidesigner is the Tencent user research and experience Design Department (CDC) design of a design software, to create a unified platform for designers and team collaboration platform design tools, after 1.0 and 2.0 version of the experience of precipitation, we decided to 3.0 version of the new architecture design.

The development of a software system, the early stage of the architecture design bearing the entire software design ideas and key decisions, can be said to be the most important.

According to software architecture design ideas, focus on segmentation and interaction, good architecture must make each of the concerns separated from each other. We conducted the most basic requirements analysis, drawing two points of concern: one is the tool, the second is the design of the drawing, the relationship is shown in Figure 1.

With the most basic two concerns, the key requirements (including key functional requirements, critical quality requirements, and critical business requirements) are extracted, and the architectural refinement is based on two points of concern.

Here we combine the actual needs of Uidesigner to extract key functional requirements, key quality requirements and key business requirements that belong to the "tools" category.

First, the key functional requirements of the tool must include: Disk file read/write, exception capture, logging, security management, not the tools required, but Uidesigner itself requires, including: Configuration management, cache management, thread services, server and client communication management, internationalization services.

Secondly, the key quality requirements of "tools" quality requirements, including the development period of quality requirements and run-time quality requirements of two parts, after analysis and balance, uidesigner performance depends mainly on design drawings, and stability, scalability and maintainability is the decision "tool" the quality of development needs, therefore, the "tool "The quality requirements of the design will be stability, scalability and maintainability-oriented.

Finally, the key business needs of the "tools" because the Uidesigner itself does not have a very complex business needs, so the key business needs are in the design process optimization and specification of the embodiment, this aspect of the design has been a high-level module and the use of process design, the impact on the architecture is very small, can be temporarily ignored.

Through the extraction of critical requirements, we get the design goal of "tools"--the high stability, scalability and maintainability of client applications that provide common functionality (critical functionality requirements). Based on this goal, we have adopted the architecture of Di (Dependency-injection) and MVP (Model-view-presenter), the conceptual architecture design as shown in Figure 2.

1, the upper function module division, each module is dependent on the MVP architecture, through model (inherited to Basemodel) to define and register the module, through the Observer mode, Each module's view can be presenter (inherited to Basepresenter) for message publishing and subscription, communication and interaction between modules.

2, define the Platformservice that integrates key functional requirements, and provide platformservice service invocation in Basepresenter, so that each functional module can use common key functions.

3, for Platformservice services to define the interface, according to the key functional requirements, access to a number of service interfaces, the definition and implementation of the separation, the implementation of the part as a special function module (core module, must exist), integrated into the system itself, facilitate early verification and later expansion and maintenance. The architecture that is the focus of the tool has been designed, the specific upper function module will be in the subsequent development, according to the requirements of a module to complete, each module will not have any dependencies (development), the lack of one or more functional modules, the software can still run steadily.

Uidesigner is a design tool for designers, its most core functional requirements of course is the design of drawings, this piece is also the most change. Based on the principle of the isolation change point, we design this piece as the drawing engine framework, providing support for drawing related to the Tools section through the framework.

We subdivide the drawing engine framework to separate three focus points: entities, artboards, and auxiliary components.

First, the entity can be defined to show its own basic components, consisting of the underlying attributes and the underlying drawing interface, where the definition and implementation of the underlying drawing interface are separated, which can facilitate later expansion, especially in performance improvement. The conceptual design is shown in Figure 3.

Second, the artboard as a collection of various entities of the container, supporting the manipulation and positioning of various entities, is divided into three layers: hit the test layer, the Entity Designer management layer and the entity drawing layer. The conceptual design is shown in Figure 4.

Finally, the auxiliary components are grouped into rulers, guides, global thumbnails, matte adorners, and automatic snaplines, which all depend on the artboard.

After the conceptual framework is designed, we further refine the design of the core, and then verify the architecture of the design. In order to achieve agile development and save time cost, combining the design architecture, we finally chose the vertical evolution prototype for the verification and subsequent development of the architecture.

Because the architecture itself is based on Di (dependency-injection), an architectural pattern that fits well with the vertical architecture design, we build a simple base core (only core modules, no other business process functional modules), and a simple drawing engine framework that implements the prototype.

By testing and validating the prototype, this architecture is determined to meet our expectations. On the basis of this prototype, continue to improve the core and draw the engine framework, and planning the subsequent business functions, according to the business function Plug-ins, can reasonably arrange the project progress, and finally in accordance with the plan to successfully complete the development and testing.

For various reasons, under this architecture, there are still some details to be further developed and maintained, such as: Local data storage, user data security, client process security and network communication mechanism optimization.

As the software evolves, with more and more features, more complexity and more architecture, we need continuous refactoring and detail improvement until the main framework fails to meet key core requirements, critical quality requirements, and critical business requirements, as well. Tinawen, this content from the internal sharing of Tencent, do not be rumored!