Skip

Learning from MiniApps

Facilitator: Thomas Steiner

In this breakout session, I will first explain what mini apps are and how to build them, and then move on to an open discussion focused on what Web developers can learn from mini apps and their developer experience.

Slides

Minutes (including discussions that were not audio-recorded)

Previous: Delegated Ink Trails All breakouts Next: Cloud Gaming on the Web

Skip

Skip

Transcript

Hello, everyone, wherever you are on the world.

My name is Thomas Steiner and I've worked for Google as a developer advocate, focused on Chrome slash the web in general.

Today, I want to talk about learning from mini apps.

You can see the slides link if you want-- Thomas, may I suggest that you were a little bit slower.

Oh, okay, you can see the slides link, Goo.gle/learning-from-mini-apps.

If you want to follow along at home.

And there's also a link for the IRC chat, if you want to chat.

All right, with that, let's get started with a couple of caveats.

So first of all, the mini apps ecosystem is mostly but not exclusively Chinese.

And I don't speak Chinese and I've never lived in China.

So whatever I tell you, I've learned by scanning one screen with another screen and using Google Translate.

So if there's anything wrong, don't believe me check for yourself with a Chinese speaker.

But that being said, I believe I fairly accurately understood what's going on.

And there's a lot of contents I'm going fast, but yeah, you have to slide things so you can follow along at home.

So before we can start talking about mini apps, we need to talk about super apps.

Super apps are apps that are hosts to other apps that run within the super app, the so-called mini apps, Some popular super apps are Tencent's WeChat the app of the search engine, Baidu, Ant Groups, which is an affiliate of the Chinese Alibaba group, Alipay.

And then also ByteDance's Douyin, which some of you in the US and in the world might also know as TikTok with some interesting political developments happening right now around the company.

And the first three companies also known as BAT, Baidu, Alibaba, Tencents.

If you've come across this acronym, that's what it stands for.

Installing a super app.

Yeah, it's possible on several platforms, they're all available on iOS and Android and sometimes on Windows and Microsoft.

Be aware that the versions that you can find on mostly also the Western official app stores may not always have all the features of the Chinese version.

So sometimes if you want to get the full experience, you might need to side load from untrusted sources obviously proceed at your own risk.

If you have the slides, these are all the links for the WeChat, Baidu, Alipay and Douyin super app.

As I said, there are some regional restrictions, for example, Douyin can only be downloaded on the iOS app store in China, but not anywhere else in the world.

All right, mini apps.

So finally, we can talk about them, they are small apps, commonly less than four megabytes, and they require a super app to run.

What all the mini apps have in common, independent of the super app that they run in is that they're built with well dialects of the web technologies, HTML, CSS, and JavaScript, the runtime of mini apps as a web view within the super app and not the underlying operating system, which means that mini apps are cross platform.

So the same mini app can run in the same super app.

No matter if the super app runs on Android iOS or another operating system.

How do people discover mini apps?

A very common way is through branded 2D barcodes.

You could see one on the right-hand side.

If you use WeChat, we can scan this, and then you will land right on the demo application that you can see on the screenshot and having this kind of branded barcode solves a very important offline to online challenge.

So for example, if you have a physical e-scooter barcode on the scooter can bring you to the rental mini app so that you can actually rent the scooter on the street.

Mini app discovery can also happen through a regular in app search, so you have a super app and then within the super app, you can just search for an app.

A lot of the super apps are also some WeChat messages as a chat application, so WeChat as the name suggests.

So mini apps can be part of chat messages, or they can also be part of a news item in a newsfeed.

And a couple of mini apps also have the concept of verified accounts.

So an official brand account, for example, that can have mini apps contained in their profiles.

And mini apps can also be highlighted when they are physically or virtually geographically close.

So for example, on the right-hand side, you can see WeChat and in WeChat it has a mini programs nearby search.

So your location can bring up, I don't know, a mini app of a store that you're standing in front of.

The mini app experience once you scan such a QR code, or once you just launch a mini app from wherever is pretty consistent across all the super app vendors.

You always have a themeable top bar with a mini apps name.

