CN112363854A - Front-end service framework optimization design method based on novel interface standard - Google Patents

Front-end service framework optimization design method based on novel interface standard Download PDF

Info

Publication number
CN112363854A
CN112363854A CN202011255198.XA CN202011255198A CN112363854A CN 112363854 A CN112363854 A CN 112363854A CN 202011255198 A CN202011255198 A CN 202011255198A CN 112363854 A CN112363854 A CN 112363854A
Authority
CN
China
Prior art keywords
request
data
bff
server
cache
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202011255198.XA
Other languages
Chinese (zh)
Other versions
CN112363854B (en
Inventor
高翔
汪达
韩庭亮
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nanjing LES Information Technology Co. Ltd
Original Assignee
Nanjing LES Information Technology Co. Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Nanjing LES Information Technology Co. Ltd filed Critical Nanjing LES Information Technology Co. Ltd
Priority to CN202011255198.XA priority Critical patent/CN112363854B/en
Publication of CN112363854A publication Critical patent/CN112363854A/en
Application granted granted Critical
Publication of CN112363854B publication Critical patent/CN112363854B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46Multiprogramming arrangements
    • G06F9/54Interprogram communication
    • G06F9/547Remote procedure calls [RPC]; Web services
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2209/00Indexing scheme relating to G06F9/00
    • G06F2209/54Indexing scheme relating to G06F9/54
    • G06F2209/549Remote execution

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

The invention discloses a novel interface standard-based front-end service framework optimization design method, which comprises the following steps: 1) optimizing the front-end page development of the Web App: the method comprises the steps of improving an asynchronous access mode request into two requests through packaging, and improving the access efficiency of page acquired data in a GraphQL interface mode by combining with the cache characteristic of a browser; 2) optimizing the design of a BFF server side: and a BFF intermediate layer cache and cache refreshing mechanism is added, and the data access hit efficiency and the data timeliness of a BFF server are improved. The method of the invention does not change the logic and flow of the original business module development, can improve the network transmission efficiency, improve the flexibility of the system to the business data interface change, and provide the expansion capability of the seamless access of the external system service.

Description

