13:52:37 RRSAgent has joined #miniappslearnings 13:52:37 logging to https://www.w3.org/2020/10/28-miniappslearnings-irc 13:52:39 RRSAgent, make logs Public 13:52:40 Meeting: Learning from Mini Apps 13:52:42 present+ 13:52:43 present+ 13:53:07 xfq has joined #miniappslearnings 13:54:21 Slides: https://docs.google.com/presentation/d/e/2PACX-1vREwN7H71zfjPP8lwYgyc-iXam7_PMFCxiZy2dQNZ-XpbiKk1aRSj67vxfcegkHogcO0q3BFHxPf6S5/pub?start=false&loop=false&delayms=60000&slide=id.p 13:56:16 wanming has joined #miniappslearnings 13:56:36 ivan has joined #miniappslearnings 13:57:49 This meeting has simultaneous interpretation and you may need to select the English or Chinese channel in your Zoom client. 13:58:32 xueyuan has joined #miniappslearnings 13:58:52 martin has joined #miniappslearnings 14:00:00 hartmanng has joined #miniappslearnings 14:00:07 tm has joined #miniappslearnings 14:01:06 present+ martin_alvarez 14:01:09 gerrit has joined #miniappslearnings 14:01:12 PEConn has joined #miniappslearnings 14:01:15 emilio has joined #miniappslearnings 14:01:19 mknowles has joined #miniappslearnings 14:01:36 present+ 14:01:50 stevelee has joined #miniappslearnings 14:01:51 pchampin_ has joined #miniappslearnings 14:01:53 xiaoqian has joined #miniappslearnings 14:01:55 present+ 14:02:00 present+ 14:02:14 present+ 14:02:19 present+ Gerrit_Niezen 14:02:28 vzasadnyy_facebook has joined #miniappslearnings 14:02:30 present+ 14:02:32 danyao has joined #miniappslearnings 14:02:38 Bert has joined #miniappslearnings 14:02:45 present+ 14:03:03 igarashi has joined #miniappslearnings 14:03:17 stevelee_ has joined #miniappslearnings 14:03:24 jeff has joined #miniappslearnings 14:03:37 present+ Wanming_Lin 14:03:37 zakim, pick a victim 14:03:37 Not knowing who is chairing or who scribed recently, I propose xfq 14:03:42 alexchristensen has joined #miniappslearnings 14:03:45 scribe: xfq 14:03:46 present+ 14:04:14 plh: the presenter will be recoding this session 14:04:25 s/recoding/recording/ 14:04:38 xueyuan has joined #miniappslearnings 14:04:43 stevelee__ has joined #miniappslearnings 14:04:44 [start recording] 14:04:52 present+ Tatsuya_Igarashi 14:04:54 tomayac: my name is Thomas Steiner 14:05:02 ... I work for Google as a developer 14:05:34 Slides: https://goo.gle/learning-from-mini-apps 14:06:10 tomayac: MiniApp ecosystem is mostly in Chinese 14:06:20 ... I don't speak Chinese and never lived in China 14:06:28 belem has joined #miniappslearnings 14:06:32 ... I made sense by Google Translate 14:06:40 ... feel free to correct me 14:06:56 ... before talking about MiniApps let's talk about "super apps" 14:07:11 ... super apps are apps that host other apps 14:07:17 JohnRiv has joined #miniappslearnings 14:07:41 ... popular super apps include WeChat, Baidu, Alipay, Douyin etc. 14:07:57 ... in the slides there are links to these super apps 14:08:06 ... some apps are only available in China 14:08:27 ... MiniApps are usually less than four megabytes and requires a super app to run 14:08:39 ... MiniApps are cross-platform 14:09:05 ... no matter if the super app runs on Android, iOS, or another OS 14:09:28 ... MiniApp discovery can happen via QR code 14:09:40 ... via in-app search 14:09:53 ... via sharing in chat messages 14:10:04 ... or be a part of a news item 14:10:31 ... MiniApps can be highlighted when they're physically or virtually close 14:10:55 ... all super apps have more or less the same UI for miniapps 14:11:11 ... including a themeable top bar 14:11:17 ... a close button 14:11:21 ... and an action menu 14:11:28 stevelee has joined #miniappslearnings 14:12:07 ... most MiniApps offer components to help developers to implement common UI paradigms 14:12:22 ... MiniApps are not served piece by piece 14:12:38 ... but are served as encrypted packaged apps 14:13:05 ... MiniApps have to declare the origins they request additional data from 14:13:19 ... caching, updates, and deep-linking 14:13:35 ... MiniApps have version numbers 14:13:48 ... can be used for cache 14:14:05 ... can be deep-linked into a specific page 14:14:22 bkardell_ has joined #miniappslearnings 14:14:27 present+ 14:14:28 ... for security and permissions, MiniApps are reviewed by the super app provider 14:14:38 ... users perceive them as secure 14:15:05 ... they need to declare their permission in a manifest 14:15:21 ... the super app provides powerful APIs 14:15:38 ... like network information APIs 14:15:53 ... no OC, Java, Kotlin etc. 14:15:58 ... just JavaScript 14:16:04 s/OC/Objective-C/ 14:16:49 tomayac: other powerful features include file system access, vibration hardware, barcode scanning etc. 14:17:12 ... a very important feature of MiniApps is identity and social graph 14:17:47 ... one MiniApp I found interesting is the Walmart miniapp 14:18:01 ... with a personalized "Me" view 14:18:08 ... developer experience 14:18:18 ... MiniApps are not developed like a normal web app 14:18:24 Geunhyung_Kim_ has joined #miniappslearnings 14:18:35 ... there are specific IDE/DevTools 14:18:41 ... almost everything is in Chinese 14:18:59 ... if you have something like Google Translate to scan your screen it would be helpful 14:19:05 present+ Geunhyung_Kim 14:19:22 ... MiniApps provide Hello World demo projects 14:19:32 ... first step is always log in 14:19:44 ... usually need to scan a QR code 14:19:53 ... and start programming 14:20:28 [show WeChat/Alipay/Baidu/ByteDance DevTools] 14:20:54 tomayac: architecture of these DevTools are basically the same, based on Monaco Editor 14:21:05 ... the same project that also powers VS Code 14:21:26 ... all IDEs have debugger based on Chrome DevTools front-end 14:21:48 ... the IDEs per se are implemented in NW.js or Electron 14:22:04 ... testing requires scanning a QR code 14:22:20 ... remote debugging 14:22:33 ... Chrome DevTools are customized 14:22:48 ... wxml is an HTML dialect for WeChat 14:22:50 MikeSmith has joined #miniappslearnings 14:23:03 [show customized Chrome DevTools] 14:23:31 tomayac: you can inspect the DevTools with Chrome DevTools 14:24:00 [show Chrome DevTools inspecting WeChat DevTools] 14:24:14 tomayac: is just a regular web component 14:24:27 ... CSS debugging 14:24:43 ... almost the same as Chrome devtools 14:24:49 ... with some customization 14:25:04 ... can simulate different devices, OSes 14:25:12 ... performance auditing 14:25:31 ... Lighthouse-inspired performance audit 14:25:41 ... API mocking 14:25:54 ... they extended Chrome devtools to add API mocking 14:26:00 ... pretty cool 14:26:11 ... how do you build and write a MiniApp? 14:26:14 ... markup 14:26:31 ... MiniApps are written in dialects of HTML 14:26:55 ... like Vue.js text interpolation and directives 14:27:08 ... or XSLT 14:27:35 ... in WeChat it's wxml, in Alipay it's AXML etc. 14:27:43 ... MVVM 14:27:51 [show data binding example] 14:27:58 [show list rendering example] 14:28:31 [show conditional rendering example] 14:28:54 [show templates example] 14:29:28 tomayac: next topic, styling 14:29:46 ... dialects of CSS 14:29:57 ... WXSS, ACSS, TTSS etc. 14:30:11 ... extend CSS with responsive pixels 14:30:27 ... density-independent pixels 14:30:38 [show styling example]... 14:30:45 s/example]...// 14:30:59 tomayac: components do not use shadow DOM 14:31:07 ... this is not a problem 14:31:14 ... because MiniApps use "pages" 14:31:20 ... I'll talk about pages later 14:31:34 ... next topic: scripting 14:31:44 ... "safe subset" of JS 14:32:02 ... WXS, SJS etc. 14:32:25 ... in V8 or JavaScriptCore 14:32:35 ... or V8/NW.js in the simulator 14:32:52 ... ES6+ is usually possible 14:33:03 ... automatically transpile 14:33:31 s/automatically transpile/automatically transpile to ES5 the WebView is old/ 14:33:52 tomayac: modules can be loaded via a src attribute 14:34:04 ... or imported via require() 14:34:21 ... like Node/RequireJS 14:34:29 ... JavaScript bridge API 14:34:41 ... connects MiniApps with the native OS 14:35:07 ... feature dectectiono is strait forward 14:35:29 ... all providers provide a canIUse() method 14:35:40 ... components 14:36:02 ... some components are web components under the hood 14:36:30 ... some components like map and video are OS-native components that get layered on the WebView 14:36:47 ... for the developers the implementation details is not revealed 14:37:03 [show example components] 14:37:13 tomayac: lot of things available 14:37:21 ... let me show you how you can use a component 14:37:35 [show example image component] 14:37:49 s/dectectiono is strait forward/detection is straightforward/ 14:38:37 I have made the request to generate https://www.w3.org/2020/10/28-miniappslearnings-minutes.html xfq 14:39:53 [show Alipay image component documentation with embedded component preview] 14:40:16 tomayac: for each component there's a QR code for the developer to test it in the real device 14:41:18 ... developers can jump from the docs to the devtools using a proprietary URI Scheme like antdevtool-tiny:// 14:41:47 ... customized components are possible 14:41:52 ... MiniApp lifecycle 14:41:59 ... each MiniApp has a lifecycle 14:42:21 ... the MiniApp needs to be registered by calling the global App() method 14:42:54 ... there are launch, show, hide and other lifecycle states 14:43:06 ... there are also page lifecycles 14:43:25 ... like load, show, ready, hide, unload 14:43:43 ... some platforms offer additional events like pulldownrefresh 14:44:05 ... build process is abstracted away 14:44:17 ... no need to use webpack etc. 14:44:35 ... if you want to submit a MiniApp into the MiniApp app store 14:44:53 ... review is needed 14:45:15 ... more elegant than Xcode 14:45:45 ... multi-page single-page app (MPSPA) 14:46:01 ... each page has its own world 14:46:13 ... you get scoped CSS for free 14:46:20 ... navigation and routing for free 14:46:31 ... code-splitting for free 14:47:04 ... the web is an application platform 14:47:12 .. I'm working on a project called Fugu 14:47:36 ... look for powerful capabilities and how developers can use it today 14:47:55 ... a sample HIIT training app 14:48:24 [explains HIIT] 14:48:41 [explains the UI of the HIIT Time app] 14:49:16 tomayac: it's a responsive app 14:49:32 ... with dark and light mode and customized themes 14:49:43 ... with in-app view 14:50:24 [show the app architecture] 14:51:30 [show the markup of HIIT Time] 14:53:06 tomayac: used a library called Showlace 14:53:17 s/Showlace/Shoelace/ 14:53:36 tomayac: router is simple 14:53:54 ... every view is in its own world 14:54:04 s/every view is in its own world/styling/ 14:54:10 tomayac: every view is in its own world 14:54:44 ... there's a very, very early prototype available on GitHub 14:55:03 ivan has left #miniappslearnings 14:55:08 https://github.com/tomayac/hiit-time 14:55:29 https://tomayac.github.io/hiit-time/ 14:55:46 tomayac: should be working on desktop & mobile 14:55:56 pchampin has joined #miniappslearnings 14:56:21 ... build multi-page single-page apps (MPSPA) 14:56:33 ... use custom elements 14:57:14 tomayac: the Web is an app platform 14:57:34 ... look for the growing list of powerful capabilities it offers 14:57:35 q? 14:57:37 q+ 14:57:49 ack bkardell_ 14:58:23 brian: MiniApps is an interesting thing because it's very specific and it seems to be to a particular place 14:58:34 ... similar to TV/refrigerator etc. 14:58:47 ... not sure if they can be well fit into the regular web 14:58:59 tomayac: MiniApps are implemented in cars, desktops 14:59:13 ... some of them are not yet for responsive layout 14:59:22 zakim, close the queue 14:59:22 ok, plh, the speaker queue is closed 14:59:29 ... it could perfectly be "web" 14:59:47 ... I think it's a super fascinating concept 15:00:12 rrsagent, make minutes v2 15:00:12 I have made the request to generate https://www.w3.org/2020/10/28-miniappslearnings-minutes.html xfq 15:00:12 thanks :) 15:00:22 belem has left #miniappslearnings 15:00:25 zakim, end meeting 15:00:25 As of this point the attendees have been tomayac, plh, martin_alvarez, emilio, stevelee, xiaoqian, pchampin, Gerrit_Niezen, hartmanng, xfq, Wanming_Lin, ivan, Tatsuya_Igarashi, 15:00:28 ... bkardell_, Geunhyung_Kim 15:00:28 RRSAgent, please draft minutes v2 15:00:28 I have made the request to generate https://www.w3.org/2020/10/28-miniappslearnings-minutes.html Zakim 15:00:30 I am happy to have been of service, plh; please remember to excuse RRSAgent. Goodbye 15:00:34 Zakim has left #miniappslearnings 15:00:36 tomayac: I would love to chat some more on this topic somehow 15:00:39 rrsagent, bye 15:00:39 I see no action items 15:00:40 Happy to answer questions here