This is a template for slides for TPAC 2025.

Reader(s): To start the slide show, press ‘A’. Return to the index with ‘A’ or ‘Esc’. On a touch screen, use a 3-finger touch. Double click to open a specific slide. In slide mode, press ‘?’ (question mark) to get a list of available commands. To start the slide show, press Shift+F5 (Command+Enter on Mac). Return to the index by pressing ‘Esc’. You can also click to open a specific slide.

If it doesn't work: Slide mode requires a recent browser with JavaScript. If you are using the ‘NoScript’ add-on (Firefox or the Tor Browser), or changed the ‘site settings’ (Chrome, Vivaldi, Opera, Brave and some other browsers), or the ‘permissions for this site’ (Edge), you may have to explicitly allow JavaScript on these slides. Internet Explorer is not supported.

Leaving slide mode.

Joint MiniApps WG & CG
+ High-Performance CG

Martin Alvarez

TPAC 2025
Kobe, Japan & online
14 November 2025

Agenda

  1. Logistics (me) - 5'
  2. Towards a High Performance Web (Vic Yao) - 30'
  3. Ant Group's Vision (Yu Sen) - 30'
  4. MiniApps Specs: Status (Martin) - 15'
  5. MiniApps WG Re-Chartering - 30'

Logistics & Administrivia

Agenda

  1. Logistics
  2. Towards a High Performance Web
  3. Ant Group's Vision
  4. MiniApps Specs: Status
  5. MiniApps WG Re-Chartering

Agenda

  1. Logistics
  2. Towards a High Performance Web
  3. Ant Group's Vision
  4. MiniApps Specs: Status
  5. MiniApps WG Re-Chartering

Agenda

  1. Logistics
  2. Towards a High Performance Web
  3. Ant Group's Vision
  4. MiniApps Specs: Status
  5. MiniApps WG Re-Chartering

Working Drafts

MiniApp Packaging specification

Latest discussions

  1. Gap Analysis of web standards & MiniApp APIs and MiniApp elements
  2. MiniApp's WebViews (Breakout session)

Main challenges for final developers

Taro: Cross-Platform Framework

Conversion & distribution as…

  • HTML5
  • React Native
  • Mini-programs: WeChat, Jingdong, Baidu, Alipay, ByteDance, QQ, DingTalk, Alipay IOT...

Based on System’s WebView (or Tencent’s X5 WebView) or React Native WebView

Taro Sample Code

Screenshot of an article with an image
<View className='at-article'>
    <View className='at-article__h1'>
      这是一级标题这是一级标题
    </View>
    <View className='at-article__info'>
      2017-05-07   这是作者
    </View>
    <View className='at-article__content'>
      <View className='at-article__section'>
        <View className='at-article__h2'>这是二级...</View>
        <View className='at-article__h3'>这是三级...</View>
        <View className='at-article__p'>
          这是文本段落。这是文本段落。这是文本段落...
        </View>
        <View className='at-article__p'>这是文本段落</View>
        <Image className='at-article__img' src='https...'/>
      </View>
    </View>
  </View>

Source

MiniApps APIs Gap

Type API Description #1 #2 #3 #4 2+ Standard
Data management Data storage Get, set key=value pairs yes yes yes yes yes Storage API (IndexedDB API), Web Storage API
File system management Storage, management in the local file system yes yes yes yes yes File System API, File and Directory Entries API
Data exchange with other MiniApps Data exchange between installed apps yes yes yes yes Broadcast Channel API, Channel Messaging API
Compression/Decompression ZIP file management yes yes yes yes
Clipboard Clipboard set/get yes yes yes yes yes Clipboard API
Cryptography Encryption, decryption, random yes yes yes yes Web Crypto API
Cache Cache management (rules, cleaning, etc.) yes Content Index API
Sensors Accelerometer Sensors yes yes yes yes yes Sensor APIs (Accelerometer)
Compass Sensors yes yes yes yes yes Sensor APIs (Magnetometer)
Gyroscope Sensors yes yes yes yes yes Sensor APIs (Gyroscope)
Proximity sensor Sensors yes Proximity Sensor
Step counter Sensors yes yes yes yes
Ambient light sensor Sensors Sensor APIs (Ambient Light)

MiniApps Markup Elements

Type Feature Style? Funct.? Rec? Standard solution?
Container Content division <div> direct usage
Inline container <span> direct usage
Dialog <dialog> direct usage
Stacking container yes <div>* HTML + CSS (div { position: relative; })
Slideshow (carousel) yes <div>* HTML + CSS Flexbox + overscroll-behavior + scroll-behavior...
Tabs yes <nav><section>* (OpenUI) (navs + section + CSS)
List container yes <ul><li> HTML + CSS
Fixed container yes <div>* HTML + CSS
Scrolling container yes <div>* HTML + CSS
Grid layout yes <div>* HTML + CSS
Marquee yes <marquee> (deprecated)* HTML + CSS
Drag and drop yes <div>* HTML + Drag and Drop API
Pull to refresh yes <div>* HTML + JS + CSS
Conditional block @style CSS media queries
Navigation Bar <nav> HTML + CSS

A "Pure Web" SuperApp

https://espinr.github.io/sandbox/miniapps/pureweb/superapp

Opportunities

  • MiniApps paradigm overseas is still unknown, but gaining traction
  • Web standards bring: security, internationalization, accessibility by default
  • MiniApps Working Group, ongoing and ready to continue

Technologies to consider

  • Progressive Web Apps: installable, offline, ready worldwide
  • Isolated Web Apps: packaging, distribution through HTTP
  • High-Performance Engines: dedicate and performant web engines?

Re-Chartering

Different options to run MiniApps
  1. High-Performance input?
  2. Changes in the scope?
  3. Main milestones to achieve?
  4. General feedback?

Current Charter

Thank you

This presentation:
http://espinr.github.io/talks/2025/1114_MiniApps_TPAC