Front-end service framework optimization design method based on novel interface standard
Technical Field
The invention belongs to the technical field of computer network-based system application, and particularly relates to a novel interface standard-based front-end service (GraphQL BFF) framework optimization design method in an Internet-based Web application system.
Background
In recent years, mobile applications have been rapidly developed due to popularization of mobile devices such as mobile phones, and the architecture of internet applications has been changing. Mobile First, Application (APP) platform, staging strategy, etc., various development concepts, frameworks are continually being proposed, modified and evolved. Meanwhile, various services are continuously developed, so that the system application is continuously expanded, and the design and architecture of the system are continuously adjusted while the system organization is continuously changed. The Web system application gradually evolves into a micro-service architecture and a micro-front-end architecture. The service center of gravity of Web application is gradually realized towards the front-end APP, the back end of the system utilizes a service cluster, a cloud service and the like to provide core applications such as data processing, data analysis mining, machine learning and big data analysis, and provides service processing products or data resource access services required by the front-end APP service.
The invention is corresponding to the optimization strategy under the current popular GraphQL BFF framework in the evolution of the web system framework, and the framework is one of the specific development technology practices in the micro-service and micro-front-end framework.
BFF (BFF for short) is the back-end (service) middle layer that exists for the front-end. That is, in the traditional front-end and back-end separated application, the front-end application directly calls the back-end service, and the back-end service performs data addition, deletion, modification and the like according to the related business logic. With the introduction of BFF, the front-end applications will communicate directly with the BFF, which in turn interfaces with the back-end, so in essence, the BFF more resembles an "intermediate layer" service.
Fast iteration and frequent product update have become the standard for product development of many companies, and continuous integration and continuous deployment become indispensable. If a Representational State Transfer (REST) mode application interface is used, the exposed data interface of the server often needs to be modified to meet the change of the client in the requirements and design. This hinders rapid development and product iteration of the product. It is becoming more and more difficult for various front end frames and flat decks to develop and maintain a set of universal APIs for applications in various front end frames and different terminals to meet the left and right needs.
GraphQL, a new API standard, provides a more efficient, powerful and flexible alternative to REST. The REST mode is a popular way to acquire data from a server side at present. However, in the past few years, there have been fundamental changes in the area of application interfaces (APIs). The increasing use of mobile terminals requires a more efficient data loading process; in a scene that the usage of the mobile terminal is increased, the GraphQL improves the application usage in such an environment by minimizing the data amount required for network transmission. But through the GraphQL, the client can accurately acquire the required data.
With the development of multiple terminals, multiple platforms, multiple service forms, multiple technology types, and the like, the data interaction between the front end and the back end becomes increasingly complex. The same piece of data may be consumed in a variety of scenarios in a variety of different modalities and structures. Ideally, these complexities may all be borne by the backend. The front-end only takes the integrated and perfect data from the back-end interface. However, both because of the domain model of the backend and because of the micro-service architecture, the design developer must combine multiple backend interfaces by itself to obtain the complete data structure.
Disclosure of Invention
Aiming at the defects of the prior art, the invention aims to provide a GraphQL BFF framework optimization design method to solve the problems that in the prior art, the user page refreshing response efficiency is low, the browser cache cannot be effectively utilized, the front-end development is coupled with the back-end data model, and the interface is not easy to expand.
In order to achieve the purpose, the technical scheme adopted by the invention is as follows:
the invention discloses a novel interface standard-based front-end service framework optimization design method, which comprises the following steps:
1) optimizing the front-end page development of the Web App: an Asynchronous access mode (Asynchronous JavaScript and XML for short Ajax) request is improved into two requests through encapsulation, and the access efficiency of page data acquisition in a GraphQL interface mode is improved by combining the cache characteristic of a browser;
2) optimizing the design of a BFF server side: and a BFF intermediate layer cache and cache refreshing mechanism is added, and the data access hit efficiency and the data timeliness of a BFF server are improved.
Further, the step 1) specifically includes:
11) the method comprises the steps that a POST (POST position transfer) submitting mode of an original page terminal (Client) calling request is repackaged to define an Ajax request, and an HTTP (hyper text transport protocol) GET + POST two-stage submitting request mode is established;
12) submitting a GET request for the first time, generating a unique digital fingerprint character string from the JSON request content of the data format text by adopting an encryption signature hash algorithm (MD5 or SHA1), returning an http response state code 404 which is NULL according to the digital fingerprint path parameter and the cache information of the BFF server side which cannot be hit;
13) the method comprises the steps of adopting a submitted POST original request to access a BFF server side, and submitting digital fingerprints in Header (Header) information parameters of a request (request) together;
14) after receiving and submitting a POST request, the BFF server side checks through a standardized GraphQL mode (Schema), sends interface calling requests to various data resource services through GraphQL service processing, and returns service data information resources;
15) the BFF server side generates a data fingerprint value (ETag) from returned service data information resources (usually in a data format text JSON format), returns data resources and resource data fingerprints from a client side request digital fingerprint and GraphQL, and caches the data resources and the resource data fingerprints in a memory database (part of information can adopt a file caching mechanism); returning a data request resource result and resource data fingerprint (ETag) information to a front-end client request to complete a complete front-end and back-end service data request;
16) the same call is requested again from the front-end page, the BFF server requests the cached front-end, the same Ajax request is initiated from different clients (browser pages), the BFF server directly hits the cached data and returns the result, and the GraphQL query request does not need to be initiated to GraphQL Services;
17) the front-end page adopts a GET request of HTTP, the browser cache is directly utilized, the state of the unchanged data request BFF server is returned to be unmodified (Not Modified 304 return code), the return result of data is reduced, the refreshing response of the page is accelerated, and the waiting time of a user is reduced;
18) in the improved design of the front-end page asynchronous request (Ajax), the interception and identification of the request are assisted by unit testing of the front-end page in a mode of forging (Mock) data, and the development and debugging work is carried out; in the integrated test link, the cache of the BFF server is used as test data, so that the simulation test efficiency is improved.
Further, the step 2) specifically includes:
21) decomposing and splitting the request JSON parameter body and caching; the BFF server side responds to a result combination of a data mode (Schema) split concurrent request;
22) when a request for loading the latest data is requested, adding a timestamp parameter to a GET path of an HTTP request, or adding an identifier in a Header (Header) information parameter of the request; the BFF server acquires back-end service data resource interface data again and updates the cache;
23) the BFF server provides a buffer refreshing request interface, establishes a mechanism that the back-end service data resources change, and the interface informs the BFF server to retrieve the buffer resources and clear or update the buffer in time.
The invention has the beneficial effects that:
(1) network flow is reduced, and concurrency pressure is relieved;
the improvement of the transmission speed and throughput of network hardware such as broadband, optical fiber, 5G, etc., still needs to reduce network requests and avoid the waste of network bandwidth resources on the architectural design of the web system. For the business scenario with popular service objects, it is more necessary to reduce concurrent requests and minimize the investment of network hardware and server resources.
(2) Excessive or ineffective use of back-end service resources is avoided;
although the cloud service, the data middlebox, the big data analysis service and the like under the micro-service architecture can improve the service resource access capability through optimization and expansion of a hardware basic environment and micro-service deployment, the back-end data analysis and processing can still be influenced in the face of excessive access to data resources or ineffective use of interface resources. Through design optimization, most frequent excessive or invalid back-end resource requests are filtered, and the overall use efficiency of the system platform is improved.
(3) The development efficiency is improved;
the design development of the front end and the back end is further decoupled, and the influence interference of the introduction of the GraphQL technology on the web page development technology is reduced; the efficiency of front-end developers in developing and testing user pages is improved.
Drawings
FIG. 1 is a commit request optimization design timing diagram.
FIG. 2 is a schematic block diagram of a design method of the present invention.
Detailed Description
In order to facilitate understanding of those skilled in the art, the present invention will be further described with reference to the following examples and drawings, which are not intended to limit the present invention.
Referring to fig. 2, the method for optimally designing a front-end service framework based on a novel interface standard according to the present invention includes the following steps:
1) optimizing the front-end page development of the Web App: an Asynchronous access mode (Asynchronous JavaScript and XML for short Ajax) request is improved into two requests through encapsulation, and the access efficiency of page data acquisition in a GraphQL interface mode is improved by combining the cache characteristic of a browser;
referring to fig. 1, the step 1) specifically includes:
11) the method comprises the steps that a POST (POST position transfer) submitting mode of an original page terminal (Client) calling request is repackaged to define an Ajax request, and an HTTP (hyper text transport protocol) GET + POST two-stage submitting request mode is established;
12) submitting a GET request for the first time, and generating a unique digital fingerprint character string from the content of a data format text JSON request by adopting an encryption signature hashing algorithm (MD5 or SHA 1);
such as: submitting an original POST request, wherein the path is '/graph ql', and the parameter body is as follows:
Figure BDA0002772903340000041
by generating a string of digital fingerprints, such as: 0ca175b9c0f726a831d895e269332461, the request to submit a BFF is: GET request/graphql/0 ca175b9c0f726a831d895e 269332461.
According to the digital fingerprint path parameters, the BFF server cache information cannot be hit, and an http response status code 404 is returned and is NULL (NULL);
13) adopting a submission (POST) original request to access a BFF server, and submitting the digital fingerprint in a Header (Header) information parameter of the request (request);
14) after receiving and submitting a POST request, the BFF server side checks through a standardized GraphQL mode (Schema), sends interface calling requests to various data resource services through GraphQL service processing, and returns service data information resources;
15) the BFF server side generates a data fingerprint value (ETag) from returned service data information resources (usually in a data format text JSON format), returns data resources and resource data fingerprints from a client side request digital fingerprint and GraphQL, and caches the data resources and the resource data fingerprints in a memory database (part of information can adopt a file caching mechanism); returning a data request resource result and resource data fingerprint (ETag) information to a front-end client request to complete a complete front-end and back-end service data request;
16) the same call is requested again from the front-end page, the BFF server requests the cached front-end, the same Ajax request is initiated from different clients (browser pages), the BFF server directly hits the cached data and returns the result, and the GraphQL query request does not need to be initiated to GraphQL Services;
17) the front-end page adopts a GET request of HTTP, the browser cache is directly utilized, the state of the unchanged data request BFF server is returned to be unmodified (Not Modified 304 return code), the return result of data is reduced, the refreshing response of the page is accelerated, and the waiting time of a user is reduced;
18) in the improved design of the front-end page asynchronous request (Ajax), the interception and identification of the request are assisted by unit testing of the front-end page in a mode of forging (Mock) data, and the development and debugging work is carried out; in the integrated test link, the cache of the BFF server is used as test data, so that the simulation test efficiency is improved.
2) Optimizing the design of a BFF server side: a BFF intermediate layer cache and cache refreshing mechanism is added, and the data access hit efficiency and the data timeliness of a BFF server are improved;
the step 2) specifically comprises the following steps:
21) decomposing and splitting the request JSON parameter body and caching; the BFF server side responds to a result combination of a data mode (Schema) split concurrent request;
22) when a request for loading the latest data is requested, adding a timestamp parameter to a GET path of an HTTP request, or adding an identifier in a Header (Header) information parameter of the request; the BFF server acquires back-end service data resource interface data again and updates the cache;
23) the BFF server provides a buffer refreshing request interface, establishes a mechanism that the back-end service data resources change, and the interface informs the BFF server to retrieve the buffer resources and clear or update the buffer in time.
While the invention has been described in terms of its preferred embodiments, it will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention.

