preface

Taobao, tmall has been committed to solving the page dynamic problem
It was released in April 2017v1.0Solution:TangramModel and its correspondingAndroidlibraryvlayout, the solution in mobile Taobao, TmallAndroidWidely used in the version

If you are not familiar with the Tangram model and vlayout, see this article

Android Tangram model: Even Taobao, Tmall are using the UI framework model you must understand

Android open source library V-layout: A UI framework used by Taobao, Tmall, and so on.

In December of the same year, the ali team made a major update: Tangram2.0 version was released, which mainly supplemented the Android library VirtualView, and was also widely used in taobao and tmall clients
Today, I’m going to take you through Tangram 2.0’s newest addition: Virtualview

Virtualview Github address

1. Why add VirtualView to Tangram model

Why update Tangram2.0

conclusion

Improve component dynamics and realize dynamic update
Improved component rendering performance

A detailed description

The hosting solution for the above solution is VirtualView

VirtualView Github address

2. VirtualView is introduced

Introduction to the
The characteristics of

3. Implementation principles

3.1 Core Ideas

According to the problem in Tangram V1.0: UI components cannot be dynamically updated and the loading performance is low, the specific solution of VirtualView is as follows

3.2 Implementation Scheme

According to its principle,VirtualViewThe implementation scheme is:Virtualization development
The nature of virtualization development:

It is called virtualization because there is no one – to – one entity View corresponding to a Canvas – drawn View

3.3 summarize

The innovation of VirtualView is:

throughXMLTemplates make components dynamic
throughVirtualization technologyNature (=Canvas) to improve the rendering performance of components

4. Workflow

In understanding theVirtualViewThe essential principles & overall architecture behind
Now, I’m going to get startedVirtualViewWorkflow of

4.1 Process Overview

According to the above plan,VirtualViewThe workflow is divided into three parts: creating UI components, creating interface templates, and loading the client interface
Specific as follows

4.2 Detailed analysis of process

Below I will analyze the principle & process of each process in detail

Process 1: Create UI components

This section describes how to create the required parameters based on service requirementsUIcomponent

There are two ways to create this: using built-in (encapsulated) UI components/customizations

1.1 Use built-in (packaged)`UI`component

That is, the package can be used directlyUIComponent without having to create it itself
The details are as follows (including basic properties of components)

Note: a. Custom components should inherit from base components. B. The principle of system encapsulation of UI components is the same as “Custom UI components”, which will be explained in detail below

If the framework’s built-in UI components are not sufficient, developers can customize UI components

Custom processVirtualViewAbstract & encapsulatedCanvasThe process of drawing a view, so that the developer only according to the specified interface protocol to implement 1 component drawing logic: measure, draw & draw, that can be implemented in the host container throughCanvasDraw directlyUIContent to create virtualized components

This is the process of creating a component in virtualization

The specific process

The implementation of the base components follows an interface specification that defines the three processes required in the rendering process: the measurement phase, the layout phase, and the draw phase

A. The three stages are defined to conform to the use of Android system, namely, the three processes of View drawing: measure process, layout process and draw process. If you don’t understand, See article (2) the custom View Measure process – is the most accessible custom View principle series (3) the custom View Layout process – is the most accessible custom View principle series (4) the custom View the Draw process – is the most accessible custom View principle series b. On the iOS platform, the solution should also be handled in accordance with the specifications of this solution

The three processes are as follows :(andAndroid ViewThe three processes of drawing are similar)

The above model & process definition is adopted for both virtual and native components a. For virtual components: implement the relevant logic in these interfaces/by encapsulating native components to implement b. For native components: The logical conclusion of calling native components in the implementation of these interfaces is that virtual controls and physical controls can be mixed

At this point, for the host layout container, the components wrapped inside are not virtualized/native, and the exposed interface is the same, as long as the host container is added to the View interface like a normal View, it can be displayed in the subsequent rendering process.

Special attention can be explained hereWhy high rendering performance: The more virtual components are used,ViewThe smaller the number, the flatter the hierarchy

Components as shown below: a. Common native development: 2 layers (host container layer + Image component layer) b. Virtualization development: With virtualization development, the final View layer is only a host container (in fact, the image components are drawn on the Canvas).

1.3 summarize

There are two ways to create UI components:

Directly use the built-in frameworkUIcomponent
Custom components: encapsulatedCanvasProcess, according to the specified interface protocol to draw logic/encapsulate native components

