Poseidon: The practice of front-end configuration of the companion Fish operation

preface

Poseidon is the general name of operation solution for accompanying fish activities, including activity rule system, H5 visual development platform, etc. The name comes from ancient Greek mythology. Poseidon is the manager of the ocean and all water systems, meaning to provide superpowers for the development of Palfish.

Current problem

Along with the rapid development of modern business with fish, a large number of activities that promote growth, the original development model exposed a series of problems, such as the back-end logic mix, low reuse degree, high maintenance costs, the front end of poor flexibility and low efficiency, in order to improve company’s operating efficiency, we need to explore a set of technical system conform to the state of your company, for the business of the company provide a platform to support high-speed development.

To solve the problems we face, we start from the whole r&d and operation link to find the answers. Research and development on the link in separation technology under the background of the before and after the end, our goal is to maximize the implementation of the back-end service reuse, reuse, the front page for operation is to be able to quickly and flexibly to show strategy, make changes, to examine the effects of all kinds of activities on business, based on the above thinking, we abstract the Poseidon platform business model.

An overview of the platform

The Poseidon Platform is divided into three main parts:

• Basic service rules: services such as message notification and user profiling.
• Rules of various business types: Rule services such as groupings, check-in, and tasks are integrated with basic rule services at the business level.
• H5 Visual management platform: Integrates business rule layer logic and outputs it to C users.

Why do you divide it like this? We combined with the current operation scenario for brief. The operation of the presentation of publicity to be divided into offline, online two ways, here we only talk about online. Every field operations need some common services, such as activities need to send a message (WeChat, SMS, stand inside letter, etc.), to increase the activity of exposure, to the users of different features we wanted to show a different distribution strategy, here are some user characteristics is no difference between lines of business, such as user basic information (sex, age, etc.); Some are strongly coupled with business lines, such as picture book members, children’s one-to-one purchase, etc., which are unified into portrait rules at the application layer, and finally analyzed by each business portrait rule engine to provide downstream consumption. Such basic capabilities are collectively referred to as basic service rules.

Outside the basic services also can have various kinds of activities, such as business task instructions of the commonly used (recording picture books, to share), signed in style, spelling a group play such game in the service layer can be highly curing, form the standard FaaS service (function as a service), also in order to friendly to operational use, we make a standard business rule templates, At the level of business rules, basic services are usually combined. For example, a group activity needs to send different rewards to new and old customers, and send notifications and reminders to users in the task to urge users to participate in the activity. In this way, the rules of each time can be decoupled and flexibly combined, so as to achieve the goal of high service reuse and efficiency improvement. The above two layers mainly solve the server side reuse.

How do we reuse the C end? The answer, of course, is the category of componentized capacity building and visualization capacity building. In view of the current main operation scenario is H5 activity, we will focus on the construction of H5 visualization platform. Above is the scene of the three modules split

H5 visual development part

Visual development has always been a hot topic of front-end development, almost all large companies have their own visual configuration platform, we have done sufficient research before the construction of the visual platform, the following platform comparison and summary of the way to introduce.

Compared to the industry

H5 visualization platform construction we also investigated a lot of industry a lot of relevant information, the following is a simple summary.

Summarizes the main points

By summarizing the industry, we need to find a solution that conforms to the current technology situation of the company. Here to describe the present situation of h5 active development, now the h5 the activities of each business line in their code warehouse, owing to the nature of the activity (short cycle and high frequency) caused the code warehouse swelling, and a lot of activities are after many iterations, the code handles, code logic is not clear, for a long time can cause a lot of redundant code, The result is higher maintenance costs and lower r&d efficiency.

The activity changes is more frequent, many of them are words description, background images, etc., these changes both tests, online after in every small changes need to submit code, release process, and every small changes need to be fully release quantity, (such as simultaneous multiple activities, Some code to be released has already been merged into master, and small changes need to be released immediately), creating some project risk.

To summarize the problem based on the above description:

• Large code warehouse, long-term code redundancy, high maintenance costs, resulting in code quality, research and development efficiency.
• The support for operation is not flexible, and small releases pose a safety hazard to the overall project.

Therefore, based on the latitude of quality, efficiency and safety, I divide the H5 visualization platform into three modules

• Component development scaffolding: We provide scaffolding for efficient and standardized group development and release
• Visual editor: Provides the ability to assemble components into pages.
• Management background: personnel, components, pages and other latitude permissions and versioning capabilities.

Component development

The module we want from the source code control the quality and efficiency of research and development, so template scaffold provides a unified component development, and each component in the release time needs to be associated with git source code management of the warehouse, so it will be the original large code warehouse, warehouse decoupling latitude to develop components, here you might be in doubt, How is my generic module called after decoupling? For example, bridge function and interface call are combined with webpack’s ecological capability. In the research and development mode, we call the common capability in the form of externals in the component. At the same time, only the content of the component itself is published in the packaging and release phase, thus reducing the code volume of the component. Of course, there are many problems that affect the efficiency of research and development. For example, H5 development usually uses the ability of bridge, the ability of local preview, the ability of attribute editing, and so on. Here we develop corresponding simulation bridge tools, dynamic forms, iframe and other modes to solve the above problems.