Claims (3)

1. A front-end service framework optimization design method based on a novel interface standard is characterized by comprising the following steps:
1) optimizing the front-end page development of the Web App: the method comprises the steps of improving an asynchronous access mode request into two requests through packaging, and improving the access efficiency of page acquired data in a GraphQL interface mode by combining with the cache characteristic of a browser;
2) optimizing the design of a BFF server side: and a BFF intermediate layer cache and cache refreshing mechanism is added, and the data access hit efficiency and the data timeliness of a BFF server are improved.
2. The design method for optimizing the front-end service framework based on the novel interface standard according to claim 1, wherein the step 1) specifically comprises:
11) the method comprises the steps that a POST submitting mode of an original page end calling request is repackaged to define an Ajax request, and an HTTP (hyper text transport protocol) GET + POST two-stage submitting request mode is established;
12) submitting a GET request for the first time, generating a unique digital fingerprint character string from the JSON request content of the data format text by adopting an encryption signature hash algorithm, failing to hit BFF server cache information according to the digital fingerprint path parameter, and returning an http response status code 404 which is empty;
13) the method comprises the steps of adopting a submitted POST original request to access a BFF server, and submitting digital fingerprints in header information parameters of the request;
14) after receiving the submitted POST request, the BFF server checks through a standardized GraphQL mode, sends interface calling requests to various data resource services through GraphQL service processing, and returns service data information resources;
15) the BFF server side generates a data fingerprint value from the returned service data information resource, and returns the client side request digital fingerprint and GraphQL to the data resource and resource data fingerprint for caching in a memory database; returning the data request resource result and the resource data fingerprint information to the front-end client request to complete a complete front-end and back-end service data request;
16) the same call is requested again from the front-end page, the BFF server requests the cached front-end, the same Ajax request is initiated from different clients, the BFF server directly hits the cached data and returns a result, and a GraphQL query request does not need to be initiated to GraphQL Services;
17) the front-end page adopts a GET request of HTTP, directly utilizes browser cache, and returns an unchanged data request BFF server end with an unmodified state, thereby reducing the return result of data and accelerating the refreshing response of the page;
18) in the design of the asynchronous request improvement of the front-end page, the interception and the identification of the request assist the unit test of the front-end page and develop and debug the work in a way of forging data.
3. The design method for optimizing the front-end service framework based on the novel interface standard according to claim 1, wherein the step 2) specifically comprises:
21) decomposing and splitting the request JSON parameter body and caching; the BFF server side responds to realize data mode splitting and concurrent request result combination;
22) when a request for loading the latest data is carried out, a time stamp parameter is added to a GET path of the HTTP request, or an identifier is added to a request header information parameter; the BFF server acquires back-end service data resource interface data again and updates the cache;
23) the BFF server provides a buffer refreshing request interface, establishes a mechanism that the back-end service data resource changes, and the interface informs the BFF server to retrieve the buffer resource, clear the buffer or update the buffer.
CN202011255198.XA 2020-11-11 2020-11-11 Front-end service framework optimization design method based on novel interface standard Active CN112363854B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011255198.XA CN112363854B (en) 2020-11-11 2020-11-11 Front-end service framework optimization design method based on novel interface standard

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011255198.XA CN112363854B (en) 2020-11-11 2020-11-11 Front-end service framework optimization design method based on novel interface standard

