Component-based business system framework thinking

The design idea

1. The business system consists of several pages;
2. Each page consists of several components;
3. Page refers to a large range of functional modules, such as: monitoring, statistics, Settings;
4. Component is a relatively independent, reusable function implementation, such as: map monitoring component, statistical report component, vehicle dialog component. The encapsulation granularity needs to be scaled according to the actual situation. It can be further refined to be independent of business processes and only provide functions similar to services, such as report output components and paging components. Can also rise to a large component, such as: personnel monitoring GIS display, including alarm view, track view;
5. A composition of components is a page;
6. The system has several roles, and different roles correspond to different component combinations and can be configured.
7. In principle, all interfaces are a combination of components. The interface corresponding to the default role set by the system is not fixed, but configured as the default mode according to the above rules during initial system configuration. It could theoretically be reconfigured. Therefore, when a role wants to view the functions of other roles, you only need to add components or component combinations corresponding to the functions to the role.
8. Components interact with each other, which is realized in the form of events, and specific events are designed for event mechanism. The main requirement is that each component can customize its own event, event corresponding content, event publishing (by publishing, other components can get the event, see: Twitter FlightJS framework);
9. Basic component properties:

1. The name of the
2. describe
3. Id
4. The width of the
5. highly
6. Location coordinate position (left, top)

Requirements for the framework

Operational flow design

1. The program starts with only the body tag in index.html;
2. Load the first module viewPort, which is responsible for the overall layout, viewPort module according to the user’s choice, load different layout HTML templates;
3. According to the module declaration label defined in the layout HTML template, instantiate the module component in the specified location, and call the module component init method, module component in the method to complete its internal logic (mainly responsible for loading data, display, add interaction, register events);
4. Navigation menu module, according to the configuration + permissions display menu items;
5. Home page aggregation module, according to user selection, load different information display module;
6. On the second-level service page, a unique route is matched and the route is redirected.

Flight js framework

What is missing

1. Event management;
2. Determination of data model;
3. The component ID is determined;
4. Organizational planning of internal files of components;
5. Further refinement of routing (event distribution);
6. Organization planning of CSS style files; (optimization)

disadvantages

advantages

1. Event-driven based on jquery DOM;
2. Component concept;

accomplished

NETJ framework

Netease NETJ framework mentioned modular development plan reference: http://nej.netease.com/course/topic/dispatcher/

1. Vertically adopt MVC architecture, horizontally adopt modular thinking.
2. Modules communicate with each other through messages.
3. Modules are divided into accessible modules (i.e. my page), private modules (i.e. sub-modules within a page);
4. Modules are organized in a tree;
5. There is a unified dispatcher (mapped to what I understand as a Sandbox, or Mediator);
6. There is a history manager (for routing);
7. Modules have a UMI (which I understand to be a module unique identifier);

8. The module is composed of CSS, JS and HTML, but netJ’s file storage is quite special, which is open separately, as shown in the following figure. And it specifies the style and script by adding two Textarea controls to the HTML.

   The required parts of a front-end framework

9. Module (component);

10. Declarative mode defines modules;
11. Declaratively passing in module configuration parameters;
12. Inter-module communication;
13. Data acquisition, synchronous update;
14. Controls;
15. Module loading;
16. Routing;
17. Service;

18. Template engine;

    angularjs

    Google’s AngularJS framework. Reference:

19. www.ngnice.com/

20. www.angularjs.cn/

advantages

1. Declarative programming (extending DOM capabilities with the directive);
2. MVVM mode, so that background data and interface almost completely decoupled;
3. Elegant dependency injection mechanisms;
4. Data binding, freeing up interface update code;

disadvantages

conclusion

The above idea is mainly a software design principles (SRP, LSP, DIP \ ISP, CARP, www.cnblogs.com/tomin/archi… The emphasis is on dependency inversion, for abstract design rather than concrete content. Based on the above ideas, the following similar requirements can be met:

1. No matter what role, only need to design the function of the role, find out whether the existing system has realized the function component, if there is, reuse, no, according to the rules of new development components;
2. The work of product design is as follows: define the function of the role, plan the relationship between components through interaction design, and obtain the prototype (the prototype is also based on the basic framework design, can not be unimaginative). If the existing specifications do not meet the prototype design, it can be considered to include rules;
3. Developers don’t need to be familiar with all the features at first, but just need to understand the principles of the framework and develop the framework code;
4. Subsequent functions corresponding to each role can be developed in parallel by increasing manpower;
5. Role A can add functional components to obtain the functions of role B.
6. The other?