In addition to thinking about the research and development mode, we also divided the components based on the business to facilitate strong support for the business. The following is our component module division.

• Business components: As the name implies, we have sorted out the components developed by various common business rules before to serve specific businesses. For example, when dividing business rule services, we have service modules such as groupings and check-in, and some common components in the corresponding display layer are convenient for the direct use of similar businesses.
• Base components: Base components are the basic UI components that we often use, such as buttons, text, images, etc., to meet the base view requirements.
• Functional Components (to be discussed) This is one of our special component types. Business components have some common behaviors with base components, such as the ability for me to click buttons to pop up bridge shares and the ability to expose components statistically. This type of component has no UI function, only to inject common interaction behaviors into components.

The following is in the form of pictures and pictures for you to show

This is our interface for component development. In order to provide a better development environment for developers, we have integrated all the functionality of the editor to ensure that the presentation is consistent.

function

As an important part of Poseidon, the component was designed with the following functions in mind:

The configuration data

For the editable part of the page, it is necessary to accurately describe the configuration data required for the editable part. The configuration data is heterogeneous. The configuration data varies from page to page and from block to block. Therefore, you need to define the data structure and field type of the configuration data for different pages and different blocks. The ideal configuration data format is JSON, which is flexible and front-end friendly. The most ideal configuration data description is JSON Schema because it supports dynamic form generation and data validation.

Component interaction

As mentioned above, we decoupled all the component code into different repositories, so look at the following scenario.

Finally, we need to solve the problem of communication between different components. We are familiar with cross-component communication, such as EventBus, etc. In combination with the business, we need to solve the problem of exposing the internal methods of components to other components, and triggering methods in the specified binding events (click, focus, etc.). Divide this problem into two parts in practice:

1) During the component development phase, define the method name in the component description. For example, we agree that the description property name is editorMethods and the exposed method is goShare, so that the component provides the method.

2) In the component editing stage, the editor maintains an array containing all external methods in the current component, as well as interactive events. When a specific component is selected, the event method bound to the component can be specified. The following figure shows the use in the editor.

The data bus

Data bus mainly solves the problem of data sharing between components. Also, considering the scenario in the figure below, the data of the back-end interface is used by multiple components, and calling the interface once from each component can cause performance problems. Vuex can be a good solution to this problem, in the editor to define the convention Store object, different interface data set different Store object attributes, can realize the ability of data sharing.

The page template

A template is a page with default data; For componentized pages, the template is a selection of components from the component library, with default data for each component. Using templates to generate pages, only a small amount of template editing can achieve rapid page generation, such as the project precipitation of a lot of poster template, material library template, live broadcast template and so on

Page editor

The original way is a code warehouse in the form of code components reuse, editor to make the reuse of components is also a visual way, simple page assembly so that non-R & D students can also do pages.

This is the edit page for our Poseidon editor, in five parts. At the top is our page setup section, which provides features such as save the release preview of the page. The bottom section, from left to right, is:

• Component list: This is where we show all the components that we publish through the component tool.
• Page component tree: The page component tree is the skeleton of the page, made up of built-in components.
• Display editing area: This area is mainly for the location of the component operation, drag and drop the location of the component, for page editing.
• Property module: Since each component has configurable properties, the configuration is mainly based on the selected component, such as the color size of the button component, depending on what properties the component has.

Management background

The management background is the control hub of the whole visualization, focusing on the management and control of business scenarios. As a platform component can be released at will, but not all non-released components can take effect, so the platform should do quality check on the released components, after passing the audit can be used in the visual editing area; Similarly, the page can be created at will, but it can’t be easily touched by others. For example, the student of business A edited and published the page of business B. Therefore, we divided the concept of project team at the top of the page, and only the members of the project can modify the page belonging to the project. Now we publish the page convenient, the original code deployment method found errors we can quickly roll back, here we also provide the page rollback ability, every time the content published in the editor will have a content published record, easy to roll back the history of the submission, this is the introduction of the background.

Looking forward to

Poseidon currently is still in the primary stage of the construction of the platform system, visual part load of the current business all poster generate work and some of the activities within the page, under the Internet public opinion has entered into the second half, the user operation has become a top priority, the company can do fine on the user operations, cost, efficiency more and more important to the company, As technical personnel, we generate the platform driven by technology and support the business development with the platform, so as to make the company bigger and stronger. In the future, we expect Poseidon system to be completed and become the true God of the Sea.

reference

• Visual page building tools
• Meituan lego
• godspen