And then on the side and the top corner, you typically have a close button and an action menu button, and the action menu brings up features like sharing, like favorites or allowing you to add the application to the home screen, but it can also report abusive apps there or provide feedback on the app and also change some settings.

For example, what kind of permissions an application gets.

UI paradigms of mini apps.

Well, usually you have a bottom tab bar, but just pretty frequent also it's just a night of applications for navigating in between the different main sections of the app.

And then you have views where it can descend in the apps hierarchy, a lot of super apps provide offer components that help you to develop common UI paradigms very quickly.

Like for example, carousels, accordions, progress bars, spinners, switches, maps, et cetera.

On the screenshot on the right you can see a demo of a carousel or a swiper component with a couple of options.

So if you can, for example, present or note the dots or make the carousel auto advancing.

And by having all these high-level components directly built into the super app, mini apps that are generally very consistent, which is also what is encouraged by WeChat's mini app design guidelines, just like with Apple design guidelines, that you have a common way of doing things.

For serving, where do mini apps get served from?

That's very interesting because rather than being served piece by piece as a separate set of resources, mini apps are served as an encrypted packaged app that has all the archives that contain all the core resources in just one file.

And they're also served from the super app provider directly and not the host origin, but they can of course still access APIs from the Mini-App developer if the developer chooses to.

But I mean, I want to do so mini apps have to declare the list of origins that they want to request.

So there's no just random asking for whatever example that come within the app.

mini apps need to declare beforehand that they want to access example that come before they can do that.

Caching updates and deep linking, mini apps are kept in the cache of the super app.

So for the next time they load, this happens almost instantly.

On the right hand side in the screenshot, you can see the wxapkg files of WeChat.

You can sort of see directly how they look like.

The size here is 1.1 megabytes for this particular example.

So it's small-ish.

Mini apps have version numbers and these version numbers are part of the launch URL.

So super app knows directly when it's trying to start a mini app.

If the version is still the current one that has cached, or if a new one needs to be loaded.

And launch URLs also have pages that you can use for deep linking.

So it can link or deep link into specific sub-sections of an application.

Mini apps also a sitemaps where they can declare which of the pages and which of the sections of the mini apps should be crawlable by the super app crawler so that you can search for content within these mini apps.

For security and permissions.

mini apps are reviewed by the super app providers before people can use them.

So people in general perceive them as more secure than random web apps that obviously everyone can just create.

And mini apps need to declare all the permissions that they use in a manifest.

And sometimes some mini apps also provide a way to say, why are certain permissions needed?

So as a developer, you can provide an explanation that sometimes also then gets shown to the user when the mini app requests a certain permission and shows a prompt.

Plus, as I just said sometimes, an explanation.

Mini apps have access to very powerful features.

And this happens through a so-called JavaScript bridge that gets injected into the web view where the mini at brands in the super app and this JavaScript bridge acts as the connection to the host operating system.

So, as an example, if you have a mini app that has a JavaScript function, for example, get connected with wifi, you can then use, well, this under the hood then uses Android's get connected Inf or get connection info API or iOS C and copy current network info APIs, but for the user, for the mini app developer get connected wifi is the function that they need to call.

It's a fully implemented in JavaScript.

So there's no objective C, no java, no anything, no Kotlin, it's just JavaScript.

Talking of these powerful features.

There's a long, long list of features that mini apps have access to.

There's Bluetooth NFC.

iBeacon, GPS, the system clipboard, orientation, sensors, battery information, calendar access, phone book access, screen brightness control, which is what you can see on the screenshot on the right hand side.

So a mini app can control the screen brightness of the device.

File system access, vibrational hardware, camera, and microphone access, screen recording access and screenshot creation access, network status, UDP sockets, so overall sockets, barcode scanning, device memory information and some more.

So really super powerful features that are exposed to mini apps.

One very powerful feature of mini apps also identity payment, and the social graph that is built into most super apps already.

So a lot of super apps already have your payment information and for some super apps, you even have a government verified identity.

So someone needed to go somewhere to some sort of official institution show their passport or something.

And then their, whatever WeChat account would be verified.

