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

Today, Wang Cong, a famous vegetable garden brother of SAP Chengdu Research Institute, continues to share with you how he views the similarities and differences between SAP UI5 and WeChat Mini Programs as a front-end member of SAP.

About Wang Cong's skill in growing vegetables, please move to his previous article, SAP Chengdu Research Institute atypical programmer, vegetable Garden: what do I use to observe when I use the UI5 diagnostic tool, I won't repeat it here.

Here is his text.

In recent years, the development of WeChat Mini Programs is in full swing. More and more users give up native App and throw themselves into the arms of Mini Program. There is a trend that "one Wechat works all over the world".

Faced with such huge traffic opportunities, Baidu, Ali and other companies have also launched Mini Program functions in their core products to compete with Tencent's Wechat in this portal war. At least today, WeChat Mini Programs's biosphere is still one of the most prosperous.

As a "front-end framework", SAP UI5 and WeChat Mini Programs have many similarities and differences. Here we extract the characteristic aspects of which I think are compared to see what differences in design concepts are implied under the similar appearance of the two.

This article only represents the personal views of the author as a front-end developer.

UI5 is an open source front-end framework developed by SAP, while WeChat Mini Programs is limited to Wechat in a form similar to that of ordinary App.

Although the core of both (or most of the functions) is to interact with users, there are many fundamental differences from an architectural point of view, and we can see one or two from the perspective of interfaces.

Entrance

UI5 does not rely on any platform, and pages implemented through UI5 can be accessed from a variety of portals. Basically, UI5 pages can be accessed on any platform that supports browser functions. And Wechat is the only entrance to WeChat Mini Programs.

Back end

UI5 is a pure front-end framework with no restrictions and no support for the back-end. WeChat Mini Programs not only allows you to choose the backend freely, but also provides some basic backend support, and in many cases developers can meet their needs without even building their own servers. These supports include:

(1) Database: WeChat Mini Programs provides remote JSON database support similar to MongoDB, and users can directly add, delete, query and modify the JSON database in Mini Program without purchasing the database or any complicated previous configuration.

(2) Storage: similar to the JSON database mentioned above, users can directly use the free and configuration-free remote storage space to store files in WeChat Mini Programs.

(3) Cloud function: in addition to database and storage, WeChat Mini Programs also provides back-end logic support. The cloud function can be understood as a back-end server with limited functions, or as a JavaScript method running on the cloud. The advantage is convenient, one-click deployment and free. The disadvantage is that the function is limited and the complex back-end function can not be realized.

All the above features are free of charge and free of configuration. If you find that the free quota is not enough, you can apply for an increase in the quota or consider building your own server.

Access restriction

As an open framework, UI5 does not impose any restrictions on external access. WeChat Mini Programs has a strict audit mechanism, the first link to visit must be the secure link of https, the second address must be submitted to Wechat for review, and after examination, it needs to be maintained in the access list in the background of Mini Program.

If the above steps are not done well, even Tencent's own website cannot be accessed. In fact, the reason for doing so is also easy to understand: all the links that users visit through WeChat Mini Programs, the initial entrance is Wechat itself, which is also a necessary control that Wechat does for its own ecological security.

However, this restriction is not perfect at the time of this article. Because the cloud function does not restrict access, developers can use the cloud function as a route to access unaudited links.

From the two pictures above and below, we can see the difference in the interface between the UI5 application and WeChat Mini Programs, in which the dotted frame is the functional scope provided by UI5 and WeChat Mini Programs respectively.

Technical details

It should not be difficult for a front-end developer who is familiar with SAP UI5 to get started with WeChat Mini Programs. Both of them are front-end frameworks. Naturally, there are many similarities in design. For example:

(1) the app.js in WeChat Mini Programs is very similar to the component.js in UI5, representing a global instance of the whole application. Some methods or data with global scope can be stored in it.

(2) in terms of data binding, both support flexible expression binding, pushing more logic that should have appeared in the controller layer forward to the view layer to simplify the logic layer.

(3) both support list rendering, such as the items attribute in ListBase in UI5, while WeChat Mini Programs uses the wx:for attribute to achieve the same function.

(4) both support custom controls / templates, UI5 has component and custom control, WeChat Mini Programs has component and template.

But there are also many technical differences between the two, such as:

(1) in the list rendering mentioned above, UI5 only supports list rendering for child controls of list class controls. WeChat Mini Programs, on the other hand, is more flexible, and any control can be repeatedly rendered through the wx:for property. For example, what is rendered repeatedly in the above example is the image element.

(2) in addition to list rendering, WeChat Mini Programs supports conditional rendering of wx:if. That is, the result of if condition detection is rendered when it is true, and ignored when it is false. The implementation of similar functions in UI5 is more often done by controlling the visible attribute.

(3) the realization of Routing. Both use stack to record the history of jumps, but unlike UI5's tolerance, WeChat Mini Programs only supports a maximum of 5 layers of jumps.

If the user needs to continue to access downwards, it must be implemented through other workaround, for example, the old page at the top of the stack will be popped off the stack and replaced with a new page through redirectTo.

(4) data binding.

The data binding function of UI5 is extremely powerful, supporting the sorting and filtering of various types of data models, and provides multiple binding methods of two-way binding and one-way binding. In addition, the feedback of data in the view layer and controller layer is also more positive.

For a comparison between SAP UI5 and Angular data binding, you can refer to the Jerry article:

Https://blogs.sap.com/2016/06/30/compare-data-binding-mechanism-sapui5-and-angular/

For the differences in the implementation of two-way data binding between SAP UI5 and Vue, you can refer to Jerry:

Https://blogs.sap.com/2017/06/14/two-way-data-binding-ui5-vs-vue/

Relatively speaking, WeChat Mini Programs's data binding function is a little weaker. First of all, sorting and filtering functions are not provided. In addition, the feedback is not positive enough: the view layer changes the data model by calling methods in the controller layer to manually assign values with the help of trigger events; the controller layer must also change the model through the setData method to make the changes take effect in the view layer.

(5) WeChat Mini Programs's bottom layer is the "giant" Wechat, so you can easily call a lot of hardware and software API with Wechat, such as NFC,WIFI, Bluetooth, Wechat Movement, biometric authentication, QR code, login and payment functions.

(6) throughout the control libraries of the two, we can find that UI5 is large and complete, and even a table has to provide responsive table,grid table,smart table, etc., in order to support different devices of different sizes and various business scenarios. On the other hand, WeChat Mini Programs is extremely focused on the commonly used controls on the mobile end, which are lightweight, simple and unified.

Idea

Summing up the above comparison, we can roughly find that UI5 and WeChat Mini Programs have been shouldering different missions since their appearance.

UI5 is a front-end framework designed by SAP for its self-developed enterprise management software front-end page, in order to achieve the Fiori-style front-end application recommended by SAP. Its emergence reflects SAP's determination to ensure that future products have a unified style, friendly interface and a good user experience.

Although WeChat Mini Programs is small, it is enough to demonstrate Wechat's ambition to expand: to achieve the rapid expansion of the ecosystem through rich front and back-end support and a simple hands-on experience. While the restrictions on entry and external access are expanding rapidly, they still adhere to the reason. Lightweight, compact, fast, easy, mobile, one-stop. What Wechat wants to say to you is that I contracted your life.

Developers at SAP Chengdu Research Institute have done a lot of research on SAP UI5 and WeChat Mini Programs. If you want to read more, you can refer to the following link:

(1) an article by my colleague David Wu David of SAP Chengdu Research Institute: WeChat Mini Programs Integration of SAP C4C Localization in China

(2) the previous self-study course of SAP UI5 framework code written by Jerry

(3) A collection of 59 SAP UI5-related articles published by Jerry in the SAP community

(4) Jerry tells you about Chrome developer tools: some funny stories about Chrome developer tools

(5) A collection of UI5 problems solved by Jerry through its own debugging:

Https://blogs.sap.com/2016/04/30/my-ui5-debugging-tips-and-experience-collection-how-to-resolve-ui5-issues-through-debugging-by-yourself/

(6) some skills accumulated by using Chrome developer tools in Jerry's daily work:

Https://blogs.sap.com/2016/03/15/chrome-development-tool-tips-used-in-my-daily-work/

(7) fragmentary thoughts of Jerry: SAPUI5, Angular, React and Vue

(8) Yang Joey's article: the uniqueness of using SAP UI5 in SAP Cloud for Customer

(9) my own article: what do I use when I use the UI5 diagnostic tool

(10) Jerry's article: running SAP UI5 applications on Kubernetes

(11) Jerry's article: SAP Fiori + Vue =?

For more original Jerry articles, please follow the official account "Wang Zixi":

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.