See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/343250124

The Design and Research of Front-End Framework for Microservice

Environment

Conference Paper · April 2020

DOI: 10.1109/CIBDA50819.2020.00036

CITATIONS READS
7 645

5 authors, including:

Yu Ding
Meta-Sophia Research Institute
19 PUBLICATIONS 38 CITATIONS

SEE PROFILE

All content following this page was uploaded by Yu Ding on 19 November 2020.

The user has requested enhancement of the downloaded file.

 The Design and Research of Front-End Framework
for Microservice Environment
Kunying Li*, Yu Ding, Duanming Shen, Qing Li, Zebing Zhen
Computer Application Technology Department
PetroChina Research Institute of Petroleum Exploration & Development,
Beijing 100083, China
[email protected]

Abstract—With the deepening of the software design model of enables the application of multi-tenant, multi-type data source
microservice, the core idea is to separate the business logic of the binding and graphical and information components, providing
front end and the back end. The traditional background logic a design idea with high efficiency and suitability for agile
processing and front-end development of information system are development [3].Ethan Marcottee presents a responsive layout
closely combined, and the processing of the back-end platform as a that effectively solves the compatibility of the website with
whole structure, resulting in the difficulty of the overall multiple terminals and the adaptive front-end design problem
development, long development cycle, and high application [4].The above studies all solve the problem of front-end's
coupling. Based on the component-based front-end design, this
adaptability to different business from their respective
paper proposes a flat front-end framework design idea based on the
perspectives, but none of them give a front-end framework
component concept, and analyzes the application of the framework
and the key technologies of the group. Finally, the front-end
design suitable for micro-service environment. With the advent
framework is applied to the construction of large-scale platform, of excellent front-end models such as React and Angular, front-
which verifies the efficiency and scalability of the framework, and end componentization has gradually become the most urgent
provides a perfect solution for the later complex integration projects. need for front-end development. How to apply these methods
reasonably so that it can improve the efficiency of front-end
Keywords-Microservice; Front-End Framework Model;Design development and reduce maintenance costs has become the
Standards. direction of our research. Based on the above background, this
paper builds a design model based on front-end component,
I. INTRODUCTION puts forward the concept of flattened component structure, and
analyzes the key technologies such as application and group in
In the development of large software systems today, the this framework. Finally, a set of practical front-end framework
front and back ends of Web applications have started to structure is formed, which can be widely used in various micro-
separate. Project teams are required not only to design high- service-based applications.
performance, modular, and flattened application systems, but
also to have low coupling and good iteration capabilities in the
later stage of operation and maintenance. Traditional software II. FRONT-END FRAMEWORK MODEL DESIGN
architecture design ideas have evolved from sophisticated
A. Design standard
SOAP and XML-RPC to Representational State Transfer
(REST), proposed by Dr. Roy Fielding. With REST, a popular From the development trend of software design, a good
development approach for large-scale network application product cannot be separated from the front-end framework
design, the logical processing of the back-end has evolved into model standard of the bottom design. Take the current
a service cluster formed by many small services. On the front mainstream MVC classic framework for example [5]. It is
end, as the business grows or changes, the complexity of the designed to organize code in a way that separates business
system will increase exponentially. Traditional front-end logic, data, and interface display, aggregating business logic
design ideas are based on the business logic of the back-end, so into a single component so that no business logic needs to be
most of the time it is caused by a small change or the increase rewritten when changing business requirements or
of new functions that results in the modification of the overall personalizing. Over time, developers find it difficult to modify
structure. For this problem, there has been some exploration in components in these (ExtJS, miniUI) JS frameworks, so they
the industry, breaking down a large and complex application want to be able to easily customize some components. At this
scenario into small parts that can be disassembled, do not time, JS technology represented by Angular and React that can
interfere with each other, and can be independently developed customize components appeared [6][7]. The emergence of
and maintained. Using the combination of WebGIS and RIA these technologies not only allows developers to customize
technology, the client system is layered by MVC to improve components, but also allows developers to encapsulate
the interactivity and user experience of the system [1].From the components that already exist.
perspective of routing mode, the single page routing problem is On the basis of these studies, the project team has defined
changed and promoted so that the call problem between front- design standards for front-end frameworks based on actual
end pages is solved [2].The front-end framework of WLS
project experience, which require developers and business Figure 1. Front Frame Model Design
personnel to implement framework design for a microservice
environment. Specific criteria are as follows: The model is based on the underlying architecture design of
the platform. The concept of group is applied to the specific
business allocation, a class of users with common
TABLE I. FRONT END FRAME DESIGN STANDARDS characteristics are defined, and then the decentralized
Essential factor describe components and page layout schemes are associated through a
Any component should adhere to a set of group of applications. Finally, a front-end framework structure
development standards, including input and output with group as the core, application as the interactive window
Standardization
definitions, that enable developers of different and component as the basis is formed.
modules to develop unified components.
Most components should be composable. An Take Figure 2 for example. In the HSE group, firstly, it
application must rely on combinations, nesting, and defines the configuration items of the group, such as personnel,
communication between different components. The
Combinatorial
final morphology can also be interpreted as one
roles and menus. Secondly, through the business requirements
HTML fragment by one, which is aggregated of app, the required filling components and audit components
reasonably to form a complete interface display. are combined to form a complete application page. Then the
Since there is a uniform definition of development query page and the notification page are combined with the
standards, any component should be required to be same design idea. Finally, a complete front-end design scheme
Reusability
an individual that can be applied in different of conference room reservation application is formed. Through
scenarios.
Any component should have its own complete and
this flat design idea, the front-end framework has more flexible
stable function, containing only its own logic, which combination ability and agile replacement foundation, and has
Maintainability is not related to other components, making it easier good adaptability and classification on the user's behavior
to understand, making it easier to understand, and operation.
greatly reducing the chance of bugs.
As shown in the table above, all design standards focus on
how to build standard definitions in a microservice
environment, improve code reusability and maintainability, and
address the depth and breadth of software design issues in an
increasingly complex business environment.