So there's a strong identity that is connected with the super app and obviously also payment data, because some of the super apps are from payment providers like Alipay, which as the name suggests searched for payments, you have apps like WeChat that have a social graph of your chat connections.

And one mini app that I found interesting to look at was the Walmart mini app.

And this is on the first view.

So it didn't really log in or anything.

The Me sub-section on this Walmart mini app just greets me with a very familiar face.

So this is me and I felt right at home in the mini app of Walmart, despite not speaking any single word of Chinese and felt like, oh, wow, this is me.

And I have a section already on Walmart.

I probably want to shop there.

I've noticed this a big topic of developer experience.

Mini apps are not developed just like regular web applications and I don't know, visual studio code or something, but for mini apps you download an IDE that is provided by the super app provider actually.

Again, if you have the slides downloaded the underlined words or links, so they can have the WeChat DevTools, Alipay DevTools, Baidu DevTools or ByteDance DevTools and download them to your computer.

They're typically available for macOs or for windows.

Obviously, everything is in Chinese or almost everything is in Chinese..

So if you have an app like Google Translate that can scan your screen, this is very helpful for getting around.

And for getting started a lot of them or actually all of them offer hello world products.

Again, the underlined words are links.

So you can get started very quickly and just have a baseline of experience of an app running.

For the development flow when you launch the IDE, typically you need to log in.

This happens with a QR code that you need to scan with the super app already logged in.

And once you log in, the IDE then knows who you are and lets you start programming, debugging, testing.

And obviously also in the later stages, submitting your app for review to one of the many app stores, Here's just a couple of screenshots.

So this is WeChat afterwards.

I just quickly walk you through on the left-hand side, you have the emulator, then you have the code view at the bottom.

You have the DevTools.

Alipay DevTools is almost the same, just a little differently arranged on the right-hand side, you have the emulator.

Then on the left-hand side, you have to code and at the bottom you have the DevTools.

Baidu DevTools is again the same like WeChat DevTools on the left we have emulator, then the code and at the bottom, DevTools.

And then ByteDance.

So remember this is Douyin TikTok.

On the left hand side, you have the emulator on the right hand side the code.

And then at the bottom you have the DevTools.

So it's kind of weird, but there's DevTools within the DevTools.

I'll come to that in a couple of minutes.

The architecture of all this DevTools is fundamentally the same.

You've seen it there as far as I could reverse engineer all based on the Monaco editor, which is also the editor that powers VS code internally and in all the ideas there's a debugger built in, which is based on the Chrome that was front end with some modifications.

I'll talk about those in a couple of minutes as well.

And the ideas per se are implemented either as NWJS or as electron apps and the simulators or emulators in these IDEs are then implemented as web use for either electron or NWJS.

Testing on a real device is super easy.

You just press a button and this button then shows a QR code.

You scan this QR code with you real device, and immediately you can start testing the application that you're developing that is just delivered over the cloud.

So super fast, super easy development flow, real device, cableless development.

You can also remote debug.

The flow is almost the same.

You just press a different button.

This shows a different barcode, and then you can directly with your big laptop or big computer screen debug or remote debug the small application running or on your device.

So you can see here, I've highlighted something, whatever, a label or a select box here.

And I can inspect it with my big laptop.

For the best tools customization, there's a couple of things that the IDE's change.

So for example, the elements panel and Chrome DevTools, as you see it in the browser has been replaced with something called WXML.

And if you use this to debug, so it behaves almost the same, like the elements panel.

If you assist to debug, one of the elements on this page here, you can see that I'm actually inspecting an image element.

So if you look close, it's pretty small, but maybe you can still see it and some image element with a bind type attribute, with a class attribute, with a mode attribute, with a source, with the role and so on and so on.

it's like the elements kind of budge.

You can see it's tailored to the programming world of WXML which is what's used by WeChat because all these ideas are built with web technologies.

So as I said, electron or NWJS, you can inspect them with Chrome DevTools.

So essentially just inspect DevTools with DevTools.

And if you do that, you can see how internally things are implemented.

So for example, if I inspect with DevTools, you could see that image that I just talked about under the hood actually is implemented as a regular custom element.

So HTML custom element.

