SuperApp:SuperApp Business Application Platform

This document introduces what the SuperApp Business Application Platform

is, as well as the advantages of the SuperApp Business Application Platform

and the selection of MiniApp development frameworks.

What is a SuperApp?

A superapp is an application that serves as both the platform and ecosystem for miniapps. It provides a set of core capabilities that are delivered directly to end users, such as customers, partners and employees, allowing third-party developers to create and publish miniapps on the platform. Users of the superapp can select and activate miniapps that they want to use, and enjoy consistent user experience across a variety of personalized miniapps.

Alibaba SuperApp Business Application Platform

Alibaba SuperApp Business Application Platform is a full-stack tool platform for building superApps and releated ecosystems. It provides complete platform capabilities including MiniApp containers, IDE plugins, and application open platforms to help you build a rich application ecosystem..

Architecture

The following figure illustrates the architecture of Alibaba SuperApp Business Application Platform.

The architecture contains three modules.

Why Alibaba SuperApp Business Application Platform?

• Centralized APP Management

  Turn your various apps into miniapps and server your customers with single one Superapp.

• Improve User Growth

  Superapp platform can provide more rich business scenarios and services for users to improve user activity and stickiness of the Superapp.

• Unified Technical Specification

  R&D team, ISVs and partners can base on the same platform and technical specification to develop miniapps.

• Leverage Ecosystem Partners

  Superapp platform owner can onboard third-party partner's business scenarios into Superapp with miniapps.

Miniapp development framework

• What is a miniapp?

  Miniapps deliver rich functions and excellent user experiences. They are highly convenient.

  Miniapps run on mobile superapps that host miniapp containers. Miniapps and H5 applications are highly similar in that they are both programmed in Javascript and that they both deliver benefits like cross-platform support, low development cost, and fast iteration. However, miniapps can utilize hardware capabilities to provide more functions than H5 applications, such as obtaining network status, caching data, and using sensors, thereby delivering user experiences on par with those of native apps.

  Benefits of miniapps:

  • Cross-platform support: A miniapp can be run on both Android and iOS without the need to separately maintain code.

  • Low cost: A developer can easily switch from H5 applications to miniapps due to their similarities in development.

  • Fast iteration: Similar to H5 applications, miniapps can be published and updated in real time.

  • Near-native experience: Miniapps can obtain system permissions and utilize hardware capabilities, delivering user experiences on par with those of native apps.

• Miniapp frameworks supported by Alibaba Superapp Solution

  • uni-app

    uni-app is a framework that allows you to develop front end applications by using Vue.js. The same set of code can be published as a miniapp on superapps (like Alipay, DingTalk, Taobao, and WeChat), as native iOS and Android apps, or as a web application. uni-app has a community with millions of developers and applications. uni-app has been open-sourced on Github for everyone to use.

    For more information about uni-app, visit uni-app official website.

    Alibaba Superapp Solution provides uni-app miniapp containers that allow you to launch and manage miniapps built by using uni-app. uni-app miniapp containers have been integrated with EMAS Application Open Platform, helping enterprises and independent developers build their application ecosystems.

  • WindVane

    WinVane is an extensible solution for hybrid apps. It provides powerful, easy-to-use WebView containers for web applications in hybrid apps. WindVane adds a variety of features, such as URL filtering and events, for WebView objects. WindVane web applications can interact with the hosting hybrid app to utilize hardware functions. WindVane containers support miniapps and H5 applications.

    A WindVane miniapp is a web application that is integrated with windvane.js and that runs inside a WindVane container. Compared with an H5 application, a WindVane miniapp can obtain system permissions and utilize hardware functions.

    WindVane integrates this functionality through windvane.js that allows miniapps to interact with the native app by using JS APIs. WindVane has dozens of built-in JS APIs that enable access to device capabilities and supports custom JS APIs. This allows developers to create web applications that deliver richer features and better user experiences.

• Comparison

  Item	WindVane	uni-app
  Programming language	Javascript and Typescript	Javascript and Typescript
  Development framework	Unlimited	Vue.js
  Miniapp container	WindVane containers are standard WebView containers that can render both WindVane miniapps and standard web applications.	uni-app containers can render uni-app miniapps as well as components of a native app.
  Layout method	HTML (div) + CSS	Vue Single-File Components (SFC)
  Project structure	Common project structures of web applications	Contains configuration files specific to uni-app, such as pages.json and manifest.json
  Tag	Common HTML tags like div and img	Tags defined in uni-app, such as view and image
  Variety in the UI component library	High	High
  A wide variety of APIs	Yes	Yes
  High extensibility of APIs	High. Custom APIs are supported.	High. Custom APIs are supported.
  SDK sizes	Smaller	Larger
  Application type	WindVane miniapps	uni-app miniapps, web applications, and native apps
  Size of applications	KB~MB	MB

  Summary:

  • Learning curve

    WindVane has a smooth learning curve,

    because it is compatible with all web development frameworks, such as the common combination of HTML + CSS. Therefore, WindVane is a better solution for developers that are already familiar with a web development method.

    uni-app, on the other hand, is limited to the Vue.js framework. Developers that are familiar with other standards must learn Vue.js first and conforms to Vue Single-File Components (SFC).The project structure of an app contains configuration files that are specific to uni-app.

  • Application size

    If you want to develop lightweight apps with negligible storage footprints, WindVane is recommended.

    WindVane miniapps typically occupy a few KBs. Only in extreme cases, such as highly complex minapps, will the miniapp occupy a few MBs. uni-app miniapps typically occupy a few MBs, and take up system storage because they must be downloaded to the device.

  • Cross-platform support

    If you require a cross-platform solution, the uni-app framework is recommended.

    Both WindVane and uni-app supports cross-platform development, but only uni-app can implement this with a single set of code. The same set of code can be deployed as miniapps on various platforms, such as Alipay and WeChat, and as common web applications, and native apps.