Create a lightweight framework for hand-made minimalist bags

Author: Zhou Song (Beiao)

Nowadays, app redundancy and package size have always been lingering optimization items for many businesses. Many minimalist bags in the industry have sprung up like mushrooms after a rain. Or, many businesses are also actively trying to explore minimalist packages.

The value brought by the minimalist package is not only the qualitative change in the size of the package, but also the positive effect brought by the user's download conversion rate and delivery. The development of the offline sinking market is of great value and has a great impact on the conversion rate of new pulls. .

There are generally two options for minimalist packages:

1. As a shell App, it has a layer of H5. The main link is used by the front end to open up the transaction process, and then guide users to upgrade through the update plan;

2. As a shell App, it has a layer of H5. The main link is from the front end to open up the transaction process, and then dynamically update the native version of the app in the form of plug-ins.

No matter which of the above methods is adopted, as the carrier of H5, only using the native web to open the page experience is still not very good. At the same time, it will also be accompanied by various H5 adaptations and optimizations. For the relatively large business of H5, such as Taobao, the front-end adaptation of many pages requires a huge workload, and the input-output ratio is not high.

Therefore, Shoutao Minimalist Bag provides a third solution:

3. The home page is implemented by multiple TABs, which can be native or H5, and the business can choose by itself, and the details page is loaded through H5. The later upgrade link is the traditional Apk update or plug-in, which is selected by the business party itself.

As a result, the Hand Tao minimalist package project separates a framework that can quickly build a minimalist App. It can be used as a basic scaffolding to quickly build a minimalist version of the app for your own business.

MTAS

Mini TaoBao Application Scaffold

MTAS is a minimalist version of the application scaffolding, which is an App framework based on the rapid construction of minimalist package projects.

Today, the minimalist version of mobile phone Taobao adopts the basic framework of this minimalist package, and the package size is 4M+.

Infrastructure Mind Map

The minimalist basic framework is mainly divided into several parts in structure:

Minimalist Basic Service

Minimalist basic library -- the basic dependencies of the main integration group, such as: network, container, login, etc. They are all trimmed or refactored versions. Compared with the original version, there are many redundant and complex functions. The basic version of the simplified version relies on light and simple functions. As long as the basic functions are needed, there is no additional burden on the package size.

Unified API layer--In order to quickly build a lightweight app, the basic function encapsulation cannot be less. In this module, the commonly used functions are implemented uniformly. If the business is accessed, there is no need to repeat the wheel. Just a simple call.

Minimalist Peripheral Container

The minimalist peripheral container uses the mini-web container sdk as the carrier, and the peripheral implements the relevant unified interception and navigation of the minimalist version. Supports functions such as login, back, jump, pull-up of external links, and downgrade. Enable the multi-webview scheme to replace the native webview's cache forward and backward strategies to make the page transition smoother. It is faster to enter the front and rear levels, and the interaction is better. The built-in cache cold start and first start can reach the level of seconds to improve the user experience.

Minimalist upgrade link

It can support plug-in download, installation and switching at the same time. It can also support traditional application apk download, installation, and upgrade. Through streaming calls to control download-related operations, the caller can customize the download stream to do what he wants, such as some pre-stream checks, post-stream processing, switch control, and so on.

Minimalist business components

Building a simple home page with basic view components, common pull-down refresh, pull-up loading components, cropped recyclerView and other components can support building a simple home page.

detailed design

The basic framework of the minimalist package is bottom-up, from basic dependencies to upper-level services, decoupling and separating layer by layer.

Businesses can call basic functions or extend functions by themselves. more flexible.

The minimalist package defines a set of lightweight solutions, and the core solves the following three types of problems:

• Package size: Reduce the package size to 4M+ through lightweight basic services and Native + H5 business forms;
• Upgrade and transformation: The plug-in base realizes the silent update, the plug-in silent update + the bottom APK update + the application market automatic update, and the overall upgrade rate is improved;

• In-device experience:

  • Native core page, H5 pre-rendering, H5 details speed version improve core link loading experience
  • Login, under the premise of ensuring the size of the package, it supports Alipay login, mobile phone number one-click login & verification code login, and strong home page guidance.

minimalist architecture design

Minimalist basic service

Minimalist basic library

The main integration group is based on dependencies. They are all trimmed or refactored versions. Compared with the original version, there are many redundant and complex functions. The basic version of the simplified version relies on light and simple functions. As long as the basic functions are needed, there is no additional burden on the package size.

The following introduces several main clipping base libraries:

web container sdk cropping comparison

The mini-web container sdk is an extensible Hybrid application solution that provides a powerful and easy-to-use WebView container for web pages in the client. Lightweight and easy to use, currently only 500kb, does not depend on the UC kernel, so it is small and simple.

image library sdk cropping comparison

mini-picture library sdk, simplified wireless picture library sdk is a one-stop solution for Alibaba's Android terminal that integrates image loading, display, processing, and monitoring. Covering the core features of mainstream image libraries in the industry, and combining with the Group's CDN image processing rules according to local conditions, it aims to more effectively save traffic, better memory usage, more extreme performance optimization, and smoother loading experience. Simplify thread scheduling framework, reduce image format support, lightweight image downgrade scheme, retain basic functions, merge modules, optimize code, and shrink some responsible functions.