So you can see there's an inner diff that has to style of a background image with a source and so on.

The custom element is called WX-image that has a class la la la la.

So it's just a regular custom element that they disguise to the developer as an image element if the developer only uses the WeChat DevTools and doesn't inspect the DevTools with DevTools which is what I've done here to reverse engineer how things work.

For CSS mini apps extend CSS with so-called responsive pixels.

We'll talk about those a little later and it's the same with the styles panel.

So it's almost the same like in Chrome DevTools, like in the web version of Chrome DevTools, but with some customization.

So here you can see I'm inspecting a padding of 200 RPX responsive pixels, and it just behaves as I would expect.

In the emulator, I can then of course switch the device.

I can simulate a different device like different iPhone, different Android device, whatever.

And then responsive pixels would just work as expected.

Performance auditing is also possible in DevTools.

So in WeChat DevTools, they have lighthouse inspired performance audits.

If you look at the categories here, they are total performance experience and best practice, and you can see I have 100 everywhere.

So that's pretty good I guess.

The UI will be very familiar if you've ever worked with the Chrome DevTools Lighthouse, it's obviously very inspired by the Lighthouse project.

Something that I found very helpful in just getting up quickly is API mocking.

So they extended Chrome DevTools by adding a mocking section.

So you can have remote calls that you just mock locally.

So you don't have the server.

You don't have to build the server.

You can just work with the mocked API values locally.

Pretty cool, alright.

So for the mock-up, how do you build and write mini apps?

So rather than with plain HTML, you use dialects of HTML as I've called it it's not technically a dialect, but it helped me understand most of the concepts better by just thinking of them as a dialect.

If you've ever dealt with Vue.JS the text interpolation directives of Vue specifically, you will feel immediately at home, but thinking a little bit back in the good old world of XML, a lot of the concepts have existed a long time before.

For example, with XSLT, I have to say the following code samples are all from WeChat's WXML, but the concept is the same for all the mini apps platforms.

So for Alipay, the thing is called AXML for Baidu it's called Swan Element for ByteDance it's TTML and so on.

And the underlying programming model is the model view, view model controller idea.

So it's a similar to Vue.js concept of programming.

So let me show you some examples to make it clearer.

For data binding, you have a WXML message, then the curly braces debilitation method.

And then in the JavaScript, you have a page that has a data object that has a message property with a value of hello world.

So if this gets rendered, the message is replaced with hello world.

So pretty intuitive, pretty straightforward.

You've probably seen this before in similar ways with must have templates or anything.

And as I said, with the views, text directives, it's almost the same.

For lists rendering, you have the WX:for directive that you pass an array of things.

And then it can see here, the data for this is an array with just the numbers and they then get just directly pasted into or and pasted filled into the view.

So it loops over all of the array entries.

So pretty straightforward, very easy to create lists like that.

Conditional rendering happens with WXIF and WXLF.

So you can see here, my page data is view of a value of two.

So in this case, it would render either if view was one would render one view was two, which has to case it would render two.

So pretty straightforward again for conditional rendering here.

For templates, you have a template that has a name of person.

Then you have a view, first name, and then you can see Cody versus again, first name and last name.

And to instantiate this, you can then say, my template is a person.

And the data for this person comes from a field called person a and then everything will be just magically filled in.

So pretty straightforward, again, you can probably immediately understand what is going on just by looking at these two quotes templates.

To the next topic styling, styling happens with dialects of CSS.

So again, it's not technically a dialect, but it helped me understand what's going on.

Just like before, they don't call it CSS, they call it WXSS, for Alipay, they call it ACSS, Baidu calls at CSS, ByteDance they call it TTSS.

One thing all have in common is that they extend CSS with responsive pixels.

So essentially if you have ever done Android development, that's something that's familiar to you under the name of tensity and dependent pixels.

So that's essentially the core addition to a CSS that they make you work with it just like with regular pixel.

So they can see here, I set a padding of whatever container to 200 RPX, but then get translated to the device dependent pixels by the engine.

So for the developer, there's nothing to do.

You just say it should feel like 200 pixels.

And then the engine does its magic.

For styling, you can also use just like inline CSS.

