What framework should I choose for APP development? Please refer to here !, For more information about the app, see here.

What framework should I choose for APP development? Please refer to here !, For more information about the app, see here.

Background

Generally, App development must meet the requirements of Android and iOS systems. This means that an App needs to customize two implementation schemes, resulting in high development and maintenance costs. To solve this problem, the best way is to implement a set of code to run across terminals, so the Hybrid application mode of Hybrid App came into being. The entire development framework of Hybrid App has a variety of frameworks and various technical options. The current main technology is Web technology, which is simple and easier to implement the UI, the number of developers is also large. Currently, most apps on the market use the Web + Native hybrid technology.

With the development and popularization of the mobile Internet, more and more businesses have achieved the implementation of the mobile App version, and the scale of a single App is also growing. As a result, App development is no longer completed by three or two people, and more people are needed for development. The dependency management and communication costs faced by large-scale project development also occur during App development. If these two problems are not solved, project defects may increase, development efficiency may decrease, and project delays may also increase the difficulty of project maintenance.

To sum up, for medium and large App development projects, a development framework that supports both the hybrid development mode and solves dependency and communication problems is required to effectively guide and standardize development.

Core requirements

A good App development framework should be able to solve the problems of selection of Hybrid development frameworks and decoupling between modules in medium and large App development at the framework level, at the same time, it is necessary to provide a solution for dynamic module change and dynamic upgrade.

In addition to the App development framework, it should also include the following three parts:

Background Publishing Management Platform

It supports dynamic module changes and upgrades. The background release management platform is a backend management function that you want to provide, including data management and App interfaces.

Continuous integration solution

Provides supporting continuous integration solutions for automatic packaging during project development.

H5 module development specifications

Provides H5 module development specifications for implementing dynamic module functions.

How to solve the problem of "getting bigger"

Divide and conquer

Modular: divides business functions into multiple independent modules;

High Cohesion and low coupling between modules, non-interference, and parallel development

Centralized dependency management

Dependency is inevitable;

Unified planning and management of dependencies;

The dependencies between modules can be summarized:

• Jump between pages

• API call

Solution to the cross-platform Problem

Cordova (PhoneGap)

• The most mainstream open-source mobile cross-end framework in the industry

• HTML + CSS + JS + native plug-in

• Open native plug-in framework

• Powerful Community power

How to solve the "dynamic upgrade" Problem

After an App is released to the App market, it usually requires a long review cycle, especially for the Apple store. When an important function of an App encounters a Bug, a quick response solution is required, it must be slow to resend the version to the application market. In order to quickly respond to changes in business needs and handle urgent bugs, apps need to upgrade dynamically more and more frequently. Therefore, a dynamic upgrade solution is implemented mainly in modules.

From the perspective of dynamic module, the module is divided into three types: NA module, H5-offline module, H5-online module.

NA module pages need to be preset in the App, the page of the H5-offline module can be preset in the application, you can also download after the application installation, the page of the H5-online module is deployed on the server side.

The module dynamics mainly reflect the following aspects:

1. the icon and name of the module can be dynamically modified;

2, the three types of modules can switch between each other, for example: a module is NA implementation, after the release of existing major bugs, can switch to the H5-offine or H5-online implementation, without these two implementations, you can switch to an "coming soon" online page;

3. The H5-offline module supports version upgrade.

For the module dynamic upgrade, mainly refers to the H5-offline module, to do a full consideration of the security of the H5-offline module: the module of the offline packet encryption processing, you must also hash the files in the offline package to prevent tampering.

Technical Architecture

The App development framework should be based on modular design and integrate the business implemented by NA and H5 technologies. There are two main modules:

NA Module

It is mainly composed of NA pages, or H5 pages loaded by the NA container. The NA module can provide APIs externally;

H5 Module

It consists of H5 pages, which can be offline pages or online pages. The H5 module cannot provide APIs externally, but can call APIs provided by other NA modules;

To completely decouple modules, the code of the recommendation module should not only be logically independent, but also be physically separated by sub-engineering. Decoupling between modules through three bus mechanisms:

API Bus

Mainly provides two capabilities: module api registration and calling;

Page navigation Bus

The integration page design of NA and H5 is not distinguished. Opening and returning pages are centrally scheduled by the page navigation bus;

Module Bus

The module bus logically determines the concept of the module, and supports remote change and dynamic upgrade of the module;

Using the industry's most popular Cordova framework as the JS Bridge, Cordova has a large number of Community plug-ins available, and provides complete plug-in development specifications, making it easy to customize development plug-ins.

The development framework provides the cordova plug-in implementation for core capabilities such as API bus, page navigation bus, and module bus, allowing H5 pages to easily call these Apis, in addition, there is no difference between NA and H5 calls.

Development Framework release

App development framework Library:

Framework (android & ios)

Plugins (js)

App engineering Demo (android & ios)

Server:

Release management platform deployment packages, interface documents, deployment manuals, and other files

Product White Paper:

Detailed explanation of the use of the development framework

Development Framework Integration

• Use the Cordova command line to create a project;

• Import the development framework Library framework (android & ios) to the project );

• Create a configuration file uniformly agreed upon by the development framework for the main project and sub-project;

• Call the initialization method of the development framework when the App starts;

• After integration, you can use the API of the development framework normally in the project.

Development Framework configuration file

Before using the development framework, You need to register the api, page, and module to the bus corresponding to the development framework. Besides calling the corresponding registration, the development framework recommends using the registration method of configuration files, you only need to configure the data in the configuration file, and the development framework will automatically complete registration.

The naming convention for the configuration file of the development framework is: Development Framework name-sub-project name. xml, in which the main project is the development framework name-main. xml, the agreed location of the configuration file is:

Android is placed under the root directory of assets of the main project and sub-project;

IOS is placed in the bundle file of the main project and sub-project.

Example:

Development Framework module Bus

The module bus has two main functions:

Logically, the page and API are organized in the development framework configuration file based on modules to make the logic clearer;

In terms of functions, the module bus mainly implements the functions of the dynamic module and provides two core APIs:

ModuleBus provides atomic operation methods for modules;

ModuleHelper encapsulates the atomic methods provided by ModuleBus to achieve business concatenation. It is a helper class that quickly uses APIs.

Note: The module bus divides the status of the module into: Normal, uninstalled, new version (Force upgrade and unforced upgrade), downloaded, and module data tampered.

Development Framework page navigation Bus

Main functions:

Unified scheduling of the jump between the NA page and the H5 page by maintaining a page stack.

Core API:

Development Framework page API Bus

The main function of the API bus is to decouple method calls between modules. There are only two core APIs provided:

Register

After the module implements the API, it registers with the bus (generally called by the framework when parsing the configuration file );

Call

Call the API. The caller calls the API to be called through the API bus.

Example

After successful logon, the Account module saves the logon token. When other modules need to obtain the token, they must call the API provided by the Account module to obtain the token. The implementation steps are as follows:

1. The account module implements the GetTokenAPI and calls APIBus. register ("m_account", "getToken", and GetTokenAPI. class) to register to the API bus;

2. When module A needs to obtain the token, call APIBus. call ("m_account", "getToken", and "input parameter") to obtain the token. The returned value is the APIResult object (

Objects mainly include status codes and business strings ).

Development Framework Extension

Provides a module-level development framework:

• The NA module provides development frameworks such as MVC, MVP, and MVVM;

• The H5 module provides MVVM, SPA, and other development frameworks;

• Compatible with the H5 Module