MiniApp Components

Draft Community Group Report

Latest published version:
https://www.w3.org/miniapp-components/
Latest editor's draft:
https://w3c.github.io/miniapp-components
Editors:
Martin Alvarez-Espinar (Huawei)
Zitao Wang (Huawei)
Feedback:
GitHub w3c/miniapp-components (pull requests, new issue, open issues)

Abstract

MiniApp Components are the building blocks to creating MiniApp Pages. These components encapsulate functionality, data, and styles, enabling developers to create custom and reusable items that can be combined to develop MiniApps. This specification aims to specify a set of common practices to define MiniApp Components that allow developers to build similar user interfaces across MiniApp platforms efficiently and provide a consistent user experience.

Status of This Document

This is a preview

Do not attempt to implement this version of the specification. Do not reference this version as authoritative in any way. Instead, see https://w3c.github.io/miniapp-components for the Editor's draft.

This specification was published by the MiniApps Ecosystem Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups.

GitHub Issues are preferred for discussion of this specification.

1. Introduction

MiniApp Components are the building blocks to creating MiniApp Pages. These components encapsulate functionality, data, and styles, enabling developers to create custom and reusable items that can be combined to develop MiniApps. MiniApps include essential elements like page containers, textual and multimedia content, and other interactive features like forms.

To align MiniApps and Web applications, MiniApps may be defined using Web resources (i.e., HTML, CSS, and scripts) as described in [MINIAPP-PACKAGING]. Despite this, traditionally, MiniApp implementations offer specific non-standard features and mechanisms facilitating the development and implementation of the MiniApp Components.

Although MiniApp Components share the same concept as Web Components, their capabilities and development features differ. The main differences are motivated by the architecture of the existing implementations along the MiniApp ecosystem following the MVVM pattern, based on components developed through domain-specific markup languages and without access to the standard DOM.

To avoid overlap with Web Components, also supported by MiniApp user agents, this specification aims to be an informative reference and is not intended to be a formal standard. Thus, it aims to specify a set of common practices to define MiniApp Components that allow developers to build similar user interfaces across MiniApp platforms efficiently and provide a consistent user experience.

1.1 Conformance

As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.

2. Component Basics

2.1 MiniApp Pages and Components

A MiniApp Component is a custom MiniApp element with encapsulated functionality, data and styles that can be reused in MiniApp Pages.

Editor's note
Structure, differences with Web Pages and Web Components.

2.2 MiniApp Interface

Editor's note
Formal definition of the interface?

3. Templating

3.1 Content Interpolation

Editor's note
Data binding.

4. Component Declaration

Editor's note
Component interface (properties)

5. Component Reuse

Editor's note
How to instantiate a component. Passing arguments, attributes. Access to component nodes.

6. Component Properties and Methods

Editor's note

7. Component Events

7.1 Event Binding

Editor's note

7.2 Event Listeners

Editor's note
How

7.3 Types of Events

Editor's note
The common events for MiniApps.

8. Scripting Resources

Editor's note
Restrictions in the scripting resources.

9. Stylesheets

Editor's note
CSS profile supported.

10. Component Lifecycle

Editor's note
Explanation and links to MINIAPP-LIFECYCLE.

11. MiniApp Elements

Editor's note
Essential MiniApp elements. List, global attributes, events...

12. Accessibility Considerations

This section is non-normative.

13. Security Considerations

14. Privacy Considerations

A. Acknowledgments

Editor's note
List all the contributors and W3C Team contacts

B. References

B.1 Normative references

[MINIAPP-PACKAGING]
MiniApp Packaging. Martin Alvarez-Espinar; Qing An; Tengyuan Zhang; Yongjing ZHANG; Dan Zhou. W3C. 27 October 2022. W3C Working Draft. URL: https://www.w3.org/TR/miniapp-packaging/