Mini App Runtime Architecture and Alliance Development Experience - Tengyuan Zhang @ Baidu
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Mini App Runtime Architecture
and
Alliance Development Experience
Tengyuan Zhang @ Baidu
1
Agenda
1. Introduction
2. Technical Features
3. Architecture Overview
4. Ecosystem & Alliance Development Experience
HTML 5 MiniApp App
2
Introduction
Technical Features of MiniApp
— Rich APIs, components, and framework capabilities
— Multi-Technology Integration (HTML 5, Native App, Cloud Computing)
— Cross-Platform Solution, (PC, Mac, Android, iOS, Web Browser, IoT Device
— Offline Experience
4
Development Process
Development Principle
The MiniApp uses its own DSL language to develop the layout. Using JavaScript to develop the logic
layer code.
— First, the developer uses MiniApp DSL to write the
layout and logic code.
— Then packaging it with developer tools and publishing
to the Package Manager Service (PMS);
— When user clicks the MiniApp scheme URL on the
HTML 5 page. The MiniApp Runtime requests PMS
Server for the manifest file.
— Fetching the Package File. Unzip and Caching.
— Load/Reload as it‘s using a Runtime JS Engine
5
MiniApp Scheme
Field Description
Scheme baiduboxapp Scheme agreement. This part means using Baidu App to process this URL. When using Baidu
App to open the MiniApp.
Source swan The MiniApp Platform identification remains unchanged. Used to notify Baidu App to call up the
MiniApp framework
appKey Which MiniApp wants to open. The AppKey is unique for every published Mini App.
page The path of the page opened by the MiniApp. The page path can be obtained in the page
property of the MiniApp Manifest file, and the common form is "pages/index/index". If the page
is empty or incorrect, open the home page.
query Mini App page path with parameters.
Note: This scheme is only shown in Baidu MiniApp Platform. Does not represent the final Mini App Addressing Standard.
7
MiniApp Runtime
JavaScript Runtime
• Start and load the MiniApp Code.
• Encapsulation and exposure of client-side
capabilities, providing native function calls
of Mini App logic code.
Native Runtime
• Package Management
• Implementation of APIs and
components via JS-Bridges
• Page stack management is also at this
layer
7
MiniApp JavaScript Runtime
Multi-Threaded model
• Render container
The rendering layer uses the WebView thread to
render and interact with user event behavior. In
general, the render layer usually is WebView.
Caching renders containers for performance.
• Logic container
The logic layer is responsible for executing JS,
which can be implemented in two ways, WebView
or JS Engine (V8), V8 JS engine is more efficient;
Communication Mechanism
• Logic and render container sending and
obtaining message through the native
message bus.
• Isolated render and logic layer for
better performance.
8
Prepare the Runtime
Isolated Render and Logic Layer Design
— Multi-thread working can prevent JS execution from affecting or slowing down page
rendering, which helps improve rendering performance.
— JavaScript file only executed in the Logic layer, can not operate the DOM/BOM directly. It helps
for security.
— Facilitate data sharing and interaction between multiple MiniApp pages. Having the same lifecycle
controller which helps the developer.
9
Measure MiniApp Performance
Key Metrics
FP (First Paint ) FCP (First Contentful Paint ) FMP (First Meaningful Paint ) TTI (Time to Interactive)
ü After the MiniApp is launched, ü The FCP metric measures the time ü MiniApp FMP measures when the ü All the elements have been
the Loading process starts. the from when the page starts loading primary content of a page is visible pulled down and displayed. The
top title and bottom tab are to when any part of the page's to the user. user can operate in any position.
displayed. This time is first paint content is rendered on the It’s Time to interact stage. (TTI)
(FP). screen.
10Runtime Adapter Layer
Integrated the MiniApp Runtime SDK
— Package Fetching and Page Stack Management.
— Host Apps (User Agents) customization to implement special Adapter interfaces.
— After the host integrates our framework, It must run the CTS (The Compatibility Test) test, to
ensure the quality.
Mini App programs can run on multi-hosting, so how to ensure the consistency of the Mini
App running experience on different host (user agent)?
12Alliance Development Experience
Super-Apps
Vehicles System
IoT Device
OS - ROMs
Custom system
13Thank you!
if you also want to build the MiniApp in Japan and South Korea,
I hope our experience can help you.You can also read
