The 1st CJK Meeting on MiniApps

08 April 2021


angel, Atsushi Shimono (W3C), Chiri Miura (Yahoo! JAPAN), Chisato Yamanoi (Keio University), Cory Caywood (Rakuten), Fuqiao Xue (W3C), Gangsong Lee (JD.com), Han Leon, Hideki Akashika (Rakuten Payment), Hiroko Homma (W3C), Hiroshi Ota (Yahoo! JAPAN), Hongbao Cui (DCloud), Hua Yang (SIAA), Ishikawa Tatsuo (Sales Promotion Dep.), Jay Kishigami (W3C), Jian Ma (JD.com), Jiaying Liang (W3C), Junichi Yoshii (Kodansha), jyoshii, Kaz_Ashimura, Kazuhiro Kamakura (Yahoo! JAPAN), Kazumasa Okabe, Kazuyuki Ashimura (W3C), Kjos, Liquan Wu (SIAA), Mannvi Kapoor (Rakuten), Mao Nishi (Yahoo! JAPAN), Martin Alvarez-Espinar (Huawei), Ming Zu (Baidu), Mizushima, naomi, Naomi Yoshizawa (W3C), Noritaka Maeda (Ohtemon University), Qing An (Alibaba), QingAn, Roy, Ruoxi Ran (W3C), Ryosuke Hiramatsu (Yahoo! JAPAN), Satoru Takagi (KDDI), Shicheng Wang (Xiaomi), Shigeru Fujimura (NTT), Takaaki Nishioka (Yahoo! JAPAN), Takio Yamaoka (Yahoo! JAPAN), Takio_Yamaoka, Tatsuya Igarashi (Sony Corporation), Tatsuya Tanaka (Yahoo! JAPAN), Tengyuan Zhang (Baidu), Thomas Steiner (Google), tomayac, Tomoaki Mizushima (Internet Research Institute), Tomoya Onishi (Yahoo! JAPAN), Wanming Lin (Intel), Wataru Suzuki (Yahoo! JAPAN Corporation), xfq, Xiaoli Xie (JD.com), xiaoqian, Xiaoqian Wu (W3C), Xu Jun (Intel), Xu Zhen (Meituan), xueyuan, Xueyuan Jia (W3C), Yan Dong (ByteDance), Yiming Wu (SIAA), Yongjing Zhang (Huawei), Yongqing Dong (Xiaomi), Zack Lin (Alibaba), zero, Zitao Wang (Huawei)
Roy, xfq

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


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


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


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


Mini App Runtime Architecture and Alliance Development Experience


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


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?


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


MiniApps Frameworks

Looking at the MiniApps Specifications from the Perspective of the Taro Cross-Platform Framework


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://www.w3.org/2021/03/miniapp-cjk/slides/UniApp-MiniApps.pdf

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


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!


Minutes manually created (not a transcript), formatted by scribe.perl version 128 (Thu Mar 4 11:59:56 2021 UTC).