Prepared for the MiniApp Virtual Meeting 2020, July 30-31
Video hosted by Web Castor on their StreamFizz platform.
Hi everyone, I'm Chen Ying Li from Xiaomi.
I'd like to give you a brief introduction to MiniApp.
MiniApp is a new type of mobile application.
Developers can develop MiniApps with web technologies while integrating with capabilities of native apps.
MiniApp combines the advantages of web apps as well as native apps.
MiniApp is similar to the web from the perspective that users can hardly felt the time of installation, while with approximating user experience to mobile native apps.
After years of development, MiniApp has made some achievements with more than 4.5 million MiniApps and more than 10 MiniApp vendors.
This includes Alipay Mini Program, Baidu Smart Mini Program, Quick Apps and some others.
There are some differences in features and capabilities among these MiniApps, which leads to the standardization work for our MiniApp CG to get devoted to.
Let me show you some cases of the current MiniApp.
The first one is a case of buying a train ticket with Baidu app.
The user searches for train tickets on Baidu app, and in the search results, he can directly select the destination city, which is Wuhan in this case.
After clicking on the search button, user will be automatically brought to CTrip MiniApp with the updated train schedules of all available trains displayed.
You can see Baidu sends the departure and destination information to Ctrip MiniApp directly using some protocols, so the user is able to select the train he prefers right up there in Ctrip MiniApp.
Upon the rest of personal information is filled out, the whole purchase process completes.
The next one is a case of using shared bike service with Alipay app.
When spotting a shared bike he'd like to rent, the user can choose Alipay app on his mobile device, and tap Scan in the upper left corner to scan the QR code label attached on the shared bike.
In the meantime, Alipay will automatically navigate to the shared bike MiniApp, which is Hellobike in this case.
This Hellobike MiniApp will ask the user for geolocation permission to determine the current location of that user.
The permission request process is skipped in this video.
Then this MiniApp will combine the information from the QR code user just scanned to match the bike and ask the user for Bluetooth permission, for the MiniApp to send unlocking information to the bike lock via Bluetooth to unlock the bike accordingly.
The third one is a case of hailing a ride with Quick Apps on smart assistant.
During evening peak hours, users may want to hail rides home from work.
On the user's negative screen, Didi Quick Apps widget will be directly displayed on smart assistant.
After the user selects the model and clicks on the confirm button, Didi Quick Apps will be opened.
That Quick Apps will then ask the user for geolocation permission and use the preset home address on the negative screen to combine these two locations to plan the route.
Upon the user confirms the information, the ride-hailing process completes.
From these cases, we can learn some features of MiniApp.
On one hand, similar to that of web apps, the MiniApp installation process is very fast.
In order to make this possible, The MiniApp package size is usually limited to a few megabytes.
On top of that, technologies like split packaging, streaming loading and many others will be used to speed up the first ever opening time.
On the other hand, MiniApp is armed with app-like experience.
It provides tons of native APIs and system-level smart data, along with a lot of predefined high-level components such as map.
Besides, we can also see that MiniApp can be discovered in multi-entries, such as the search results in the case we just mentioned, as well as Scan, and smart assistant among others.
In different entries, it can be discovered by users in various ways.
In some cases, it will be a deep integration with the entry.
The geolocation information in the previous hailing a ride case is one of the examples.
Here I've listed some possible entries to MiniApp.
In these entries, the URI of MiniApp can be specified to open a page of a certain MiniApp.
This MiniApp maintains a single-instance, so its state and data will be kept in a consistent manner globally.
In this way users don't have to download the MiniApp again when opening it from other entries.
The topic of URIs will be introduced in detail by the other presenter later.
Let's take a look under the hood of the opening process.
Specifically, the process of launching the MiniApp for the first time generally includes the following steps: First of all, the MiniApp engine will parse the URI of MiniApp to extract the corresponding information from this URI, and download the corresponding MiniApp package from the server.
The MiniApp engine will then unzip the package files and check its validity.
This brings us to the next step, the running process of MiniApp.
The MiniApp engine creates the execution environment of the MiniApp, including the process of creation, initialization of the JS virtual machine, and so on.
The MiniApp engine then parses the manifest files contained in the MiniApp package, and initializes the app as well.
Finally, MiniApp will The engine will be rendering the page and start proceeding the code execution in this page.
The MiniApp engine is the underlying platform supporting MiniApp execution.
It is usually integrated into Host apps such as Baidu, Alipay, etc., or the underlying OS.
In addition to the sections involved in the previous initialization process, the MiniApp engine also creates a sandbox for the MiniApp.
It will be taking care of the resource management, permission management, lifecycle management and so on.
It will also be responsible for communication with other MiniApps and Apps.
This is an architecture of MiniApp.
In a MiniApp, the view layer is usually separated from the logic layer.
The rendering part of the interface is supported by the Render View part of Runtime.
In the existing MiniApps, some will use web view as the main Render View and combine some native components to realize the map-like capability, while other MiniApp implementations will directly use native rendering as an implementation of Render View.
This part of MiniApp logic as well as the JavaScript code will be running in the JS engine.
The V8 engine is a common possible choice.
During the process of running, the API that is invoked will be calling native code for the implementation through JS Bridge.
In addition to Runtime, MiniApp engine also implements the logic of platformization to support the download and management of MiniApp packages, to bring about the sandbox of MiniApps, and to manage these states of different MiniApps at runtime, among others.
Let's go back and see how to write a MiniApp.
Generally the following steps will be included: First is to create a MiniApp project.
Here's an example on the right.
We're using Quick Apps as an example for this project.
You may see some differences between this example and our final standardized MiniApp project structure.
The second step for developers is to write a MiniApp configuration document, which is "manifest.json" in this example.
The third step is to create an app-level file, the "app.ux" shown here, to handle the global application lifecycle, and to define some global CSS.
After that, developers will be writing some page-level files to implement the logic of the page.
At last, developers will be compiling and packaging the whole project into a MiniApp package.
This covers the whole process of coding.
Specifically, this is an example of a MiniAp manifest file, which is still taking Quick Apps as an example.
We can see in this file, developers can set up some basic information about MiniApp, which includes package name, MiniApp name, icon, version number and so on.
They can also set the page information contained in the MiniApp along with some style related information of the window.
The other presenter will give detailed accounts of Manifest regarding some standard details later.
This is an example of a MiniApp app-level file.
In this file, we can see developers monitor the global-level lifecycle, so they can print the log in these lifecycle callbacks.
Usually in the lifecycle callback, developers can proceed some global initialization.
The section regarding lifecycle will be introduced in detail by the other presenter later on.
This is an example of a MiniApp page, The final result will be a simple Hello World text and a button.
This looks similar to web technology.
Usually the page of MiniApp is also divided into three parts: template, script and style.
In this example, a text component and a button component are declared in the template file.
We can see that the text component has an association with the beginning data in the script through data binding.
As to the button component, it is associated with the routeDetail() method in script in the form of event.
After the user clicks on this button, the routeDetail() method will be calling the page routing API of MiniApp.
On top of that, the script also implements a page-level lifecycle callback.
More details will be introduced later on.
Here I've listed some common components and APIs of MiniApp, so I won't go further down into this topic.
For more detailed information about a comprehensive comparison of APIs, please go check the comparison table provided in the MiniApp white paper, and here is the link.
After the developer completes the MiniApp project, amid the process of compiling, the MiniApp package will be eventually generated.
He then can use his private key to sign the MiniApp package.
And here we are, getting the entire MiniApp development process done.
This packaging and signing process will be described in the following Packaging section.
The developer uploads his MiniApp package to the servers through open-source backends for different platforms, so that users can find these MiniApps in various entries.
Let's recap what we have done.
Developers can use web technologies to develop MiniApps.
After packaging and signing the project he's developed, the MiniApp package will be generated for developers to upload to the platform server.
Users can then find the MiniApp in different entries.
Here is the review of some MiniApp features.
MiniApp is web-like with the almost-free-of-installation user experience, while it's also app-like with similar user experience to native apps.
It can be discovered in multiple entries, and can be deeply integrated with entries.
Thank you, everyone.