Meeting minutes
<plh> This meeting has simultaneous interpretation and you may need to select the English or Chinese channel in your Zoom client.
plh: the presenter will be recording this session
[start recording]
tomayac: my name is Thomas Steiner
… I work for Google as a developer
Slides: https://goo.gle/learning-from-mini-apps
tomayac: MiniApp ecosystem is mostly in Chinese
… I don't speak Chinese and never lived in China
… I made sense by Google Translate
… feel free to correct me
… before talking about MiniApps let's talk about "super apps"
… super apps are apps that host other apps
… popular super apps include WeChat, Baidu, Alipay, Douyin etc.
… in the slides there are links to these super apps
… some apps are only available in China
… MiniApps are usually less than four megabytes and requires a super app to run
… MiniApps are cross-platform
… no matter if the super app runs on Android, iOS, or another OS
… MiniApp discovery can happen via QR code
… via in-app search
… via sharing in chat messages
… or be a part of a news item
… MiniApps can be highlighted when they're physically or virtually close
… all super apps have more or less the same UI for miniapps
… including a themeable top bar
… a close button
… and an action menu
… most MiniApps offer components to help developers to implement common UI paradigms
… MiniApps are not served piece by piece
… but are served as encrypted packaged apps
… MiniApps have to declare the origins they request additional data from
… caching, updates, and deep-linking
… MiniApps have version numbers
… can be used for cache
… can be deep-linked into a specific page
… for security and permissions, MiniApps are reviewed by the super app provider
… users perceive them as secure
… they need to declare their permission in a manifest
… the super app provides powerful APIs
… like network information APIs
… no Objective-C, Java, Kotlin etc.
… just JavaScript
tomayac: other powerful features include file system access, vibration hardware, barcode scanning etc.
… a very important feature of MiniApps is identity and social graph
… one MiniApp I found interesting is the Walmart miniapp
… with a personalized "Me" view
… developer experience
… MiniApps are not developed like a normal web app
… there are specific IDE/DevTools
… almost everything is in Chinese
… if you have something like Google Translate to scan your screen it would be helpful
… MiniApps provide Hello World demo projects
… first step is always log in
… usually need to scan a QR code
… and start programming
[show WeChat/Alipay/Baidu/ByteDance DevTools]
tomayac: architecture of these DevTools are basically the same, based on Monaco Editor
… the same project that also powers VS Code
… all IDEs have debugger based on Chrome DevTools front-end
… the IDEs per se are implemented in NW.js or Electron
… testing requires scanning a QR code
… remote debugging
… Chrome DevTools are customized
… wxml is an HTML dialect for WeChat
[show customized Chrome DevTools]
tomayac: you can inspect the DevTools with Chrome DevTools
[show Chrome DevTools inspecting WeChat DevTools]
tomayac: <image> is just a regular web component
… CSS debugging
… almost the same as Chrome devtools
… with some customization
… can simulate different devices, OSes
… performance auditing
… Lighthouse-inspired performance audit
… API mocking
… they extended Chrome devtools to add API mocking
… pretty cool
… how do you build and write a MiniApp?
… markup
… MiniApps are written in dialects of HTML
… like Vue.js text interpolation and directives
… or XSLT
… in WeChat it's wxml, in Alipay it's AXML etc.
… MVVM
[show data binding example]
[show list rendering example]
[show conditional rendering example]
[show templates example]
tomayac: next topic, styling
… dialects of CSS
… WXSS, ACSS, TTSS etc.
… extend CSS with responsive pixels
… density-independent pixels
[show styling
tomayac: components do not use shadow DOM
… this is not a problem
… because MiniApps use "pages"
… I'll talk about pages later
… next topic: scripting
… "safe subset" of JS
… WXS, SJS etc.
… in V8 or JavaScriptCore
… or V8/NW.js in the simulator
… ES6+ is usually possible
… automatically transpile to ES5 the WebView is old
tomayac: modules can be loaded via a src attribute
… or imported via require()
… like Node/RequireJS
… JavaScript bridge API
… connects MiniApps with the native OS
… feature detection is straightforward
… all providers provide a canIUse() method
… components
… some components are web components under the hood
… some components like map and video are OS-native components that get layered on the WebView
… for the developers the implementation details is not revealed
[show example components]
tomayac: lot of things available
… let me show you how you can use a component
[show example image component]
[show Alipay image component documentation with embedded component preview]
tomayac: for each component there's a QR code for the developer to test it in the real device
… developers can jump from the docs to the devtools using a proprietary URI Scheme like antdevtool-tiny://
… customized components are possible
… MiniApp lifecycle
… each MiniApp has a lifecycle
… the MiniApp needs to be registered by calling the global App() method
… there are launch, show, hide and other lifecycle states
… there are also page lifecycles
… like load, show, ready, hide, unload
… some platforms offer additional events like pulldownrefresh
… build process is abstracted away
… no need to use webpack etc.
… if you want to submit a MiniApp into the MiniApp app store
… review is needed
… more elegant than Xcode
… multi-page single-page app (MPSPA)
… each page has its own world
… you get scoped CSS for free
… navigation and routing for free
… code-splitting for free
… the web is an application platform
… I'm working on a project called Fugu
… look for powerful capabilities and how developers can use it today
… a sample HIIT training app
[explains HIIT]
[explains the UI of the HIIT Time app]
tomayac: it's a responsive app
… with dark and light mode and customized themes
… with in-app view
[show the app architecture]
[show the markup of HIIT Time]
tomayac: used a library called Shoelace
tomayac: router is simple
… styling
tomayac: every view is in its own world
… there's a very, very early prototype available on GitHub
https://github.com/tomayac/hiit-time
https://tomayac.github.io/hiit-time/
tomayac: should be working on desktop & mobile
… build multi-page single-page apps (MPSPA)
… use custom elements
tomayac: the Web is an app platform
… look for the growing list of powerful capabilities it offers
brian: MiniApps is an interesting thing because it's very specific and it seems to be to a particular place
… similar to TV/refrigerator etc.
… not sure if they can be well fit into the regular web
tomayac: MiniApps are implemented in cars, desktops
… some of them are not yet for responsive layout
… it could perfectly be "web"
… I think it's a super fascinating concept
<pchampin> thanks :)