Happy chameleon

Huanjuchameleon activity configuration platform, with low code + no cache update + visualization + patchwork editing as the development direction, rich flexibility is reflected in pictures, lists and other low interaction activity page. However, such problems as high flexibility, cost of use, component richness and scalability of business customization need further iteration and upgrading in the summary.

2020 Huanju Chameleon platform has carried out several iterations and upgrades in terms of functions such as improving the online efficiency of activities, timely change of activity content, interaction effect of activity pages, etc., but the optimization direction still remains in the expansion of low interactive functions. In the process of use or configuration, it failed to optimize the use cost and business component expansion. Therefore, it is a new direction to reduce the cost of users, improve the customization of business components, and build a visual platform for access components.

The data analysis

  • The total number of activities online: 1413
  • Cumulative PV: 1600W + times
  • Supported service lines: 10+
  • Average load time of the whole network: 1.5s



(Figure: Statistics of the loading speed of the whole network)

(Figure: page loading speed)

Function optimization

  • Cloud code (extended for rich interaction with App)
  • The life cycle
  • Interface function period
  • animation
  • shuffling
  • The progress bar
  • Article PK.
  • The rich text
  • Popup window
  • The countdown
  • formatting
  • The gradient background
  • Components automatically show and hide in time dimension
  • Component favorites and copies
  • The data reported
  • Header, bottom default text

Function iteration is basically seamless and version-free. The earliest design concept is JSON, simple component label + assembly to complete page rendering, and extended fields to identify the newly added extended functions. The extended fields are flexible in data processing and have enough expansibility in function iteration. But richer forms, lottery and other strong business coupling are not well handled.

Mock data structures:

{id: 'SerializedId', type: 'div', data: {}, // Extend: {analytics: {}, // API: {}, // event: {}, / / event handling / / other extensions}, style: {}, / / style handle children: [{...} /]}Copy the code

In technical implementation, recursive traversal of the above data, processing each field in higher-order components, especially for API field interface data processing, to consider the interface data source and multi-language data, but basically through the data field to reasonably process, so that can also achieve visual dynamic selection of interface data; Finally, find the corresponding component or createElement using Type and pass the result of the processed field to the component as Props.

How to combine dynamic interface data processing? The edit page provides a visual form configuration that allows you to fill in backend interface names, method names, parameters, Mock data returned, and more. When the page executes, the relevant interface is called with the defined interface lifecycle to get the data;

In terms of the extended functions, such as in the rotation, list, formatting data, cloud code and other functions, in fact, it is more for the analysis and improvement of the logic of the extended fields, packaging and processing after the display of components.

On the whole, the visual platform not only has enough flexibility through low code, but also allows users to change the location of a component in time and add interactive functions during configuration.

Case 1: In the list display, if the original display is the score, it can be replaced by other interface fields to be displayed through the operation area; Case 2: For existing content, you can also add pictures and text, and set interface fields accordingly;

Active page effect



Fiction – Click to see the effect



PK activity – click to see the results



List events – click to see the results



Graphic introduction – Click to see the effect



Animation – Click to see the effect

The problem

  • Allocative efficiency
  • One-click multi-theme switching
  • Visual description of component functions
  • Strong business component and business custom component extension capability

Looking forward to

Combined with THE EMP scheme, the 6.0 Jubilee Chameleon platform upgrade is promoted to integrate the independent components of each business as the platform goal, greatly reduce the use cost, improve the reuse degree of components, and achieve the sharing of each business component through integration. Basic or to solve the operation of children’s shoes in the configuration of the link of grief ~~~

  • Global Theme Design and Implementation (Modular Theme Design and Implementation)
  • Design and implementation of componentized integral data structure
  • Design and implementation of modular editing operation
  • Business side visual development scheme and implementation, components for business sinking
  • Preview the visual implementation of the component
  • Using document component visualization technology solution and implementation

EMP micro – front-end combat chameleon



This is our open source repositoryefoxTeam/empWelcome your attention. In addition, our Nuggets team account is Efox.