So you can see here, a view style equals two color, and then the curly braces again.

So you can have text interpolation work with that.

And for the components and I talk about components a little later, they don't use shadow DOM.

So do not use shadow DOM which means all the starts that you declare on a page will reach into all the components.

This is not a problem because pages, I will talk about pages a little later and common style sheet file organization is to have one root style sheet.

We have shared global styles that get applied to everything.

And then individual per page style sheet, style sheets that are specific to each page of the mini app.

Next topic is scripting.

They don't call it JavaScript, again, it's a dialect.

They call it a safe subset, safe subset of JavaScript, including modules that use various syntaxes that reminded me of CommonJS or RequiredJS.

They don't have dynamic code execution.

So you don't have evaluate and you don't have new function.

So you can't shoot yourself in the foot easily.

With regular JavaScript this would be allowed, which is why they call it a safe subset of JavaScript.

And the scripting execution context is V8 or JavaScriptCore, depending on the device and for Android it's V8 for JavaScriptCore, this means it's running on an iOS device and in the simulators it's V8 or NWJS and coding with ES6 or newer JavaScript syntax is possible because to DevTools automatically transpile the code to ES5 if the bill target is an operating system with an older view, but this is of course becoming less and less relevant, just because web process in general and web views catch up.

And yeah, typically you just develop in ES6 and then the built dynamically transpires to older syntax only if necessary.

So for WeChat they call their scripting language WXS.

So I can see a pattern here.

Alipay calls at SSJS, ByteDance calls it SJS2, Baidu just call it JS.

So, yeah, that's essentially it for including a script, you need to include a special tag WXS in each of these case.

So you can see here, I have a script that's embedded in WXS message hello world, manual exports message equals to message.

And then I can just, in my view, make use of the value or of the exposed or the exported value here by referencing the module ID, n1.message.

Modules can also be loaded by a regular source attribute or imported within one module from another.

So you can see here WSS pointing to the source, giving it a module name of tools.

And then in my view, I can use it as tools.message, or just call a function, whatever, or I can just insert a WXS file require another one.

So pretty straight forward, if you've ever done nodes development, or just any kind of JavaScript development with RequireJS this immediately feels familiar to you, JavaScript bridging API, is what enables the mini app to hook into the native operating system.

And yeah, this is of course what makes all the powerful features that I talked about, like Bluetooth and USB and whatever possible with these native capabilities.

But of course not all devices have all the features, but luckily all the platforms have a pretty straightforwardly named function called can I use where I can just ask why a function quote can I use whatever I want to use?

So for example, for ByteDance, it's called TT can I use, and you can test for any kind of thing.

So for example, you can test, does the current device support the swiper component?

If you remember a couple of slides back, I had the swiper component that carousel, you can just ask TT.

can I use swiper?

And then the response will be yes or no.

You can also test if a particular field is supported.

So it's not limited to components.

It's also open to any kind of, lower level fields that may be present in only certain things.

So feature detection is super easy just because everything is possible through, can I use?

Components, I talked about components a little earlier.

If you remember the WeChat image web component that under the hood was implemented as WX-image, but then technically not all of these components are web components.

So for example, map and video that get exposed as components on a mini app or not rendered as a regular HTML5 video or as a regular map as an Google map component or something, but they're rendered and then layered on top of the web view as operating system native components for performance reasons.

So you have a web view and then on top of the web view, you can have a map for example, or a video that's using native code.

For you as a developer.

This doesn't play a role at all, it's not exposed to you, you just program them like any other component.

And I show this in a couple of seconds, just for you to get a feeling for what kind of components are available.

If from, I think this is from Alipay, you have new containers, your basic content, your foreign components, and just randomly looking at things, and you have check boxes, you have switches, you have texts areas, you have progress, you have rich-text, you have scroll views, you have covered image, moveable view and so on.

So there's a lot of components that are already available.

I just showed map and video, audio and so on.

So there's a lot of things available.

So this list is by no means complete.

I just had to stop somewhere because the slide would have been too full.

So let me show you how you can use such a component on the left-hand side, you can see now AXML.

So this is using Alipay syntax.

You have just a nested view.