Process 2: Creating an INTERFACE template and delivering it

This step consists of several steps: CreateXMLThe interface template is compiled into binary data and delivered
Specific as follows

2.1 Creating an XML Interface Template

This section describes how to use XML to write templates based on business requirements

Note: You need to use the special tool virtualview_tools to write, see the article Virtualview_Tools usage Guide

The method is similar:AndroidPlatform passXMLThe way you build the interface
The differences are:
1. Without platform constraints, a set of templates can be used at the same timeAndroid,iOSFor use on
2. Dynamic loading at run timeXMLTemplate data, dynamically update the interface structure

// Obtain dynamic data from JSON data by expression <? xml version="1.0" encoding="utf-8"? > <VHLayout flag="flag_exposure|flag_clickable"
        orientation="H"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <NImage
            id="1"
            src="${logoUrl}"
            layoutMarginLeft="8"
            layoutMarginRight="8"
            layoutMarginTop="8"
            layoutMarginBottom="8"
            layoutWidth="32"
            layoutHeight="32"/>
    <NText
            id="2"
            text="${title}"
            layoutGravity="v_center"
            gravity="${style.text-align}"
            textSize="${style.font-size}"
            textColor="${style.color}"
            layoutWidth="match_parent"
            layoutHeight="wrap_content"/> </VHLayout> // JSON data {"style": {
    "text-align": "h_center"."font-size": "20"."color": "#FF5000"
  },
  "title": "Super high 99.9% of users find it fast."."logoUrl": "https://gw.alicdn.com/tfs/TB1yGIdkb_I8KJjy1XaXXbsxpXa-72-72.png"
}


Copy the code

2.2 Compile to binary data

2.2.1 Description

Use the virtualview_tools tool to compile the written XML interface template into binary data. The compiled file has a.out suffix

See the VirtualView_Tools Usage Guide for instructions

Note: Why is a business component written in XML not run and used directly in the client instead of a binary serialization operation first?

2.2.2 Description of binary files

Using for reference the idea of compiling template files in Android system, the format & description is as follows

2.2.2 Compilation process

One business component corresponds to oneXMLTemplates = compiled separately to binary data

The compiled data contains all the string and expression resources it depends on except the built-in string resources

When compiling, resources in the template, including color values, various enumerations, and types of underlying components, are serialized to integers. Resources such as strings that cannot be serialized to integers are assigned an indexIdPoint to it & store them in a separate area

Cause: When the template is published online and the string is changed, the original string resource index is not affected. Otherwise, if the resource index is allocated according to the protocol with order convention, the same index value can easily point to different resource contents before and after the template change, which affects the stability and dynamics

The rules for serialization are as follows:

The compilation process

2.3 Delivering Template Data to the Client

That is, the client obtains the compiled binary data

There are two paths to obtain:

The compiled template is packaged directly into the client, and the developer loads it in code
The framework is first published to the template management background, and the client updates the template data online (that is, dynamic update is implemented).

Process 3: Client loading interface

The client obtains the compiled interface template, loads and parses it, and finally renders the view interface
The following figure shows the process

3.1 Parsing Template Data

Description The client parses the compiled template data (binary data) immediately after obtaining it

Such as verifying version number, legitimacy, read header information, etc

The client-side rendering component starts by parsing the compiled template data

Process parsing Parsing = reverse process of binary compilation

However, the parsing process is only responsible for extracting the original data & organizing the format, not building the component objects

3.2 Loading the Component View

When the user passes in a template name, the framework internally finds the template data that matches the name from the data previously parsed in the XML interface template, and then loads and creates the real component
Process analytical

3.3 Binding Service Data

The developer can specify which data field to use through an expression in the component properties, that is, to bind business data to the component

Because service data is dynamic, components created from templates do not contain service data

Process analytical In the process of creating components, when met expression analytic properties, the value of this attribute will be key, expression, its components and so on the basis of the relationship between storage, such as the definition of real data to reach before by the expression to access data & real value is set to the component properties, the real data to bind to based on the properties of components

Attribute values obtained through expression parsing and access are cached, and the cached value is retrieved each time the original data reference remains unchanged

The data received here isJSONformat

4.3 summarize

5. Overall architecture design

According to the above scheme & workflow,VirtualViewThe overall framework is divided into two parts: core function module (5 modules) + supporting tools & services. The details are as follows:

