Common UI Components

[MichaelWangzitao]

Currently, there are different vendor development guidelines, markup languages, and event implementations for developing MiniApp UI components. It may lead to repeated learning and repeated development by developers. Therefore, IMHO, it makes sense to define a standard set of UI common components for MiniApp. That allows codes to easily migrate to different platforms, reduce repetitive development, and provide the same user experience.

Potential standard opportunities may include:

• Define the common language to develop MiniApp UIs;
• Document the common set of UI components, such as visual appearance, common behavior (events, and user interaction possibilities).

[tomayac]

See Open UI for reference.

[marcoscaceres]

Define the common language to develop MiniApp UIs;

From a standardisation perspective, this would generally just be "use HTML and custom elements"... which is what all the other components are built on.

Document the common set of UI components, such as visual appearance, common behavior (events, and user interaction possibilities).

As @tomayac points to, that's probably better done by something like Open UI. However, if there are improvements that needs to be made to HTML, CSS, or JS we could send requests to the appropriate working groups or standards orgs.

[MichaelWangzitao]

Dear All， Thank you for your comments! Actually，many existing implementations do not follow the standard html, but use html-like markup languages, such as Alibaba's axml and Baidu's swan. So we can't confirm how standard definitions of common components are supported. And talk about the Open UI, thanks for mentioning it, and I also took a little time to learn about it. It seems that the Open UI is more focused on Web events and components, while the MiniApp usually is deployed on mobile phones and has many mobile phone-specific events and operations, such as longpress, swipe, etc. Personally, I'm like to reuse existing OpenUI components and add MiniApp specific components to define standardized UI components for MiniApp.

[marcoscaceres]

ooooh... ok! Starting to get it now. So MiniApps run on "web-like" tech (e.g., Alibaba's axml, which is XML-like too + SJS, which is kinda like JS - but a subset of it), but not "standard" HTML, CSS, and JS. Interesting.

[MichaelWangzitao]

An initial draft of UI components is prepared for CG discussion. The scope of the components in the document refers to the common parts of the existing deployment. The next step is to reuse the existing html5 standard components as much as possible and add MiniApp specific components to optimize the draft and prepare an explainer to discuss the need for UI component standards: https://github.com/MichaelWangzitao/MiniApp-UI-Componets/blob/29bd749827a9379f96d4fa73291ad97392d1114a/index.html

[xfq]

Preview: https://raw.githack.com/MichaelWangzitao/MiniApp-UI-Componets/main/index.html

[MichaelWangzitao]

An Explainer for MiniApp UI components, continuous update: https://github.com/MichaelWangzitao/MiniApp-UI-Componets/blob/main/explainer.md

[xfq]

Created https://github.com/w3c/miniapp-components per yesterday's CG meeting.

[espinr]

This document, now more solid, is informative and published by the CG (consensus at TPAC meeting). I've also updated the charter (#202) to reflect this.