Front-end engineering (9) : Low code practices in the EHR domain

So far, we have built a flywheel low-code platform that is versatile, not business-oriented, but fits well with EHR, and has successfully served the online environment. Take this opportunity to go online, in this simple to share with you the flywheel low code of the core design concept and some future planning.

background

In order to replace the EHR system produced by third-party manufacturers currently used by netease and make netease one of the few large Internet companies with self-developed EHR systems, we officially started the research and development of flywheel EHR system in April 2020. Flywheel system from the beginning of the project established the development route of low code pattern, is take the low code development mode is a face the shortage of the developers in order to solve the traditional development way, process complex, development problems such as low efficiency, long development cycle, the second is to support the future quickly define fields, adding features, especially in the rapidly expanding on the level of statements and function configuration, Avoid any changes that require code changes.

The specific demands are as follows:

Based on the appeal, we developed the flywheel low code platform, and the flywheel effect is that in order to get a stationary flywheel to turn, you have to push a lot at first, round and round, and each round is a lot of effort, but each round is worth the effort, and the flywheel turns faster and faster. Here we use it to imply that although the flywheel is difficult to develop with low code, as long as the research and development is successful, it can provide continuous power for the establishment of EHR system functions and rapid iteration.

The flywheel EHR system will be officially launched on November 1, 2021. With the help of the flywheel low code platform, products and businesses have delivered “4 modules, 38 pages, 193 entities and 143 logics” in the flywheel EHR system. The amount of UI built by flywheel low code accounts for 80% of the whole flywheel EHR system.

Here’s a look at the core design philosophy of flywheel Low code and the capabilities that flywheel Low code provides.

architecture

Before introducing flywheel’s low code architecture, I’d like to briefly talk about two design concepts used for low code: model-driven and UI-driven.

• Model driven

Model-driven simple understanding is to design the data model and then build the user interface based on the data model. The design concept of low code is to solve the problem of r&d efficiency of the whole product, that is, the front and back ends work in a low code system, and output low code capacity together. Therefore, most of the products with this design concept are used to complete the overall delivery of the product quickly.

• UIdrive

A simple understanding of the UI driver is to design the user interface first, then design the data model based on the interface, and finally bind to the UI layer. This low-code design philosophy is focused on solving front-end development performance problems, and is not concerned with the way back-end capabilities are implemented. So most products with this design philosophy are tools for creating user interfaces quickly.

Compared with UI-driven, model-driven advantages are as follows:

1. The table structure is clear, which can provide users with more convenient and quick configuration ability.
2. Can better integrate with the authority mechanism;
3. model-basedAPILayer, which implements more complex logic based on the model with less coding.

EHR system is a business-oriented system. Only by solving the problem of R&D efficiency from the bottom of the business, can the whole system truly solve the problem of R&D efficiency. So flywheel low code core capability takes a model-driven design philosophy.

Flywheel low code architecture can be understood as follows:

• Interaction layer – low code platform side: low code platform for administrators, the core is [data modeling] and [visual editor], data modeling abstracts the real data table into business entity model, visual editor on the basis of business entity modelUIChoreography.
• Interaction layer – User management terminal: The user management terminal used by administrators. In addition to some basic configurations of user roles, the most important one is low-code services used to configure differences for different user roles.
• Middle Tier – Common protocols: Common protocols include component description protocols for data modeling outputs, page description protocols for visual editors outputs, and field logic protocols.
• The data layer: According to the general protocol transmitted from the upper layer, the back-end generates the correspondingUIConfigure information, and obtain the corresponding service information from the database according to the permission information, and finally return it to the front-end for rendering.
• Middle layer – RendererWe offer two different rendering modes: Standard Model-driven and Custom Model +UIDrive 】, most of the business in the systemUIBoth use standard model-driven rendering and custom model +UIDrive has been added to standard Model driveUIThe ability to choreograph solves complex businessUIRendering issues.
• Interaction layer – client side: Rendered by the rendererUIThe form presented on the client side is not limited to the page, but also a series of containers such as pop-ups and drawers that can give feedback to the user.
• The front-end technology stack isvue, the component library useselement-uiAnd, inelement-uiOn the basis of secondary packaging formed a fitting businessease-elementComponent libraries, while evolving for trained business scenariosmaterialsBusiness stores.

The core configuration

Flywheel low code is targeted at non-developer (business/operation/product) products, so the overall architecture is mainly configuration, does not provide platform coding business ability. The core configuration is shown below:

• Entity fields

Creating entities and entity fields on a low-code platform is the process of data modeling. Entities are the data source, and each entity needs to map a real data source table, and each entity field can optionally map a database field name.

The entity fields created under the entity can be dynamically added or deleted, and attributes such as virtual fields, database field names, data types, and control types can be configured to meet service requirements.

• Information set

An information set is a concept developed by flywheel low code, which is a collection of entity fields as well as UI display fields. The function of the information set is to provide the front end with the ability to render and modify data, and its manifestations are mostly forms and tables. The following figure illustrates a process of users’ form modification and query on the flywheel low-code platform:

For example, querying a table information set goes through the following procedures:

1. According to the information set coding to get the entity field of the information set;
2. Get their corresponding entities according to entity fields;
3. Combine the database table name of the entity with the database field name of the entity fieldSQLSplicing to query the business table;
4. Finally, the queried data is combined and returned to the client, and the front end is configured and rendered into different modules based on the returned data and information set.

• function

A function is a collection of information sets and is the final data for rendering the UI. Each function needs to be attached to the corresponding menu to take effect, determine the function type, layout and other attributes, and finally render the UI with pages, pop-ups, drawers and other presentation carriers.

A simple summary of the relationship between the three is that entity fields make up the information set, and the information set makes up the function, and the function goes straight out of the UI. That’s a bit abstract… To put it another way, point, line, surface, describes the relationship between the points (solid fields) and the lines (information sets), and the lines and surfaces (functions). The following schematic diagram:

Visual editor

We provide visual scaffolding for connecting entities, information sets, functionality, and UI. Since the users of the platform are non-developers and do not involve the writing of the code, the platform integrates all the configurations for THE OPERATION of the UI. Users only need to simply master the concepts of entities, information sets, functions and so on, and can quickly build pages through a few simple operations. In addition, when the model driver cannot meet the business requirements, it can switch to the custom page mode and build custom pages by dragging and dropping. Here’s a snapshot of the current capabilities of our visual editor:

[Standard Model-driven] Editor:

[Custom model + UI-driven] Editor:

demo

Next, we will use a video to demonstrate our flywheel low code from modeling to page.

video

The future planning

While the Flywheel low code platform has been successfully implemented in the EHR space, there is still a long way to go in creating a universal low code platform. Currently we are continuously optimizing [Custom Model + UI-driven] view rendering to enrich more business scenarios. Next we need to:

• Establish a layout and style system
• Provides logical orchestration capabilities
• Building material platform
• Development process engine
• Provide independent deployment capability
• .