You can see here, you have an A4 directive.

So this is Alipay's listing view.

And then we just create for each of our items in an array, a page section demo.

And then we create an image object.

It has a couple of attributes, class, mode, on tap, on error, on load, source, lazy load, default source, and so on.

And then on the right-hand side, you can see how I can hook up all these functions to the JavaScript functions.

Just a second, please.

So you have to page object.

And then within the page object, you have data with an area of the various items that you want to loop over in your array here.

And then you have a couple of functions like ONTAP image load, and so on.

So you can see what's happening at each stage.

So pretty straight forward, you have a mapping to the functions that get called there's something in the image happens like an arrow or load event, or yeah, they can select the behavior, lazy loading should be true or false.

You can have a default source, which is the placeholder holder while the image is loading and so on.

So a lot of the things that we as JavaScript developers would need to implement with intersection of server, for example, for lazy loading, I know lazy loading has loaded as an attribute now.

So it's a little easier nowadays than it used to be a couple of months ago, but nevertheless, a couple of things like placeholders or loading indicators, this is all possible.

Just decorate a flea using this sort of syntax.

When you look at the documentation.

So you can see here, this is Alipay's documentation of the image component.

You can see that there's an embedded mini simulator running right into the documentation, but it can also pop up.

So you have an editable test playground here, so you can play directly with implementation in the browser and see what's happening in the simulator.

That is just embedded in the browser, in the documentation for seeing the effect of your changes and for each key component, there's also a QR code that you can just scan that brings you right into the Alipay application.

So you can test on a real device.

You can see here, this is on Alipay sample mini app that just shows the components for each of the other components that make such a testing app available.

And you can also connect directly to Alipay DevTools.

They leverage a proprietary URL scheme and DevTool-tiny.

So they have special links and if you click such a link in the documentation, Alipay DevTools would open and now you're brought right into a minimal example that you can edit right in Alipay afterwards.

So as a developer, it's super easy to just directly get started, play with the element in the documentation, hook it up to your local device for testing, or just edit away straight in Alipay DevTools.

Super festinating very easy for developers to get started.

If you happen to have a need for a custom component, so something that is not covered by the very long list of all the shipped built-in components you can do.

So it's not using custom elements like in HTML custom elements syntax, but something proprietary.

So I can see here that has properties.

It has data, it has methods, it has lifetime events.

So essentially it's the same-ish like black components in the web world, but a little, little simpler.

So you have attached, you have detached created and ready as the life cycle functions.

And then you have also page life-cycle cycle events that you can react to like show or hide.

The mini app life cycle is yeah, pretty similar as well.

Each mini app has a life cycle that yeah, or the mini app needs to be registered with a global object called app.

And then in this app object, you can connect some functionality to the lifecycle functions, launch, show, hide, or error.

And then you can also set global data that is shared across the application and like that you sort of just make sure what's happening if your mini app gets shown, gets hidden remember this is all multitasking.

So you can have a minion running and then you must ask a way to it, a way from it.

And then task back to it, which would mean the height event would be called.

Then the show event would be called.

And then maybe at the beginning you have the on launch event that sets up some state or something.

So pretty straightforward.

Each mini app consists of a couple of pages.

And I'm just like the app per se, all the pages as well, have life cycle events that you can connect to and listen to the core events are load, show, ready, hide, and unload.

So when a pages gets hidden, obviously the height functioning gets called and so on.

Some platforms also offer some more conveniency functions.

Like for example, pull-down refresh that allows you to direct on like pull down to refresh directly with a built-in function that is just a lifecycle function off the page.

So you don't have to build it yourself.

The build process.

So everything is abstracted away from using it.

You don't ever touch the build process at all.

So if you've ever set up something like roll-up or Webpack, forget about it, this is just being done automatically by the IDE and under the hood.

It's just using industry tools like Bagel or PostCSS for CSS transforming.

If you've ever used something like Next.js or create react up, it's pretty similar.

And likewise, if we're the Next.js so we're create react up, you decide to never touch the build process.

You don't have to in many cases, but here for mini apps, you actually never ever do this, it's just not a concept.