Publications (2)

Publication Number Publication Date
CN112363854A true CN112363854A (en) 2021-02-12
CN112363854B CN112363854B (en) 2023-11-21

Family

ID=74516009

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011255198.XA Active CN112363854B (en) 2020-11-11 2020-11-11 Front-end service framework optimization design method based on novel interface standard

Country Status (1)

Country Link
CN (1) CN112363854B (en)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113032419A (en) * 2021-04-21 2021-06-25 上海微盟企业发展有限公司 Multi-source data aggregation search method, device, equipment and storage medium
CN113709187A (en) * 2021-10-25 2021-11-26 深圳市信润富联数字科技有限公司 Multi-server data request method, device, equipment and storage medium
CN115225717A (en) * 2022-07-19 2022-10-21 杭州安恒信息技术股份有限公司 Request management method, device, equipment and storage medium

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2015176519A1 (en) * 2014-05-21 2015-11-26 华南理工大学 Distributed collaborative method for improving application efficiency of web browser
CN109587212A (en) * 2018-10-31 2019-04-05 武汉艺果互动科技股份有限公司 A kind of micro services architecture design method based on GraphQL, equipment and storage equipment
CN109753532A (en) * 2018-12-26 2019-05-14 苏州宏软信息技术有限公司 Interface service system and its implementation method for browser end access database
CN110781441A (en) * 2019-12-31 2020-02-11 帷幄匠心科技(杭州)有限公司 New retail business middle desk based on micro-service framework

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2015176519A1 (en) * 2014-05-21 2015-11-26 华南理工大学 Distributed collaborative method for improving application efficiency of web browser
CN109587212A (en) * 2018-10-31 2019-04-05 武汉艺果互动科技股份有限公司 A kind of micro services architecture design method based on GraphQL, equipment and storage equipment
CN109753532A (en) * 2018-12-26 2019-05-14 苏州宏软信息技术有限公司 Interface service system and its implementation method for browser end access database
CN110781441A (en) * 2019-12-31 2020-02-11 帷幄匠心科技(杭州)有限公司 New retail business middle desk based on micro-service framework

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113032419A (en) * 2021-04-21 2021-06-25 上海微盟企业发展有限公司 Multi-source data aggregation search method, device, equipment and storage medium
CN113032419B (en) * 2021-04-21 2022-08-30 上海微盟企业发展有限公司 Multi-source data aggregation search method, device, equipment and storage medium
CN113709187A (en) * 2021-10-25 2021-11-26 深圳市信润富联数字科技有限公司 Multi-server data request method, device, equipment and storage medium
CN115225717A (en) * 2022-07-19 2022-10-21 杭州安恒信息技术股份有限公司 Request management method, device, equipment and storage medium

