Support the DOM?

[xfq]

Currently, MiniApp platforms do not seem to support DOM manipulation.

MiniApps are based on Web technology, but they are different from ordinary web pages. In the browser, page rendering and JavaScript logic are executed in the same thread. However, MiniApps use multiple threads to complete the rendering of MiniApps: one thread is dedicated to rendering, which we generally call the view layer; and one or multiple thread(s) deals with data and logic, which we generally call the logic layer. Each MiniApp page can have one or multiple independent threads (also known as workers) in the logic layer. In the view layer, there is usually one thread, but some MiniApp implementations uses multiple threads to preload WebViews to improve the performance of page navigation.

These threads run concurrently and exchange data through MiniApps platform. The logic layer processes the data and sends it to the view layer, and receives feedback from the view layer.

Because the rendering and background logic processing can run concurrently, this makes the MiniApp more responsive.

In other words, the actual DOM tree exists in the rendering layer, but not in the logic layer, so the logic layer does not contain a document or window object and is not able to do DOM manipulation.

Can we consider exposing some DOM APIs to the logic layer so that MiniApps can make better use of JS libraries for the Web? And if we expose DOM APIs, what interfaces need to be exposed? Are there any performance considerations?

[xfq]

Related discussions:

• https://www.w3.org/2021/04/08-MiniApp-minutes.html#t10
• https://www.w3.org/2021/04/22-miniapp-minutes.html#t01
• https://www.w3.org/2021/05/20-MiniApp-minutes.html#t03

[xfq]

Another related question:

If we don't expose the DOM tree, is it possible to expose an accessibility tree for accessibility APIs to provide a representation that can be understood by assistive technologies (such as screen readers)? Can developers use JavaScript to modify the accessibility tree in a MiniApp?

[zhangyongjing]

Can we consider exposing some DOM APIs to the logic layer so that MiniApps can make better use of JS libraries for the Web? And if we expose DOM APIs, what interfaces need to be exposed? Are there any performance considerations?

Thanks for capturing this issue.
Do you have more background information about this requirement in terms of use cases and benefits? Is it for the ease of browser-based implementation of MiniApp, or for the acquaintance with traditional web developers who are more comfatible with DOM APIs?
And do you expect the DOM APIs are exposed in the native way or is it acceptable to have DOM-alike APIs?

Since in current MiniApp implementations, pages are NOT fully native HTML5, I assume supporting native DOM APIs would need certain translation/transformation.

[xfq]

Because it was proposed by the authors of MiniApp frameworks in the CJK meeting, I will try to ask them.

IMHO the biggest benefit is that website client-side JavaScript code can run in a MiniApp with few modifications.

[marcoscaceres]

Sorry for my ignorance, but MiniApps don't support HTML and JavaScript?

[zhangyongjing]

Sorry for my ignorance, but MiniApps don't support HTML and JavaScript?

MiniApps do support JS but not native HTML. Currently, many pre-standard implemenations use HTML-like languages to describe the page layout and UI components (new tags and events). In order to simplify data binding and component interactions, most of them adopt a Vue-like framework that provides convenient templating mechanism ({{ }}) and advanced rendering features (something similar to v-if for 'conditional rendering', v-for for 'list rendering' ) intead of using the low-level DOM-APIs.

Note: It is a question under discussion whether MiniApps would need a new markup language or just a HTML extension.

[tomayac]

@marcoscaceres, I have documented the way this works today in an article (which is part of a wider series).

[zhangyongjing]

That's a great document! Thanks @tomayac

[xfq]

If we don't expose the DOM tree, is it possible to expose an accessibility tree for accessibility APIs to provide a representation that can be understood by assistive technologies (such as screen readers)? Can developers use JavaScript to modify the accessibility tree in a MiniApp?

It seems that at least some MiniApp implementations support adding attributes that can be used to provide additional semantics and improve accessibility:

• https://developers.weixin.qq.com/miniprogram/dev/component/aria-component.html
• https://q.qq.com/wiki/develop/miniprogram/component/accessibility.html
• https://opendocs.alipay.com/mini/component/accessibility
• https://doc.quickapp.cn/widgets/common-attributes.html#%E5%B8%B8%E8%A7%84%E5%B1%9E%E6%80%A7

[xfq]

Filed #166 for the accessibility tree issue.