The IDE just doesn't expose this at all.

If you want to submit a mini app to a mini app store for inclusion in whatever the WeChat or Alipay app stores, you need to submit for review and in order to do so in their IDE, the build process completely automatically deals with signing, encrypting, packaging and then finally uploading to the super app provider.

You don't have to touch anything at all about this.

If you've ever done X code submitting for review in the Apple store, it's a lot more elegant than that.

So it's just one essentially button and everything just flows from there.

They made it super convenient and super easy.

So, why do I tell you all this?

Why did I dive into this?

I wanted to learn something from mini apps, especially with the view of a web developer and the learnings I've taken so far are build something.

What I call multi-page single page apps.

So I'm creating that term now.

MPSPA, MPSPA, multi-page single-page app.

Why?

Because each page has its own world with very little shared state.

Like that you get scoped.css for free.

You got navigation and routing for free.

You get route-based code splitting for free.

You get just so many things for free that in modern, single page applications you have to, or the framework has to rebuild for the browser.

If you use something, as I said, I'm finding that term a multi-page single-page app, to get a lot of this for free.

I will show you what I mean by this in a couple of minutes, use custom elements or just lightweight framework elements in the sense of, I dunno, Preact components because they make your life a lot easier.

If you don't have to hook up, very complex functionality.

If you can just use an accordion component, if you can just use a swiper component, it makes your life so much easier.

Custom elements exist today, there's a lot of frameworks and a lot of different custom element libraries out there that you can use that make your life a lot easier.

So use them and the web is an application platform, arguably, and look for the growing list of powerful capabilities that the web already offers today.

Personally, I work on a project with a lot of other folks that's called FUGU.

You can see here, the Blowfish, FUBU Blowfish, so in that context, we make a lot of these powerful capabilities that you needed a JavaScript bridge for in the mini apps world, just for regular web developers.

So have an open eye and look for those powerful capabilities and how you can use them in a browser today.

So to make this a little more concrete, I try to build a sample app.

I'm not sure if anyone of you is aware with the concept of HIIT training, high intensity interval training.

The core idea with HIIT training is always, you have a period of active time and you have a period of resting time.

So you can see here, this trainer is doing, I'm thinking something like sit ups, or I don't know, whatever, some activity, so I can see he's 28 minutes or seconds or 28 seconds to go.

And then he rests for 10 seconds and this is just essentially two progress rings that alternate, so it's always activity time, resting time, activity time, resting time and so on.

So I thought, why not building something like that?

And that's what I did.

I built an application called HIIT Time.

It has now the navigation bar at the top and as a main view in the middle and then it has a tab bar at the bottom with the different subsections, so workouts, timers, and preferences at the bottom where you can choose what you want.

The navigation bar at the top of it shows you where you are so you can see I'm in the workouts tab right now.

And then in the main view, you can see here, the three progress things, active time, resting time.

And then the number of sets that I need to do for each of those.

And obviously the start, pause and reset button.

It's a responsive application.

So you can see here responsive layout.

If I twist my phone to a landscape orientation, you can see the progress ranks get laid out horizontally and it has a dark and a light mode and it also has custom themes.

So it could see on the previous slide, the main theme was blue here.

The main theme is green, and then you have in-app views.

So if you want to set a new timer, the application just shows me an in-app view that allows me to do just this one thing.

And then I can go back.

I don't know, add a new timer or just cancel and you can see at the top, you have this spec arrow that you know, from Android and from iOS applications.

But because this is just a view, obviously just your regular back button.

So your physical hardware back button that you may have on your Android device or a back swipe gesture just works.

There's nothing you need to do, it's just there.

So looking at the application architecture, it's essentially just a couple of iPhones.

This is all the architecture it's not complex at all.

And the top on the top, you have the nav bar.

You can see here the URL is nav bar slash nav bar HTML.

Then you have a div with ID pages, inside there you have the three iframes for workout, timers and preferences.

And then at the bottom you have a fourth iframe that is set to the source about blank.

So nothing essentially that has the ID of new page.

And this blank iframe is used whenever I need a custom view.

So when I have this timer setting, this is what the about blank then dynamically gets set to.

