Meeting minutes
Welcome & Roundtable
Angel: greetings
… I'm co-chair of the miniapp WG
… will give a background of miniapp
… we gather here to talk about the mini apps. The new form of application hybrid web and the native apps.
… They're getting popular with the users, Asia, especially China, Japan and Korea
… And then more importantly, to inspire each other for more immediate innovation and collaboration
… I would still like to introduce the 34 organizations who sent representatives today
… we will share and discuss many apps vendors and the technologies in four sessions.
… they are mini apps ecosystem, technical architecture frameworks and the new scenarios.
… we will have a real time interpretation of three languages, including English, Japanese, and Chinese in different channels, please take a moment to check if you get the channels right.
… reminder: please let the interpreter know which language you speak
xueyuan: please rename in zoom, yourname+company name
… please mute when you join the meeting
[interpretation function instructions]
xueyuan: please speak slow when you talk
MiniApps Ecosystem
Evolution of Quickapp
https://
Yongqing: I'm Yongqing from Xiaomi, will share Evolution of Quickapp
… from 2016, everyone has a smartphone and growth speed is slow down
… Super apps have a large amount of users
… How to supply services to user? The old way to resolve: 1. User need to install Apps, 2. User view content by web
… we developed Quick Apps
… New way to let users experience apps quickly on phone, TV, and other devices.
… features: 1. New app ecosystem
… 2. Small size, download fast
… 3. No need to install
… from May 2017, Xiaomi started working on Quick Apps, and then we created an alliance with OPPO, Huawei, vivo
… Quick Apps has been devleoped for 3 years
… including: i18n, UI render....
… some use case to share
[miniapp demos of Weibo, ctrip, autohome]
Yongqing: also Quick Apps can work on TV and smart speaker
… user could order their food with voice and touch interactive
… besides TV, smartphone, we also support other devices
Mini App Runtime Architecture and Alliance Development Experience
https://
Tengyuan: my presentation is Mini App Runtime Architecture and Alliance Development Experience
… I am from Baidu
… in last five years mobile, the native apps and HTML5 websites have been struggling to find the balance in performance & user experience
… I will show you how we built the miniapp performance runtime for developers.
… use cases
[Demo to show miniapp components and framework capabilities]
Tengyuan: I will give a Development Principle
… show the Alliance of Baidu's miniapps
… miniapp has an open ecosystem
… including various app and even cars
angel: any qusetions?
<takio> Must MiniApp be hosted by SuperApp?
Jay: is there any difference between miniapp and quickapp?
… Do you have any interoperability between them?
Tengyuan: show miniapp runtime, miniapp has two parts
… both has a same runtime usage in rendering
angel: miniapp run in super app, quick app run in the mobile OS
MiniApps Technical Architecture
Evolution of Quickapp
https://
Yongqing: how are miniapps distributed?
… first develop and then compile
… and we will get a *.rpk file
… upload to app store
… download and run
… it is a built and run
… we don't have any process of installing
… so we only have build and run two steps
… but there are different platform in different vendors
… there are 3 layers in my slides
… the main work happened in implementation in platform
… quickapp may use the OS to do rendering
… show how a quickapp developed
… like web inspect
… show code structure
… UI, style and event
… there is a demo, TodoMVC of quickapp
… Repository:quickappcn/todos
https://
Mini App Runtime Architecture and Alliance Development Experience
https://
Tengyuan: Development Principle
… 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
… Baidu use baiduboxapp as scheme of miniapp
… show MiniApp Scheme overall
… MiniApp Runtime has two layers
… JavaScript Runtime and Native Runtime
… MiniApp JavaScript Runtime has a Multi-Threaded model
… Render container and 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;
… will show how a miniapp prepare the Runtime
… slide 9
… performance of miniapp
… First Paint - After the MiniApp is launched, the Loading process starts.
… First Contentful Paint
… and the most important part: First Meaningful Paint
… MiniApp FMP measures when the primary content of a page is visible to the user
… Time to Interactive
… miniapp architecture
… development layer and runtime layer
[table of miniapp architecture in slide 11]
Tengyuan: Runtime Adapter Layer integrated the MiniApp Runtime SDK
Design of the MiniApp Cross-Platform Technical Standards
https://
Xiongwei: I am from JD.com
… show a Basic technique standard – runtime framework design of JD
… we works the build and package process on cloud
… miniapps follow web tech
… and XML template
… JavaScript, CSS, and JSON
… Shadow DOM in miniapp usage
… show the layout of miniapp, consistency with web layout
… use WebView to render
[different render process. Slide 9]
Xiongwei: security is an important issue in miniapp
… user information will package into closed environment
… and information share only, no DOM tree include
… and no interface for information
… touch, click and animation belong to bubbling event as I show in slide 11
… API: asynchronous. Some APIs also support synchronous calls
… slide 13 show a package list of miniapp
… URI scheme, besides usually way as other vendors, in JD, we also compatible with the Web http
… show a demo of miniapp in car screen
… how to adapt screen
… base on layout calc depend on window
… rotate/Orientation:landscapeportrait also could be a method to implement in car screen
… some private and safety method of miniapp in car usage
… we use the hardware in cloud to debug
Angel: any questions?
Questions
Yongqing: How did quickapp uses native os ui framework for render? Quickapp created a document adapter layer for node operation and css styles, similar to Web DOM, this middle layer connects the developer’s node template and native ui framework;
Yongqing: CSS ability mainly includes: box model, layout model, animation, each css item details. For box and layout model, we try to implement by ourself, others are tried to transplant on Android ui frameworks.
Angel: no question, I hope the previous two sessions have explained all the questions that the audience might have about the difference between miniapp and quick apps
… 15 mins break
[Break]
MiniApps Frameworks
Looking at the MiniApps Specifications from the Perspective of the Taro Cross-Platform Framework
https://
Jiajian: I'm from JD.com
… Background of cross-platform development
… what is Taro
… advice for MiniApp specs
… With the launch of WeChat miniapps, a lot of miniapp platforms emerge
… Some people already have developed a MiniApp and hope to extend it to other platforms
… some people just want to develop a miniapp
… we developed Taro
… We have developed three versions
… we hope that developers can solve cross-platform development problems at a lower cost
… Developers can use react, vue or our own development framework
… We support the development workflow of using mainstream front-end packages
… can reuse webpack
… Serve more than 110,000 developers
… We choose the rendering mechanism in HTML5, the WeChat components and APIs as the standard
<Angel> English version of the Taro slides
Jiajian: Complete the missing parts for each platform
… For example, WeChat miniapps does not support the DOM, we have implemented it
… I want to talk about my advice to miniapp standardization from the perspective of Taro
… Taro is a cross-platform framework for miniapps, so there are some problems that cannot be solved
… We hope that custom components can support virtual nodes
… we hope the MiniApp specs let the developers manipulate the DOM
… At present, developers must recompile using Taro every time they modify the code, and the state saved by the developer will be lost
… about debugging, we hope MiniApps support hot reload
… We hope that the MiniApps provide a unified command line tool and a complete set of development tools
angel: thanks
How to Build a MiniApp Technology Ecosystem
Slides: https://
Angel: The next speaker is Hongbao Cui
Hongbao: I am from DCloud
… we are a company dedicated to developers
… There are more than 10 million developers in China
… Probably the most in the world
… But the platforms we need to adapt may also be the most in the world
… In addition to the traditional web, iOS, Android platforms there are many miniapps platforms
… So we need to standardize in W3C
… Having a uniform specification will make developers a lot easier
… In addition to specifications, miniapps also need development tools
… and the cloud
… Traditional web development requires communication between front-end and back-end teams, while MiniApps can move back-end business logic to front-end development
… The running environment of MiniApps is divided into a view layer and a logic layer
… Different from traditional web development
… So it is impossible to reuse web-oriented JS libraries
… This is not good, so we implemented the DOM on the basis of miniapps
… Only by solving these problems, the development of miniapps can be easier
… Compared with the web, MiniApps have better performance and more capabilities
… compared with the native apps, we can just open a MiniApp without downloading it
… I believe people all over the world have such needs
angel: thank you Hongbao
xiaoqian: question for MiniApp vendors
… Many people hope that miniapps support the DOM
… Are MiniApp vendors interested in supporting the DOM?
… Or a scheme similar to the DOM
… Some companies outside of China are also implementing super apps. Do they need to support the DOM?
Yongqing: There were also related discussions at last year’s meeting
… The initial reason for not implementing the DOM was not a technical reason, it's just because DSL was more important
… we (Quick Apps) will support the DOM if developers really want it
… Exposing the DOM is not about exposing things like div and p
… it's exposing things like <view>
xiaoqian: According to your understanding, what is the current developer's demand for the DOM?
Hongbao: Early developers had a relatively high demand for the DOM because there were few libraries
… but now the number of libraries has gradually increased, so the demand is not that big now
Yongqing: Is uni-app's model similar to Taro's?
Hongbao: in Taro 2.0 it was very similar, but Taro 3.0 uses another model
MiniApps in New Scenarios
https://
QingAn: I'm Qing An from Alibaba
… co-chairing the MiniApps CG
… will talk about the scenarios
… in IoT and vehicles miniapps run directly on the OS
… the architecture is similar to MiniApps running on mobile
[QingAn shows the architecture of MiniApps for vehicles]
QingAn: MiniApps can access some vehicle services
… entertainment
… payment
… through the vehicle container MiniApps can have the same APIs as MiniApps on mobile
… can check the current status of vehicles
… all services for the users are related to the Maps function
… driver services
… entertainment services
… will show demos
… will talk about the main benefits for MiniApp on vehicles
… as I said, the architecture of MiniApps on vehicles are similar to MiniApps running on mobile
[QingAn shows the main scenarios and services of MiniApps on vehicles]
[QingAn shows the MiniApps deployed in Roewe RX5]
QingAn: we can use MiniApps to check the social media, such as Weibo
… the driver can use MiniApps to search the gas station
… can use MiniApps to try to find another driver for you
… can listen to news through MiniApps
… can play games in the vehicle
angel: are you sure that's not dangerous?
QingAn: if you're waiting someone while parking, that's not dangerous
… we have implemented this in our products
… see how we can collorbate with existing W3C groups
yongjing: one question
… for this case, what is the runtime environment?
… are they run on top of a super app? or on top of the OS?
QingAn: directly on top of the vehicle OS
… in our case it's the AliOS
… the runtime is not so much to other platforms
yongjing: understood
… it's like a hybrid of super app-based MiniApps and Quick Apps
<Zakim> kaz, you wanted to ask about WoT collaboration :)
kaz: if you run it within the vehicle that's fine
… but if you want to interact with other services it would make sense to collaborate with WoT folks as well
QingAn: definitely have technologies outside of the vehicle itself
kaz: can talk about possibilities about joint meetings among WoT and MiniApp folks together offline
naomi: I'd like to ask privacy and security model
… is it possible to collect any information with camera?
QingAn: I believe the vehicles in China do not have in-car cameras
… so the MiniApps do not have access to cameras
… they have access for gas station information
… camera is not a necessary requirement
… so privacy and security issues related to camera are currently not related to MiniApps in vehicles
kaz: probably you're already aware of this
… tracking and location services may have potential privacy risks
… MiniApp folks should think about that
MiniApps WG Work Overview
angel: Yongjing, co-chair of the MiniApps WG, will introduce our work in the MiniApps CG and WG
Yongjing: let me introduce shortly about what we have done so far and what we're going to do
… we have been working in the MiniApps CG since 2019
… and now in the MiniApps WG
… MiniApp Addressing
… MiniApp Packaging
… MiniApp Manifest
… MiniApp Widgets
… MiniApp Lifecycle
… three are normative, two are non-normative
[Yongjing shows the general information in a MiniApp package]
Yongjing: we have changed the MiniApp manifest to be an extension of the web app manifest
… need to further refine the extensions
… for packaging we need to work on the templates, UI components, APIs, security models etc.
… it's under development
… for lifecycle there are two sets of APIs
… global lifecycles and page lifecycles
… details need to be defined
… for Addressing it's a very early proposal
… moving away from the current practice of inventing new URI scheme
… rework it to reuse https
… what's next?
… we'll continue to develop the specs
… and incubate UI components, templates in the CG
… and standardize them in the WG
angel: thank you
… let's see if we have any questions from the Japanese and Korean MiniApp vendors
… in our chartering process we received a lot of support from global companies
… including Kodansha, KDDI, etc.
Yongjing: I'd like to invite participants today
… to participate in the MiniApps CG and WG
Angel: if we have no other comments let's wrap up
Wrap up
Angel: we will try to do horizontal reviews
… possible collaborations with WoT groups
… about scenarios like vehicles
… about privacy and security concerns in the vehicles scenarios
… we do appreciate comments from kaz
… hope to collaborate in the future
… if you have new ideas, use cases, requirements
… feel free to bring them to us
… maybe we can set up a CJK task force
… we can communicate when we don't have an online event like this
… if no one objects we can set up a mailing list
… the plan is to move to the specs to CR in ~August
… let's see if we can have another CJK meeting
… if would be great if we can have some MiniApp vendor from Japanese and Korean companies
… please let me know if there's any important information I missed
xueyuan: we will post the minutes on the meeting page
xueyuan: we really appreciate the presentation
… and the time of all the audience
… hope to have another event for the CJK community
… thank you all!
[adjourned]