gateway sdk cropping comparison chart

mini-gateway sdk, a simplified API gateway platform, provides unified, fast and reliable API access and monitoring report services for clients, H5 and servers. The ability to retain the security framework to ensure the integrity of the mobile platform application, the credibility of the application execution environment, and the confidentiality of data. Native networking library reduces packet size. Provide plugin for front-end invocation.

mini-data collection sdk, a set of client-oriented data collection SDK with the most apps in the group, has the characteristics of high data security level, high data arrival rate and small transmission traffic. Optimize the code for tailoring and remove the underlying sdk dependencies of the network.

The mini-login sdk, unified login SDK creates a consistent account experience for the Tao Department APP, and is deeply integrated with security to provide a consistent security level.

Code cutting, highlighting one-click login and sso login to improve login efficiency. Signs that reduce link length.

Minimalist package dependency size comparison chart

After the basic dependencies of the minimalist package are cut, the positive benefits are very obvious, which effectively reduces the package size and removes unnecessary dependencies and functions. Make the application lightweight and concise. Negative effects can also be expected, with reduced functional diversity and fewer options available.

Unified API layer

A unified basic implementation has been made in the minimalist package basic framework. Integrate commonly used tool classes and encapsulate the use of functions.

basic implementation package class display

The division of each package makes responsibilities clear. The user can directly use the various methods in it. You can also customize the functions you need, or implement the interface to extend the desired capabilities.

Minimalist Peripheral Container

The container periphery undertakes the basic functions of the business, ensuring the normal H5 process and security-related support. At the same time, you can also customize and implement your own extensions of the business side.

Intercept Navigation

The route interception navigation is mainly divided into two parts: Replacer and Interceptor (Filter). The interceptor is mainly responsible for intercepting and doing some security verification and processing; the replacer is mainly responsible for the common functions of the business, the functions of convenient debugging and testing, and so on.

Multi-WebView scheme

In order to improve the user experience, the minimalist package adopts a multi-WebView solution, which optimizes the forward and backward of h5 pages, that is, when forwarding, a new WebView is opened to load the page, and when returning, the WebView can be immediately hidden to achieve a second return.

Multiple WebView Design

Minimalist upgrade link

The download link in the minimalist framework can be selected according to the strategy mode. According to the allocation and setting of preconditions, the business layer leads how to implement the strategy. At present, the upgrade link has built-in Apk update and plug-in update, and users can also customize the pipeline to package it into another strategy to achieve the update.

The release of plug-in packages or mainline Apk packages can be decoupled from the minimalist package, mutual releases are not affected, and they do not block each other. They can be tested in advance and deployed online in advance.

upgrade link

application upgrade

The architecture of the minimalist download and update process is mainly promoted in stages through streaming calls. The flow of application upgrade is as follows:

application upgrade pipeline

This entire pipeline can also be defined by itself.

plugin upgrade

In the plug-in download and update architecture, after the online plug-in is compiled, the terminal switches to the main package by downloading, installing, and loading.

It also covers safe mode. If the plugin package is abnormal, you can roll back to the original minimalist package through safe mode.

plug-in upgrade pipeline & link

Safe Mode

Different from the traditional Apk upgrade, the plug-in upgrade method is more flexible, convenient and configurable. However, plug-in may also encounter some model and new system compatibility and stability challenges. At this time, the minimalist basic framework has a security mode as a strong guarantee. When encountering some unpredictable scenarios and repeated errors, this backing can be used as a back-up to restore or restore the normal operation of the application in the case of an error state. use state.

Safe mode provides basic security verification. Before loading a plug-in, check whether the plug-in is legal, safe, whether the file is damaged, etc., and make a judgment first. You can also dynamically control whether plugins need to be loaded through policy configuration. In the security system, the core is the rollback mechanism. After the plug-in is loaded, it is running, there are some cases of crashes that affect the user's use, and major errors such as continuous crashes seriously affect the user's use. At this time, the rollback mechanism It will be judged that there is a problem, and it will be rolled back to the minimalist package without loading the plug-in content to ensure the user's use and experience.

The plug-in upgrade guides users to upgrade through the silent update service in the case of wifi, and quickly switches to upgrade to full services.

The plug-in upgrade has high business value for the upgrade of the minimal package to the main package, the improvement of the upgrade rate, the reduction of various orders, and the reduction of login costs.

thinking and future

The minimalist package has a huge experience advantage in quickly acquiring new users, the installation speed is extremely fast, and the basic link is guaranteed, allowing users to experience the functions of the APP. In terms of architecture, the entire package can be configured and updated, and the rhythm of version iteration coverage is controllable. Various new packages, test packages, and A/B experimental packages can be quickly deployed through plug-ins to meet various needs.

In the long run, technically, plug-in dynamic compilation technology can be used, business and performance can be automatically inserted and buried through hooks, code blocks or business blocks can be downloaded and loaded according to priorities, and so on.

Follow [Alibaba Mobile Technology] WeChat public account, 3 mobile technology practice & dry goods every week for you to think about!