B. Front-End Framework Model Definition

The definition of a good front-end framework model not
only directly determines the interactivity of an application
system, but also its compatibility with other subsequent
business needs in the future. In the design process, the concept
of "group" is designed in the framework because of the Figure 2. The example of Group Application Instance
consideration of the application integration for multi-system in
the future. In a broad sense, a group is a combination of a
certain kind of transactions with the same characteristics. In a III. THE KEY OF STRUCTURAL DESIGN
specific scenario, if multiple objects have strong combination
requirements. Then we can consider combining these objects A. Code Structure Definition
into a whole, and these objects remain independent of each Through the design standards and the definition of front-
other in the Group [8]. Then in the specific business scenario, end framework model described above, the code structure
according to the actual business needs and the future open design meeting the requirements of the model is introduced.
environment for different people, we have developed the front- According to the designed code structure, the front-end
end framework model as shown in Figure 1. developers can effectively improve the reusability and
readability of the code, thus speeding up the progress of the
project and reducing the later operation and maintenance costs.
The specific code structure is shown in Figure 3:

Identify applicable sponsor/s here. (sponsors)

 the integrity of the overall structure. It avoids the problems of
code development efficiency caused by over development
caused by random code writing.

B. Group Configuration Definition

In order to control and read the group effectively. In the
local configuration, we define a group configuration model to
explain and explain the groups in the front-end framework. As
shown in Figure 4:
1) According to the needs of the application, enter the
group configuration page, create a new group, and register it
in the group configuration.
Figure 3. The Structure of Code Design
2) Complete the configuration of new group, including
In the code structure design diagram, the whole code app configuration, page configuration and navigation
segment is divided into two regions. The first is the local configuration.
configuration area, which configures the local running session a) App configuration: Select the required organization
parameter [9], service running parameters and local group personnel from the platform and import the corresponding
parameters through context and user respectively, so as to organization personnel data table of the app. When it is
facilitate the unified calling of the interface. In particular, the necessary to extend the function of organization personnel,
local group parameter configuration is to display each only the organization personnel data in app needs to be
component on the page through the parameterized mode, extended, without affecting the platform data.
including basic information, APP information, component
registration information, desktop layout and view management. b) Page configuration: new page - > configuration page
- > select layout - > Add part.
The second area is the front-end code package, which is
divided into four layers: Component file layer, APP Controller c) Navigation configuration: new menu node - >
layer, Description layer and App package configuration layer. configure menu node page.
3) Group authorization: give users permission to view the
• Component file layer: this layer is mainly composed of
group.
Component template file and assembly renderer. The
page elements of this part are stored in the template file.
The renderer extracts the elements in the template file,
and uses the defined guidance rules and business logic
processing operations to render the entire page, and
finally achieve the purpose of interaction with users.
• App control layer: the file will be found for loading
when the app is started. This part can realize the global
function of app. For example, get basic user
information and permission information, and then
share this global information to the corresponding Figure 4. Group Configuration Model
assembly file.
• Description layer: describe the version number, update
content and special modules of the application to C. Automatic Publishing and Deployment
ensure that developers can understand the basic Not only in the framework of innovative experiments, but
information of the application. also in the front-end code release and deployment of a
• App package configuration layer: this layer mainly breakthrough. Because of the NPM and bower package
records the basic information of app, the path of APP management libraries, developers can easily upload their own
controller, the basic information of component and the application files to the workspace by packaging the source files,
path of component controller. When the application is and then install and deploy them directly on the page.
loaded, it is parsed one by one and located to the
corresponding part file.
Through the above logical division of front-end code, it can
clearly show the process of front-end componentization for
developers and abstract description of components. In the
process of application combination, following the unified
design principles and code writing specifications, some best
practices are applied to the business development to maintain
 There are high requirements for developer capabilities, such as
traditional development methods that may require only the
developer to be able to use HTML, JS, and CSS for
development. However, componentized development may also
require developers to master the syntax of less, sass, or ES6, as
well as front-end packaging and building tools such as
Webpack and Glup. Therefore, in the future of technology
selection, team members also face enormous challenges to the
above issues, which is the main direction of follow-up research.

ACKNOWLEDGMENT
This research is based on the theory proposed by Dr. Qiao
Dexin. During the research, Dr. Qiao gave us the whole process
of guidance and technical support, and provided a lot of help
when we met difficulties. At the same time, I would like to
thank the information management department of the group
Figure 5. Release Process Diagram
company for their support and once again for their efforts in
this project.

As shown in Figure 5. In this way, the front-end personnel REFERENCES

can automatically publish and deploy in a short time, and then [1] Zheng Wen, Liu Renyi Du Zhenhong, Zhang Feng. DESIGN AND
inform the testers to carry out the corresponding test work, APPLICATION OF RIA WEBGIS FRAMEWORK BASED ON
reducing the development time and publishing cost. At the CLIENT-SIDE MVC [J]. Computer Applications and
Software,2011,28(5):75-77.
same time, the version can be effectively controlled by a
[2] Chen Ceng, Wang Meng ,Cheng Xu. Design and improvement of front
unified page. This method is also successfully implemented in end framework based on routing pattern [J]. Computer Knowledge and
the project and runs well. Technology,2018(4X):53-54.
[3] Rui Ye. Design and Implementation of Big Data Web Layout Service
IV. CONCLUSION Framework [J]. Information Technology ＆
Standardization,2017(11):58-61.
Information system construction projects for current [4] Li Xiajun. Implementing Response Layout By Using Bootstrap [J].
business upgrades and improvements. In a microservice China Computer & Communication,2017(13):24-25.
environment based on front-end and back-end design [5] Cai Xiaoqing, Chen Yanping. Using MVC Mode in Ajax-based Web
separation. By building a front-end component-based design Applications [J]. Electronic Test,2019(12):73-74.
method and using flattened component design idea, the key [6] Chu Xiaoyu, Gao Shouwei. Hybrid Development Application of
technologies for defining development structure and group Angular JS and Qt in Indoor Positioning System [J]. Industrial Control
Computer,2019(3):32-33.
configuration are studied. The whole front-end architecture is
related by the concept of group model, and a unified front-end [7] ZHANG Gen, CAI Yong-xiang;GAO Jing-wen. Quick Construction of
Website Front-end Based on React Components [J]. Computer
design system is formed. The framework meets the Knowledge and Technology(Academic Exchange),2019,15(5X):119-121.
construction requirements of low coupling, high efficiency and [8] Chen Ming. Research and Realization of Workflow Safety Model Based
fast development for front-end information systems, solves the on Role [J]. Electronic Engineer,2005,31(8):56-59.
development problems brought by business changes and [9] ZENG Wei, WANG Dan. Research about session persistence technology
requirements adjustment, improves the success and ease of use for Web servers in colleges and universities based on Spring Session and
of the project, and has good scalability and practicability. Of Redis [J]. Laboratory Science,2019,22(2):68-75.
course, component development is not so easy to implement.

View publication stats