All Products
Search
Document Center

SuperApp:SuperApp Business Application Platform

Last Updated:Nov 07, 2024

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.

截屏2024-08-27 17.16.32.png

The architecture contains three modules.

Module

Description

Miniapp container

To upgrade a native app to a superapp, miniapps must be supported through miniapp containers. Alibaba Superapp Solution allows you to build miniapp containers by using the uni-app and WindVane frameworks.

Application Open Platform

A developer platform that supports full-lifecycle management for a superapp, including developer registration and registration, review, and distribution of miniapps.

MiniApp development IDE plugin

MiniApp development IDE plugin provides end-to-end development functions such as template-based MiniApp creation, development and debugging, preview testing, packaging and release.

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.