Below, I’ll break down each section in detail

Module 1: loads a module

Schematic diagram
instructions

Module 2: Building module

Schematic diagram
instructions

The underlying component model & virtual components are analyzed in detail here

A. Basic component model

Includes base components & base attributes as follows

Note: Custom base components should inherit base definitions & extensions

Module 3: auxiliary module

Schematic diagram
instructions
Special note: The reason for introducing user data-bound expressions is that when developing business components, the underlying properties/styles cannot be written directly in the template, but need to be retrieved dynamically from the data

/** * Access the data attributes of the expression * syntax description * a.${$}End * b. For Map, enter. Operator * c. For Array/List, use the [] operator to access * as shown in the following example: */${benefitImgUrl};${data[0].benefitImgUrl}; /** * Conditional expressions are used to set a value based on a field in the data. It starts with @{and ends with}. * b. The middle part = Specific content of the expression: Conditional expression? Result expression [1] : Result expression [2] * Note: 1. Use result expression [1] when the condition expression is true, otherwise use result expression [2] * 2. Conditional expressions support Boolean, string, JSONObject, JSONArray * c. For an Array/List, use the [] operator to access * as shown in the following example */ @{${logoUrl} ? visible : invisible };

Copy the code

Module 4: management module

Schematic diagram
instructions

Module 5: Update module

Schematic diagram
instructions

Required tools and services

Schematic diagram
instructions

conclusion

6. Use tutorials

Based on the above workflow, its usage process is also divided into three steps: CreateUIComponent, create interface template & client loading interface
Next, I’ll break down these three steps in detail

6.1 Creating UI Components

As you can see from this article, there are two ways to create UI components:

Directly use the built-in frameworkUIcomponent
Custom components: encapsulatedCanvasProcess, according to the specified interface protocol to draw logic/encapsulate native components

For convenience, use the built-in UI components of the framework

6.2 Creating a Page Template

This step includes creating an XML interface template, compiling it into binary data, and delivering the template

6.2.1 Creating an XML Interface Template

Templates are written using XML based on business requirements

Note: You need to use the special tool virtualview_tools to write, see the article Virtualview_Tools usage Guide

The sample layout

/** * Use instructions: * 1. Control reference: use XML to reference the control for easy explanation, the XML reference VHLayout, NImage, NText are built-in controls: 2 horizontal linear layout; Each layout = 1 Figure + 1 text * 2. Property Settings: writable/bind a data field (JSON) by expression references * Layout description: * 1. The referenced controls VHLayout, NImage, NText, and so on are all built-in controls * 2. Overall layout = 2 horizontal linear layouts, each layout = 1 figure + 1 text */ <? xml version="1.0" encoding="utf-8"? > <VHLayout flag="flag_exposure|flag_clickable"
        orientation="V"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <VHLayout
            flag="flag_exposure|flag_clickable"
            orientation="H"
            layoutWidth="match_parent"
            layoutHeight="wrap_content">
        <NImage
                id="1"
                src="${logoUrl}"
                layoutMarginLeft="8"
                layoutMarginRight="8"
                layoutMarginTop="8"
                layoutMarginBottom="8"
                layoutWidth="32"
                layoutHeight="32"/>
        <NText
                id="2"
                text="${title}"
                layoutGravity="v_center"
                gravity="${style.text-align}"
                textSize="${style.font-size}"
                textColor="${style.color}"
                layoutWidth="match_parent"
                layoutHeight="wrap_content"/>
    </VHLayout>
    <VHLayout
            flag="flag_exposure|flag_clickable"
            orientation="H"
            layoutWidth="match_parent"
            layoutHeight="wrap_content">
        <VImage
                id="1"
                src="${logoUrl}"
                layoutMarginLeft="8"
                layoutMarginRight="8"
                layoutMarginTop="8"
                layoutMarginBottom="8"
                layoutWidth="32"
                layoutHeight="32"/>
        <VText
                id="2"
                text="${title}"
                layoutGravity="v_center"
                gravity="${style.text-align}"
                textSize="${style.font-size}"
                textColor="${style.color}"
                layoutWidth="match_parent"
                layoutHeight="wrap_content"/>
    </VHLayout>
</VHLayout>


Copy the code

Attribute data source:JSON

{
  "style": {
    "text-align": "h_center"."font-size": "20"."color": "#FF5000"
  },
  "title": "Super high 99.9% of users find it fast."."logoUrl": "https://gw.alicdn.com/tfs/TB1yGIdkb_I8KJjy1XaXXbsxpXa-72-72.png"
}