So once you navigate away from this, it just navigates back to about blank.

And I thought you have a very simple, yeah, very performant architecture.

And then finally you have the tab bar at the very bottom and that's about it.

So for the mock-up, how does this work from a markup point of view.

On the web, we have something called lit-html developed a colleague of mine in Google.

If you remember what I showed you earlier for the WXML or also for the Alipay syntax, it's pretty straight forward.

So if you have a look at the section here of my application, the start button, the pause button and the reset button, there just literally there button at click, which hooks up to an event handler start, pause button, event handler, pause, la la la la la.

So nothing exciting here.

You can see all the strings come from a global object strings for localization.

So you can translate the app to different languages.

That's all the mark up you need for the pause buttons and start buttons and reset buttons.

And then you have to progress ring, which is a custom element that I got from a library called a Shoelace.

So as Shoelace progress ring and as a class of sets, and then the percentage which is essentially just my calculated number of sets that I need to do still.

And you can see that's all the markup that there is, and then inside of the custom component here, there's a slot that I can use for my sets and my current iterations.

So sets is one in this screenshot and that's it.

So this is all the markup that's needed for this.

The router's actually super, super simple.

All I do is I listen for the back event, prevent the default, and then just navigate the top window because everything is running in iframes, one level back.

So that's a router.

If you press the little triangle here and go back, or if you just swipe back, this is what's getting called, that's routing.

As I said, you get everything for free just because it's all built in the browser.

It's just different iframes that get orchestrated accordingly, that's it.

Nothing more to it.

Starting, as I said before, every view has its own world.

So you got scope styling for free.

So this is the style for my core preferences page here.

So you can see I'm just using the element names directly.

So no fancy bam syntax or no fancy whatever class nomenclature that I need to adhere to.

It's all just literally the HTML text as they appear or there's no clashes at all because every view has its own world.

So you can see it's just standard CSS grids and texts, whatever, whatnot, nothing super exciting.

It's just simple, that's what I wanted it to be.

If you're interested in this, I've made a very, very early prototype available.

It's on GitHub.

You can play with it.

It's not super elegant quite yet.

You will probably find bots.

But I think the concept per se is pretty powerful.

Especially if you look at the architecture of the pages, you can see all the pages in the pages folder are its own world.

So if you ever need to find out where is something happening, how is something realized in one particular view, you can just navigate to the page directory and have everything in one place.

I have to say this application doesn't bundle yet.

So you can see it's just introducing or including lit-html per se like that as a module in a production app at some point you probably want to add bundling, but for local development, this is completely working like that.

The same goes for Shoelace.

So these are the two third-party components or third-party libraries that I'm using here.

Everything else is just built in.

You can play with it.

The link is on the slides here.

So you have your device that they could test it on.

It should be working on desktop and on mobile.

There's some funny talking.

So if you have a compatible device on Android, for example, it will tell you the resting time and the active time.

So just give it a shot, play with it.

And again, I want to repeat this so that it sticks.

What can we learn from this?

Build multi-page single-page applications, MPSPAs.

I think it's a super powerful concept.

It works surprisingly well, just going back to the roots, use custom elements, or even just live by frame or components because declarative flow layout makes your life so much easier.

Especially if I just go back a couple of slides, especially if you look at the progress ring mark up here, just your data logic somehow figures out what is the number of sets.

So data.sets and then the view just automatically updates and lit-html renders really just to change things.

So you don't need any kind of virtual dome dressing or anything, it's just powered by lit-html directly.

And yeah, again, the web is an app platform.

So look for the growing list of powerful capabilities that the web offers.

You don't probably in many cases need access to, super, super powerful features that are really just available behind JavaScript bridges and a lot of cases maybe the web is good already like that.

And with that, thank you very much for listening.

You have to slide links again.

You have the IRC link.

If you want to share it, I have my contact here, so you can ping my Twitter, send me an email, or if you are in China, I'm also on WeChat and yeah.

Thank you very much for listening.

I'm happy to take questions now.

Skip

Sponsors

Platinum sponsor

Coil Technologies,

Media sponsor

Legible

For further details, contact sponsorship@w3.org