Android Tangram Model: Hands-on UI Framework model for you to learn about Taobao and cat

Android Tangram Model: Hands-on UI Framework model for you to learn about Taobao and Cat Preface

Tangram is the Ali-produced, used for rapid implementation of the integrated layout of the framework model , in mobile phone day cat Android & iOS version of the extensive use
Electrical Business Map

Today I will make a full introduction to the Tangram model, I hope you will enjoy it. Directory

Directory

1. Why use the Tangram model

Before we explain the Tangram model, let's start with a question: Why use the Tangram model 1.1 background Technology is a solution to meet the demand business , the existing requirements business can be divided into three categories: basic business, regular business & temporary Task. Specific details are as follows:
Schematic 1 1.2 question

The corresponding solutions are characterized by the following:

Schematic 2

For the basic business, the use of Native, not too much explanation for the temporary business, with the WebView performance and mobile device hardware development, the current stage of HTML loading speed & rendering speed of the shortcomings will gradually be improved, the demand for temporary business can meet

But for the conventional business, has not yet covered the final plan , so there will be two options: Webview+html & dynative program. However, these two schemes are problematic: the webview+html solution: with the WebView performance and the development of mobile device hardware, the weakness of the HTML loading speed & rendering speed will gradually be perfected, so the performance of the general business needs is still difficult to meet. dynative (such as RN, Weex): Although performance can be satisfied, but because the technology is immature, poor stability, and development is difficult , so for the regular business or very cautious use. 1.3 Solutions

Tangram is the solution to the common business: a tradeoff between performance, stability & development cycles to achieve a better balance. 2. Define

It is a framework model for rapid implementation of combinatorial layout. The so-called conceptual model, that is, to stay in the qualitative analysis of the solution & ideas, has not really concrete implementation
Tangram's implementation is a Native (IOS & Android) Rapid implementation of the integrated layout of the interface development Framework, the following will be described in detail

Chinese is tangram, that is, the framework provides a series of basic unit layout, through rapid assembly can build a multiple layout of the page

Just like using Tangram to quickly piece together a variety of shapes through existing plates.
Diagram

3. The application scene in the general business complex layout format mix, such as: floating layout, grid layout, banner layout, a drag n layout, waterfall flow layout, you can also combine the layout of the specific scene is: such as the Electronic Business Platform home, activity channel, etc. > Tangram The model is now widely used in mobile phone day cat & Taobao Android version 4. Tangram Advantages

Diagram

4.1 High Performance

In terms of performance, hope to close to native development, focus: Page Rendering Efficiency & Component Recycling page rendering: In order to improve rendering efficiency, Tangram will perform a large amount of computing work in the VM before the view is rendered and cached in the tree-shaped structure of the VM. Recycling and multiplexing--tangram the Vlayout and Lazyscroll two basic components are developed on the Android and iOS platforms, with a dual indexed visible area component discovery algorithm that enables efficient recovery and reuse of components across parent nodes. 4.2 Business-oriented A. Component Orchestration

Encapsulates a component into a reusable unit that can assume a certain business capability, depending on the type of business.

such as a waterfall flow layout B. Dynamic

Provide the console so that the business side can directly control the products based on Tangram, such as adjusting the page layout, switching page data and so on. That is, the layout of the page can be distributed through the back-end data to dynamically adjust the service gateway construction goal is to minimize the business Create Tangram page pressure and cost.

But this dynamic is oriented to coarse-grained components: building the entire page in the form of layout + components , rather than building pages from Basic UI elements such as button BlaBla . In fact, it is also very well understood that business people need to be able to assume a certain business capacity of the "business layout", rather than a single UI element (button, text BlaBla) Benefits: Low cost, online cycle short 4.3 scalability good

Adoption of a plug-in extension

Internally registered inside the frame & external can also inject expansion module 4.4 Multi-terminal consistency

For business development, there is a problem of multi-performance inconsistency. In order to solve this problem, it is necessary to use complex gateway logic to compatible multiple-terminal logic inconsistency.

In order to prevent this problem, for Tangram, two development principles have been developed: Any new features are not differentiated platform, in the functional design must be considered at the same time multiple functions, the specific implementation of the scheme and logic must be more than one unified review to ensure the consistency of multiple performance. Changes at either end must be synchronized to the other side before the changes are made, and the changes must be synchronized. 5. Architecture & Principle Explanation

The Tangram architecture consists of three main parts:

1.  ' Tangram SDK '

Tangram AC Tangram OP

The specific details of each section are as follows:
Diagram

This article mainly explains the Tangram SDK for client page rendering. 5.1 Knowledge reserves

Before explaining the architecture, we need to understand some of Tangram's model knowledge first. A. Page conceptual model

A page entity consists of 3 parts: page, Card & Component (Item)

The following figure:
Page element Resolution

The relationship between: The component makes up the card, the card constitutes the page.

For Tangram, his page conceptual model can be represented by a tree-like model (3-tier structure):
Diagram

The following are mainly about the cards & components in the three-tier structure. B. Card

Role: Responsible for layout logic that combines & layout of components
Declare layout only, do not provide layout details

Composition
The card is made up of four parts: header, footer, body, style
Schematic 1
Schematic 2

For details on the four-part, I'll introduce it in the Tangram specific use C. Components

Definition: UI element of the smallest unit

Everyday use of ordinary view, such as buttons, pictures, etc.

Role: Responsible for UI element presentation & business logic

Constituent elements: View model (ViewModel) & Styles (style)

View model: All component pairs have a unified view model (ViewModel), primarily defining lifecycle events: When a component initializes calls Init () to slide the screen binding data, call bind () slide out of the screen to unbind, and invoke Unbind ()

The basic styles for components include the component background, the outer margin, the inner margin, the aspect ratio of the component, and so on. Specific details will be introduced in the specific use. 5.2 Tangram Structure

The structure of the Tangram consists of 5 parts, as shown below:

Diagram

5.3 Principle Analysis

When page data is passed in:

The core engine calls the data parser to convert the data into cards and component object parsing processes based on previously registered cards and component types
Undefined data will be discarded.

The data parser passes the parsed card and component object to the layout frame for page rendering. The layout framework is laid out according to the layout information provided by the card
The layout framework obtains the component instance from the component information provided by the component, and lays it into the layout container 6. Extension Module The content described above is the core function of Tangram but when the need to implement to specific business, only this core function is not satisfied, but also need a lot of auxiliary, extended functions Tangram is expanded in a plug-in format:
Schematic diagram 7. The specific use of the above explanation is only Tangram conceptual model Basic Framework & principle

When implemented, different implementations are implemented according to different platforms:

1.  for ' Android ': implementation based on ' Recyclerview ' + custom ' LayoutManager ' > see article: [Android Open Source Library V-layout: The UI framework that Taobao and cat are using, Hurry up and use it. ] (HTTPS://LINK.JUEJIN.IM?TARGET=HTTP%3A%2F%2FWWW.JIANSHU.COM%2FP%2F6B658C8802D1)

2.  For ' IOS ': implementation based on Custom ' Lazyscrollview '

8. SummaryThis article mainly explains Tangram's concept model about the concrete practice & implementation to the business use, see article: Android Open Source Library V-layout: Taobao, the cat is using the UI framework, hurriedly use it.