Copy the code

6.2.2 Compiling to binary data

Use the virtualview_tools tool to compile the written XML interface template into binary data. The compiled file has a.out suffix

See the VirtualView_Tools Usage Guide for instructions

6.2.3 Delivering a Template to a Client

There are two paths:

The compiled template is packaged directly into the client, and the developer loads it in code
The framework is first published to the template management background, and the client updates the template data online (that is, dynamic update is implemented).

Select mode 1

6.3 Parsing and Loading interface Templates on the Client

The specific use is as follows:

/ / 1. Initialization image loader VafContext. LoadImageLoader (mContext. GetApplicationContext ()); / / 2. The object initialization ViewManager ViewManager ViewManager. = vafContext getViewManager (); viewManager.init(mContext.getApplicationContext()); // 3. Load the compiled template data (binary file) // Method 1: directly load the binary byte array (recommended) viewManager.loadbinBufferSync(TMALLCOMPONENT1.BIN);
     viewManager.loadBinBufferSync(TMALLCOMPONENT2.BIN); // Mode 2: load viewManager.loadb through the binary file pathinFileSync(TMALLCOMPONENT1_PATH);
     viewManager.loadBinFileSync(TMALLCOMPONENT2_PATH); / / 4. Register event handlers, such as dealing with vafContext. Click, exposure getEventManager (). The register (EventManager TYPE_Click, newIEventProcessor() {

        @Override
        public boolean process(EventData data) {
            //handle here
            return true; }}); vafContext.getEventManager().register(EventManager.TYPE_Exposure, newIEventProcessor() {

        @Override
        public boolean process(EventData data) {
            //handle here
            return true; }}); Using the component name parameter name / / 5. Generated component instance View container = vafContext. GetContainerService () getContainer (name,true); mLinearLayout.addView(container); // if you write the expression IContainer IContainer = (IContainer)container; // If you write the expression IContainer IContainer = (IContainer)container; JSONObject json = getJSONDataFromAsset(data);if(json ! = null) { iContainer.getVirtualView().setVData(json); }Copy the code

The test results

The following figure shows the VirtualView display, “Super high 99.9% of users find it fast”

This concludes the use of VirtualView

See the VirtualView documentation in this article for more details

7. VirtualView meaning

For my personal opinion, VirtualView’s complement is significant in two aspects: for Ali Tangram model & the entire native development technology (Android, iOS)

7.1 Tangram Model

The problem with VirtualView is:

Implementing component dynamics: binding that can be delivered dynamically on the endXMLInterface templates & data
Improved component rendering performance: PassedVirtualization technologyNature (=Canvas) Development components

7.2 For the entire Native Development technology (Android, iOS)

The innovation of VirtualView is that it solves the problem that native development has been criticized for being replaced by front-end and RN technologies:

Long development cycle & large cost VirtualView uses XML description view, XML interface template has the feature of cross-platform use
Unable to hot update VirtualView can bind dynamically delivered XML interface templates & data on the end to realize hot update

Compared with the rapid product development in previous years, the development of the Internet industry has been delayed and user needs have been basically met, so more emphasis is placed on user experience
Therefore, in fact, compared with the front-end and client implementation of RN technology, The advantages of VirtualView may be more obvious: on the premise of solving the slow efficiency and long cycle of native development, it ensures the advantages of native development: good performance

7.3 calls for

althoughVirtualViewIt’s driven native development, but for now,VirtualViewThere are still many problems
Hope everyone can work together on Github – Alibaba-VirtualView to improve, and contribute to the cause of open source!

8. To summarize

After reading this article, you should be very familiar with Ali productsVirtualViewThe use & principle of
aboutTangramFor use, see the article:

Android Tangram model: Even Taobao, Tmall are using the UI framework model you must understand

Android open source library V-layout: A UI framework used by Taobao, Tmall, and so on.

I will continue my detailed analysis of other excellent open source libraries for Android. If you are interested, please follow Carson_Ho’s Android development notes

Please help! Because your encouragement is the biggest motivation for my writing!

Reference article: juejin.cn/post/684490… Tangram.pingguohe.net/docs/virtua…

Welcome to follow carson_ho’s official wechat account

Android Virtualview: Another dynamic and high-performance UI framework for Taobao and Tmall