Shulou(Shulou.com)06/02 Report--

How to understand the lightweight interface configuration modeling framework Midway-ModelProxy, aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Preface

The development model of using Node for front-end separation brings some advantages in performance and development process (see "thinking and practice of front-end separation"), but it also faces a lot of challenges. Under the complex business and technical architecture of Taobao, the back-end must rely on Java to build the infrastructure and provide relevant business interfaces for front-end use. One of the most important tasks of Node in the whole environment is to proxy these business interfaces to facilitate the front end (Node side and browser side) to integrate data for page rendering. How to do a good job of agency work, so that after the separation of front and rear development, we can still connect seamlessly in the process, which is a problem that we need to consider. This paper will discuss the problem and put forward the solution.

Because the back-end may provide a variety of interfaces, there may also be a variety of ways for developers to write Node-side code to access these interfaces. If we do not handle the access mode and use of the interface with a unified architecture, it will lead to the following problems:

1. Each developer uses his own code style to write interface access code, which makes the project directory and coding style confused and relatively difficult to maintain.

two。 Each developer writes his own way of mock data, and after development, he or she needs to manually modify the code to remove the mock.

3. Each developer may maintain some configuration files in order to switch between different environments of the interface (daily, pre-issued, online).

4. The data interface invocation mode can not be easily reused by each service model.

5. The description conventions for the data interface are scattered in every corner of the code and may be inconsistent with the interface documents agreed upon by the back-end personnel.

6. After the separate development of the whole project, the cost of joint debugging or test regression of the interface is still very high, and every interface provider and user needs to be involved.

So we hope to have such a framework, through the mechanism provided by the framework to describe all the external interfaces that the project depends on, manage them uniformly, provide flexible interface modeling and calling methods, and provide convenient switching methods between online environment and production environment, so that front and back end development can be seamlessly integrated. ModelProxy is a lightweight framework that meets such requirements. It is one of the core components of Midway Framework and can be used alone. Using ModelProxy can bring the following advantages:

1. Different developers have a unified way of writing interface access code, which has a clear meaning and reduces the difficulty of maintenance.

two。 The factory + singleton mode is adopted in the framework to realize the interface configuration for many times at a time. And developers are free to customize and assemble their own business Model (dependency injection).

3. It is very convenient to switch between online, daily and pre-sent environment.

4. Built-in mock engines such as river-mock and mockjs make it very convenient to provide mock data.

5. Use the interface profile to uniformly manage the dependency description of the interface to avoid being scattered in each code.

6. The browser side can share Model, and the browser side can use it to render the front-end data. The whole proxy process is transparent to the browser.

7. The interface profile itself is a structured description document, which can be automatically generated using a collection of river tools. It can also be used to do related automation interface testing, so that the whole development process forms a closed loop.

ModelProxy working principle Diagram and related Development process Diagram

In the figure above, the developer first needs to write the description of all dependent backend APIs in the project into the interface.json configuration file according to the specified json format. If necessary, you need to write a rules file for each interface, that is, the interface rules part of the figure. This rule file is used to mock data during the development phase or to use the River toolset to validate the interface during the joint call phase. The content of the rules file depends on which mock engine is used (such as mockjs, river-mock, and so on). After the configuration is complete, you can create your own business model according to your own requirements in the code.

Here is a simple example:

[example 1]

* step to create an interface configuration file interface.json in the project directory, and add the main search interface json definition to it

{"title": "pad Taobao project data interface collection definition", "version": "1.0.0", "engine": "mockjs", "rulebase": ". / interfaceRules/", "status": "online", "interfaces": [{"name": "main search interface", "id": "Search.getItems" "urls": {"online": "http://s.m.taobao.com/client/search.do"}}]}

The second step is to create and use model in your code

/ / introduction module var ModelProxy = require ('modelproxy'); / / Global initialization introduces the interface configuration file (Note: initialization works only once) ModelProxy.init ('. / interface.json') / / for more information on creating model, please see var searchModel = new ModelProxy ({searchItems: 'Search.getItems' / / Custom method name: interface ID} defined in the configuration file); / / use model. Note: the parameters required for calling the method are the parameters required for the actual API. SearchModel.searchItems ({Q: 'iphone6'}) / /! Note that you must call the done method to specify the callback function to get the data obtained by asynchronously calling searchItems above! .done (function (data) {console.log (data);}) .error (function (err) {console.log (err);})

The feature richness of ModelProxy is that it supports various forms of profile to create a required business model:

Using interface ID to create > generated objects will take ID***'.' The word after the number is used as the method name

ModelProxy.create ('Search.getItem')

Use key value JSON object > Custom method name: interface ID

ModelProxy.create ({getName: 'Session.getUserName', getMyCarts:' Cart.getCarts'})

Use array form > take *. The word after the number is used as the method name

The method call names generated in the following example are: Cart_getItem, getItem, suggest, getName.

ModelProxy.create (['Cart.getItem',' Search.getItem', 'Search.suggest',' Session.User.getName'])

Prefix form > all interfaces that satisfy the prefix ID will be introduced into the object, and the latter part will be taken as the method name.

ModelProxy.create ('Search.*')

At the same time, with these Model, you can easily implement merge requests or dependency requests, and render related templates

[example 2] merge request

Var model = new ModelProxy ('Search.*') / / merge request (the model method called below except done All are specified when configuring interface id) model.suggest ({Q: 'female'}) .list ({keyword: 'iphone6'}) .getNav ({key:' fashion'}) .done (function (data1, data2, data3) {/ / the order of parameters is the same as the order of method calls console.log (data1, data2, data3) })

[example 3] dependency request

Var model = new ModelProxy ({getUser: 'Session.getUser', getMyOrderList:' Order.getOrder'}); / / get the user id first, and then get the order list model.getUser ({sid: 'fdkaldjfgsakls0322yf8'}). Done (function (data) {var uid = data.uid) according to the id number. / / the second data request relies on the id number this.getMyOrderList ({id: uid}) obtained for the second time (function (data) {console.log (data);});})

In addition, ModelProxy can be used not only on the Node side, but also on the browser side. You only need to introduce the modelproxy-client.js provided by the official package into the page.

[example 4] use ModelProxy on the browser side

KISSY.use ("modelproxy", function (S, ModelProxy) {/! Configure the base path, which is consistent with the intercept path configured in step 2! / and globally configured and only once! ModelProxy.configBase ('/ model/'); / / create model var searchModel = ModelProxy.create ('Search.*') SearchModel .list ({Q: 'ihpone6'}) .list ({Q:' stormsuit'}) .data1 ({Q:'i'}) .getNav ({Q: 'skateboard'}) .done (data1, data2, data3 Data4) {console.log ({"list_ihpone6": data1, "list_ suit": data2, "suggest_i": data3, "getNav_ skateboard": data4}) );})

At the same time, ModelProxy can be used with Midway-XTPL, another core component of Midway, to realize the full sharing of data, templates and related rendering processes on the browser side and the server side.

ModelProxy exists as a configured lightweight framework, which provides a friendly interface model assembly and use, and well solves the problem of interface usage specification in the separation of front and rear development patterns. In the whole development process of the project, the interface always needs to be defined and described only once, and the front-end developers can reference it. At the same time, River tools are used to automatically generate documents, form a contract with the back-end developers, and do relevant automatic tests, which greatly optimizes the whole software engineering development process.

[note] River is a general term for the front and rear unified interface specification and related tools developed by Ali Group.

This is the answer to the question on how to understand the lightweight interface configuration modeling framework Midway-ModelProxy. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.