Also Published As

Publication number Publication date
CN112363854B (en) 2023-11-21

Similar Documents

Publication Publication Date Title
CN112363854B (en) Front-end service framework optimization design method based on novel interface standard
EP0823093B1 (en) Time coherent caching system
US5867661A (en) Method and apparatus of using virtual sockets for reducing data transmitted over a wireless communication link between a client web browser and a host web server using a standard TCP protocol
CA2218187C (en) Differencing communication system
CN107196998B (en) Mobile Web request processing method, equipment and system based on data deduplication
CN111459418B (en) RDMA (remote direct memory Access) -based key value storage system transmission method
CN110502583B (en) Distributed data synchronization method, device, equipment and readable storage medium
WO2019154353A1 (en) System running parameter query method, matching method and apparatus, and node device
US20130198313A1 (en) Using entity tags (etags) in a hierarchical http proxy cache to reduce network traffic
CN102938776A (en) Dynamic page processing system based on Asynchronous JavaScript and XML (ajax) technique
US20160034582A1 (en) Computing device and method for executing database operation command
WO2018035799A1 (en) Data query method, application and database servers, middleware, and system
US11385796B2 (en) Method, device, and program product for reducing delay in I/O processing due to mirroring of cache data
CN110221871B (en) Webpage acquisition method and device, computer equipment and storage medium
CN109656670B (en) Page rendering method and device
US20070156839A1 (en) Web services for wireless pervasive devices
JP2009516296A (en) Asynchronous just-in-time compilation
CN115658171A (en) Method and system for solving dynamic refreshing of java distributed application configuration in lightweight mode
WO2022135410A1 (en) Method and apparatus for loading source file
CN114595080A (en) Data processing method and device, electronic equipment and computer readable storage medium
CN114528049A (en) Method and system for realizing API call information statistics based on InfluxDB
CN113448649A (en) Redis-based home page data loading server and method
US9201921B2 (en) Methods and systems for offline execution of rich internet applications
CN116257521B (en) KV storage method based on FPGA
US11875151B1 (en) Inter-process serving of machine learning features from mapped memory for machine learning models

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant