Learn about mini-program cards in 20 seconds
Case 1: Happiness bus grab a seat with one key
“Happiness bus” is an intercity passenger transport function used by Ali employees within the domain, but it brings some obstacles in user experience because it needs to jump back and forth between VPN tools and H5 pages
Comparison of seat Grab process:
| The seat grab process of the previous H5 page | Now the card app grab a seat process |
|---|---|
| 1. Xiaomi searches for “Happiness bus” | 1. Xiaomi searches for “Happiness bus” |
| 2. Click the jump link | 2. Grab a seat with one click |
| 3. The VPN connection | null |
| 4. Open the H5 booking page to grab a seat | null |
Compared with the previous, one key reservation, one key query, one key cancel, flight seat information real-time revealed, for each bus students to save two minutes.
How?
Happiness bus was originally an H5 application developed by enterprise intelligence on Dingding. Based on the ability of small program cards, the front-end user interface is quickly transformed into a card form, and the back-end service is still reused by the original system.
We can understand it this way:
Previous bus system = Back end service + front page (jump to new full screen page)
– Current bus system = back end service + front end card
And the front end of the card, development is as simple as developing a small program component, as long as you can develop a small program, will develop cards.
An example of card application code is as follows:
Case 2: ICBU customer invitation card
ICBU transforms the original customer invitation system into a card application based on the small program card capability.
The system will automatically send the customer invitation through the robot, the sales staff directly on the card operation, choose the visit date, fill in the visit plan form, after submitting the invitation status form will be directly displayed on the card content.
Through the card application, the user is reduced in the communication and business system directly jump back and forth.
Start with the little red dot
From here, you probably already have some application-level knowledge of applet card technology, but going back to the technology itself, we probably need to start with the little red dot……
Little red dot (Badge), started from blackberry, was carried forward by Apple (patent belongs to Apple), until now has become iOS, Android and other major systems App push reminder UI standard.
The design of the little red dot is so successful that, without discussing UI, I think its greatest significance to users lies in that it directly standardized and revealed the information that users can only see when they enter the APP in its upper carrier (such as APP Icon), greatly shortening the path of information acquisition.
Modern operating systems have similar designs and further support for user interaction. Such as iOS, Android and other system widgets, notification center, control center and so on.
Under the strategic background of cloud nail, Nail will increasingly become the operating system of enterprise digital platform. To shorten the path to user information, we need a block-level application solution that is immersive, developer-friendly, and ultimately Anywhere to run.
Small program card scheme can well meet the above demands.
Immersive experience
The biggest advantage of applets over traditional applets is that they can provide an immersive experience.
Traditional applets are apps that hide behind an icon (or shared link), and users who want to retrieve or create useful information based on the applets need to jump out of the current context. This relatively fragmented interaction mode will cause great trouble to users in some scenarios, such as IM. As the core capability of Dingding, DINGding IM carries most of the work-related communication information.
Imagine that Mr. Wang, a salesman, needs to synchronize yesterday’s work progress and the work arrangement of the day with his colleagues in the group every morning, and cooperate with other colleagues to complete business follow-up. When Wang pays attention to other simultaneous chat information, he needs to query and modify customer information in other applications on the workbench. This kind of constant switching between chat window and other applications makes Wang’s work efficiency very low, and he may even miss important information.
Immersive interaction
In order to enable users to operate the mini-program cards directly in IM, we have carried out in-depth cooperation with the Dingding IM team, deeply integrated with THE IM module in the rendering process and data link, and turned the mini-program cards into a special message type that can be directly sent to the message list.
The following figure shows the permission modification process of the stapled document card. Users can directly modify the corresponding document permissions on the card:
And, combined with the characteristics of IM itself, small and medium program cards in IM can also support the top operation. The top operation makes sense for small program cards that require long interactions, such as location sharing, data platters, and so on.
Real-time data synchronization
Functional UI tells us that UI = F(data), visible data plays a decisive role in the UI. Here’s an example:
Stapled group voting cards allow us to vote directly in IM. It’s a big step forward from the interactive experience of jumping from IM to a separate “vote” app and then voting.
But what if we want to follow the voting in real time and get the final results? Such as the abilities shown below:
To achieve this capability, it is common practice for businesses themselves to incorporate data synchronization mechanisms in their business logic to refresh data and thus update views. However, such data synchronization is inefficient. As a client, to ensure the timeliness of data, it can only refresh the data periodically through timers (there are other problems with long connections). Imagine that in a group of 100 people, one card needs to be synchronized, meaning that 100 requests will be made to the server at the same time. What if there are m cards in n groups?
The mini-program card has a set of efficient data synchronization mechanism, developers only need to synchronize the latest card data to the mini-program card frame, can quickly update all the cards with the same ID.
Fusion with applets
When running as an independent application, the small program card cannot carry too complicated user interaction and business process due to its block-level application orientation. At this point, the applet card can be integrated with the applet power. Click on an action area of the applet card to support a half-screen that evokes a applet with full capabilities, giving the developer enough power to support their business while maintaining an immersive experience.
At the same time, in this applet, the data of the applet card can be accessed and changed. Again, these data changes will be synchronized to all the cards with the same ID.
At this point, the small program card can be used as the carrier of the core information and operation of the main small program to quickly reach users and complete the core business process.
“Traditional” apps vs. card apps
| “Traditional” applications | Card application |
|---|---|
| A system that hides behind an icon or link | Block to the core scenarios such as communication, workbench, and search |
| To view data, go to the application page. To perform operations, go to the application page | Immersive interaction without jumping out of context. Real-time information on the card, automatic data update (real-time seat information); Basic interactive closed loop can be operated on a card. |
| Human-system interaction | After the integration of communication, increased interpersonal interaction |
Run Anywhere
We hope that when developers have finished developing the applets, they can run them in:
Multi-terminal: iOS, Android, Windows, Mac terminal;
Multiple runtimes: Native (IM list, search results page), applets, H5, even in iOS widgets.
Traditional applets use WebViews as rendering containers, but embedding a WebView for each card in IM would be too heavy, and the memory footprint of multiple cards would be difficult to solve.
Therefore, based on the same DSL, we will package it into different products through different compiler to adapt to different host environments, and ensure the consistency of multi-end rendering through the strong constraint of DSL.
Relying on the current small program offline package mechanism, we pack a variety of products (configurable in the future) into the small program offline package to achieve offline resources.
Before the card is rendered, the card frame will judge the current environment and select different packaging products according to different environment for card rendering.
Using the card Unified DSL decouples the business code from the “card underlying engine implementation”, allowing for painless business upgrades when more rendering engine support is added in the future.
Based on this scheme, The small program card has supported Webview, Native, small program three containers.
Card container industry cultivation
As a new application form and technical scheme, card technology still has many imperfections, which need continuous iteration and optimization to improve card performance and product capability.
However, it is undeniable that from Icon to Card is undoubtedly an important direction in the follow-up development process of the current mobile development field.
In addition to the small program cards, the ** Cube cards developed by Alipay are also officially open for external output through mPaaS. Each Cube can be independently embedded in an area of the original page, and the regional content can be displayed through the card template.
Provide dynamic content presentation
Cube cards are embedded in Native pages in the form of cards. The high consistency of Android/iOS dual ends can greatly improve development efficiency, and the package size of only 5.5MB and memory consumption of 32MB make dynamic development lighter.
“Private Customization” for developers
Client SDK combined with server card management system, developers make the access and use process of developers more lightweight; Multiple front-end development languages and complete debugging tools make the development process of “compile-preview-debug-release” more universal, and developers without grammar can obtain the most cutting-edge technical tools.
This article is transferred from the public account [Alibaba Mobile Technology]
