Conf42 JavaScript 2021 - Online

Quick Apps: easy coding, frictionless UX

Video size:

Abstract

Quick App is a framework that implements the W3C MiniApp specifications, a new concept of hybrid light applications that do not require installation and offer native user interfaces. This talk presents Quick Apps as a platform for mobile application development, based on the widely known front-end web technologies (i.e., HTML, JS, CSS) and an MVVM architecture. It enables developers to create “light” applications more efficiently, using built-in components and advanced access to a host devices’ native resources like the calendar or running the app in the background. Quick apps help deliver products and services with an accelerated time-to-market process and tools for product lifecycle management, including promotion, user acquisition, monetization, and user retention… All packaged in less than 1MB.

Summary

  • Quick apps is a new platform to create mini or light apps for Android. These mini apps can help us to create better user experiences for our customers. We are trying to reduce the fragmentation of the market with a common w three c miniapp specification.
  • Quickap is a framework that allows you to create a quick app. It uses a domain specific language, something similar to HTML. The two main engines, the JavaScript engine and the rendering engine, are running in separate threads. You can create your user interfaces very quickly and intuitively with prebuilt components.

Transcript

This transcript was autogenerated. To make changes, submit a PR.
Hi and welcome. I'm explaining quick apps, which is a new concept, a new platform to create mini or light apps for Android. These mini apps or light apps can help us to create better user experiences for our customers without the potential friction of going into the marketplace looking for the right application, downloading, installing and all this tedious process that can cause some reluctance at the time to use our product or our service, our app. Starting by explaining what is a light app or a mini app. Perhaps it's a concept new for you, but it's not so new. It's very popular indeed in Asia, especially in China. For instance, the WeChat mini program was launched five years ago, allowing developers to use or to create experiences within the main application, in this case the super app, which is the WeChat application. These developers can create games to be played inside the witchat application, can offer different shops or marketplaces inside the application, make payments, doing transactions, or creating any experience within the same environment, which is the super app, in this case WeChat. I have to mention that nowadays WeChat has more than 3.2 million mini programs. So you can imagine the potential we have with this mini app ecosystem or light app ecosystem. Nowadays the ecosystem of light apps are very diverse. You can see some examples here, most of them from China. As you can see 360, WeChat, Alipay, Baidu with different names as I mentioned, mini program, mini app, et cetera. But also you can see some familiar faces like Facebook Instant games that are following a similar process. They are offering casual games within the same framework, within the same environment, which is Facebook. And also Uber recently launched similar approach offering the mini app. Uber eats inside the main application which is Uber, so you can buy some food where you are on a ride. This is the kind of light apps running on top of another super application. But there is another case, a standard case, which is the PWA, the progressive web application. This is the standard of W three C to create light apps and this might run on top of the browser so the browser can be considered as well as a super app. There are some other examples like kios, apps for the specific operating system and some other proprietary formats like app clips which is the format for Apple created specifically for their operating system, following a similar approach but running directly on the operating system and being considered similarly as a native application but running on top of the operating system. Some other approaches, this case for Android and also as you can see, very diverse from instant apps. The apps for Amazon based also on web technologies, Android Go which is a reduced version of the native Android applications and some others like the approach of a web app apk to pack that web application PWA into an Android application. And there is another set of mini apps which is called quick app. This is another version of light apps running on top of Android. And this is what I will present to you today in w three c. We are trying to reduce the fragmentation of the market so you can see in this big bubble in the middle that what we are trying to achieve, we are collecting requirements from all the potential vendors of the mini apps and we are trying to collect all the minimum features or the common features from all the versions of the mini apps, trying to standardize the format, the delivery and also how to describe the metadata of miniapp. We are collaborating with some other groups in WC, like the progressive web application working group, in order to align both approaches and having a common understanding and interoperability among technologies. So you can see that this fragmentation of the market is trying to be solved, at least with the maximum number of miniapp vendors into a common w three c miniapp specification. I will present quick apps which is a specific implementation of this standard work in w three c. The MiniApp standard Quick apps is a framework based on view js. So following the model view view model approach to create miniapp for Android. So like you can see in this picture, we can create native like applications like the one here. And the user only needs to scan the query code or tap on a link and just enjoy in the experience so they don't see any process of installation. Here you can see the high level architecture, quick apps the platform. You can see that quick apps are running on top of the operating system and quick apps might run in parallel with native applications and web applications. So all these three types of applications might coexist in the system. The developers, sorry, the users can experience native look and feel features, so they might experience the same as in a native application, also with the same performance. Because they are running directly on the operating system, the end users only need to scan a quercode, tap a link or clicking on a banner and just run and enjoy the experience of the quick app. These are very useful for creating specific task oriented services like transactional services. When you are in the street, when you are in the move, you have to pay for a parking, checking for some information about real traffic information, so many different things that you require direct access to some service and without the minimum friction to get to access this service. In terms of developers, what we can achieve with quick apps, we can have access to the system APIs, the native APIs, advanced system APIs like access to the calendar, access to the list of contacts. We will be able to push notifications to the user based on the native capabilities of the device with less code. It is estimated that we only need the 20% of code lines done in a native application and we will have the possibility to use pre builtin user interface components and also prebuilt services that can access to these APIs of the device. The quickup platform also allow us to control the full lifecycle of the product in terms of marketing and other aspects like the discoverability of the product or the application, user acquisition, monetization and user retention. So we have the possibility to create more discoverable applications using different capabilities of our device, using the widgets in our device, creating search results based on the global search engine of our device. As you can see on the right hand side, the right picture where some of the applications are listed there. But in the case of the Quick app, you only have to click on the open button instead of install button. So you also can discover the quick apps in websites, also in links from other application native applications or quick apps. So we have deep links to go specific to specific parts of the application and also we can have as the rest of the native application all the quick apps listed in app marketplaces in the existing ones. Or we can create some new directories to list these quick apps. In terms of user acquisition, we have also some mechanisms. You can see the relation with the discoverability and this user acquisition. It's very easy to find a quick app somewhere on the web or on some banner and just click and start using the application. So enhancing the user experience because you are not leaving the environment, you don't need to go to other places. So you just click and start enjoying the experience. So there is the minimum friction in this process of acquiring new user. Also we have some possibilities to include specific services based on the implements of the vendors for user identification. In case you have some existing account in your device, only with a click you can log in into this quick app, reducing as well the friction of registration and collecting information about the user in terms of monetizing your product, your application. This is also straightforward. We can include miniapp payments. It will depend on the implementation of the vendor. You can implement your own method or you can rely on third party payment mechanisms. And also you can add advertising in ad adverts and also rewarded ads videos, the ones that you can use for your casual games. Well, this is a good way to monetize your applications very quickly and very indirect in terms of user retention. Once they are using the application, you will be able to offer the possibility of storing or creating a shortcut in the desktop in the same way as the rest of the native applications. So with a simple prompt the user might agree in registering or adding this shortcut in the home screen. So at the end they will be able to repeat the experience and just experience this application like a normal application, a native application, traditional one, but just with this brief step, very straightforward in terms of user retention as well. We have some possibilities to engage the user for marketing purposes. We can send push applications, we can offer possibilities of crossing data between different quick apps. We have also putting banners in the apps native or also in the web to engage the user in another experience using the same quick app. I will explain a little bit about the framework, how to create a quick app, and some details about the technical implementation that could be interesting for you. The framework the platform follows, as I mentioned, the view JS framework. So it follows a model, view V model approach. You can find some similarities if you are familiar to this framework. In this example, the example shows the typical structure of a page in a quick app. You see three different parts, templates, script and style. It's very obvious. The first part template is about the declarative rendering of the page, the structure and also some static information. And you can see some variables there using the mustache notation that it's for the data binding. Using the logic part from the script in the script, you can see how we can declare some variables that will be used by the template part, the rendering part, and in this way we can bind the information between these two parts, the logic and the templates. We are following virtual dome manipulation with this, so the refresh will be very quick and the experience will be quicker. And as you can see here, we use also style sheets based on CSS. But the good part is we can include natively the preprocessing of CSS using place and SAS. So you see this example, I think it's very intuitive, very simple to understand, but let's see the basic example of a components in a quick apps page. Regarding the architecture of the platform of the Quickapp platform. You can see here a high level diagram. In the top we can see the front end framework, the one you can imagine based on the previous example, we have a domain specific language, something similar to HTML. It's not the same, but very close to HTML. The style and the layout based on CSS, as I mentioned, not only CSS, but we also have the possibility to preprocess using some advanced variables and some specific functions using less and SaaS preprocessors, and also some possibilities to implement APIs and services based on the underlying device. Services and apps with user interface components, basic ones and also some others we can include by ourselves and reusing by ourselves and controlling the app lifecycle and the lifecycle of all pages of our quick apps. In the center we can see two main blocks, which is the most important ones in the Quickap platform, which is the JavaScript engine, currently implemented on a v eight engine. So a JavaScript engine, very powerful and separately a render engine. So you can see two different engines that can help us to provide more performance to the quick app at the end using the system we have in green. Behind the two engines we have the JavaScript bridge, which is the link between the platform itself and the underlying operating system, and all the specific APIs, native APIs of the system, the operating system and tied to the device, the runtime platform. Based on the previous example of the architecture, we see that the two main engines, the JavaScript engine and the rendering engine, are running in separate threads. So this is why we can have better performance than some of the, let's say the other types of applications. So the JavaScript engine is running all the logic, the pages and the components of this script part, and the rendering engine refers. It's rendering the pages and the components using the templates. This information about how to model, structure and offer the information to the user also creating or based on the style sheets we defined in the previous example for instance. And these two engines are communicating one with the events produced by the user. And the JavaScript engine is sending back the data to populate, to populate and to refresh the information in the pages shown to the user. And in the bottom you can see also the JavaScript bridge, which is the bridge that should be created on top of the operating system that links the platform with the device. You can create your user interfaces very quickly and very intuitively with these prebuilt components, some of them pretty similar to the existing ones in HTML. As you can see the a for links or span or tips, but some other more advanced like rating for instance if you want to include starbase ratings for reviews on your products, for instance, and also some other possibilities like adding tabs with just an element, or if you want to add the element of pull down and refresh like in the native applications if you want to refresh your page. These are the prebuilt components. You can create your own components, custom components, and you can export them, import them and reduce them in a flexible way. Also, you can use the existing ones in the open source repositories that are available already. If you want to enrich the experience of the end user, you can make the most of the device. They are using these services and APIs that are very advanced and can make the most of this experience. You can access to specific information about the device. You can query information about the application, about other applications in the system. You can have direct and intuitive access to databases, local databases. You can share information with other applications. You have the possibility to use the native device to share content with other applications installed in the device. You can make the most of the features of the device, accessing to the contacts, the calendar. You can set alarms on the device, controlling the volume, assessing information relevant for the operation of the quick app. That could be, for instance, the level of the battery or the type of the connection you have in every moment if you are connected through WiFi or on these kind of things, and also the vendors, the quickup vendors, the specific platforms might implement specific services for the capabilities to make the most of the capabilities of their platforms or their devices, and also their cloud based services. So there is a full range of services and APIs we can use to make the most of the experience delivered through quick apps. So far, quick apps is only supported by Android devices, but there are billions of Android devices out there, so this is a good start. Our objective is expanding this quick app platform to other platforms, to any device with the target of having a universal platform to run these quick apps or mini apps. Also following the standards in WC, aligning with the existing standards, and the objective of having this universality and interoperability between platforms, we know that we need more documents, more code, more examples and more engagement from the community. So this is why we have started the Quick Apps initiative. We recently launched this interest group. This is an open source community group hosted by the open source consortium called ow two, which is vendor neutral. Anyone is invited to join can contribute with us. You can be a company, an individual, a developer, and you can join our task forces in a collaborative effort to create more documents, more examples, also to create joint marketing opportunities and any possible collaboration you might imagine. So just scan the QR code, subscribe the mailing list and join the initiative. As I mentioned, it's vendor neutral, open, transparent, and you are invited to join. So thank you very much for having with me. I hope you like Quick apps the mini apps and this light app ecosystem, and hopefully we can meet in this interest group in this quick app initiative, and you will be more than welcome. Thank you.
...

Martin Alvarez-Espinar

Web Standards Manager @ Huawei Technologies

Martin Alvarez-Espinar's LinkedIn account Martin Alvarez-Espinar's twitter account



Awesome tech events for

Priority access to all content

Video hallway track

Community chat

Exclusive promotions and giveaways