编程知识 cdmana.com

Exploration and practice of mid Taiwan engineering of qunar marketing components

Author's brief introduction

img

A new job

Head end technical director of qunar

2014 year 6 Join qunar.com in January , At present, we focus on qunar machine wine marketing business 、 Small program etc. ; Technology focus on component platform construction , Practice the concept of low code with the architecture thinking of micro front end , Strive to reuse and improve efficiency to a higher level .

1. Business background

Qunar.com is in the tourism industry , Has a large user base , In addition to daily tickets , We also want to do more touch with users , Let users feel the temperature of the platform , This touch is mainly divided into three parts :

  1. Daily sales promotion , Like air tickets 、 The hotel has been purchased , You can draw a lottery 、 Initiate bargaining, cash and other activities , Increase user stickiness , Bring tangible benefits to users .
  2. The guidance of new customers ,app Both client and applet have rookie zones , There are all kinds of activities 、 The task guides users to purchase tickets .
  3. On New Year's Day , The platform will launch a strong promotional campaign , Further improve user conversion , Improve brand influence .

The three main scenes above , Qunar network each business line also has corresponding product operation team to be responsible for , So here comes the question , Touch users need pages , So high frequency , Massive pages , How to produce ?

2. Solution

If we follow the normal project implementation process , The cost and the cycle can't meet the demand , Let's think about the plan first , Let's look at the landing problem :

  1. A lot of pages - Take the idea of reuse , You don't have to redevelop every page
  2. The frequency of change is high - Support configuration , You don't have to republish every change

The first 1 A question , If we want to take the idea of reuse , It is necessary to abstract the different scenes of marketing , and UI Students to achieve a unified design , And then achieve the unity of page style .

The first 2 A question , If you want to support configuration , First of all, we need to design the changeable points of page components , Only in this way can these be made into configuration selection , Integrate into the system .

So when it comes to this , It's very clear that things that need technicians to land come out :

  1. Design a system that allows developers to develop components well , And then integrated into the system , Operators can flexibly assemble the pages they want in the system .
  2. After the page goes online , If there's a modification point , Allow operators to modify component configuration items in the system , And preview , The effect is good , Just push it online .

3. The system design

3.1 Page management system

To make the page configuration online , First of all, we need to design a page management system , Allows drag and drop of components 、 edit , To complete the page assembly and online .

This system , We named him :CMS=Component Management System, Component management system , And Industry "CMS" Content management systems are slightly different , And then we use CMS To simplify the presentation .

Components are CMS The most valuable material of the system , Our vision and practical actions are also based on the following ideas :

Pages are not developed , The page is assembled , Operations can be flexibly assembled according to the component library , Every iteration of the component library empowers operations .

img

3.2 Develop component access

Components need to be iterated , The life cycle of a component is : Development -> test -> Deploy -> Integrate → Operational use , In the middle, it's inevitable to change , So the whole link needs to be carefully designed .

Problems faced :

Many business 、 There are many components , If we all iterate in one project , It's bound to get more and more bloated , So we designed a distributed engineering development program , That is, developers can build their own git engineering , And then integrated into the main system .

img

For developed components , You can publish it yourself , Integration to the main system :

img

Component integration is complete , We can integrate all the required components in the marketing category management interface :

img

In this way, operation students can see these components in the component list , Drag and drop directly onto the page , It's online .

3.3 Page rendering system

About page rendering , There are three main situations :

  1. app In end rendering ,hybrid Support for offline packages
  2. H5 Browser side , Support server-side rendering
  3. Applet side rendering , Natural offline package mode

img

such , We have achieved better rendering effect at all ends , There are some problems to be solved at each step of the process :

  1. app In end rendering , We're packaging resources at the same time , To consider the operation modification, the configuration will take effect in real time , that node End page hosting system , It is necessary to support the situation of delayed request configuration . And when you're disconnected , Automatically use the last configuration , Degraded rendering .
  2. H5 Browser side , For high performance scenarios , You can synchronize templates to node End , This will calculate the final html Back to the browser , Rendering directly .
  3. Small program end , The code is packaged and rendered in native mode , Natural offline package mode , When you're disconnected , Automatically use the last configuration , Degraded rendering .

4. The road of evolution

4.1 Multiterminal rendering

So we need to explore a way based on a set of source code , In the wechat applet side can also be in accordance with the original way to render the scheme , So we investigated the following schemes :

img

Combined cost and Engineering 、 Component status , Finally, we adopted the method of self-study , take CMS Components run natively on the applet side , The basic idea is to develop a container at both ends , The applet will be adapted to the container at run time .

img

After all, they are two very different ends , The middle page has a lot of details , All have been solved :

img

About performance :

The way to update the page on the applet side is setData, So for complex pages ,setData Will cause rendering to jam , Referring to the official loss to the EU :

developers.weixin.qq.com/miniprogram…

therefore CMS The solution is , Using wechat Component, In this way, local refresh can be achieved , Even if there are more page components , Performance can also be optimized for control .

About CMS Components automatically adapt to Component, It mainly involves a component dynamic packaging problem , According to the specification of small program , If you are interested, please see the official documents :

developers.weixin.qq.com/miniprogram…

Its life cycle is complex and special , So you need to CMS The container end of the applet smoothes these lifecycles ,setState To setData Do automatic conversion , These two problems are solved , It's basically adapted to .

4.2 Risk Management

There's a risk in a scenario where people operate , Especially for online pages , Configuration of each component property 、 The adjustment of the skin of the components may cause failure , So standing in the system dimension , We did the following :

  1. Components follow version management : In other words, a new version has been added to the development , For existing pages online , Unless operators take the initiative to click Update , Otherwise, the latest version will not be used , This can reduce the risk of page exposure .
  2. Component property editing verification : For a component , Some properties are required , Some properties must satisfy a certain format , So if there's no constraint , It may cause the page to be exposed , So component properties allow you to configure validation rules , This problem can be avoided to a certain extent .
  3. Page configuration draft box : Every time you modify it, you will enter the draft box by default , As long as you don't click online , Then it's impossible to affect the online page .
  4. The online page needs to be reviewed : For key pages , Every click goes online , All need to be reviewed , Reviewers can be in the system diff The changing part , Test and verify , Only after passing can we finally go online .
  5. The operation and maintenance of the system is perfect : The rendering rate of the page component ,JS Code execution error , And the loading error of resources such as pictures , Unified access, real-time monitoring , Make sure you are as proactive as possible to identify online problems .

4.3 Sedimentation process

The system is set up , So if you want to play a real reuse value , We also need to rely on the normalization of the process ; If there is no uniform closing point for demand , It will lead to repeated development of components . So the following four parties need to make a rule of cooperation :

  1. operating : The demand is basically from operations , After the operation students have a demand , If it is simple, it will be reported directly to the design , If it's complicated, it will be reported to the product , Of course, sometimes I look for technology directly .
  2. Design : Unified control of display and interaction requirements , Initial decision on whether to reuse existing components .
  3. product : Check the function and logic requirements in a unified way , Initial decision on whether to reuse existing components .
  4. technology : Combined with the demands and suggestions of the three parties , And component code design perspective , Give further advice , Whether to reuse , And the degree of reuse transformation ; If there is a dispute among the three parties , We will analyze the decision in combination with the scenario .

With the process , Covering most of the scenes , But in practice there will be bypasses 、 The jumping situation , So the final check of technology is very important . Design 、 product 、 The technology three parties receive demand , In case of any dispute, the other two parties shall confirm , It's also very important .

5. Effect summary

5.1 From the perspective of cost

Qunar had three sets of marketing front desk management system before , With the birth of machine wine business group ,CMS After a period of 、 The second iteration , Has been able to send tickets 、 The hotel 、 The marketing needs of the market come in , Unified design 、 Development 、 Operation process .

The intuitive effect is that there are fewer people maintaining the system , Design students focus on the design of component skin , Energy has also been released , There are a lot of reusable components , The frequency of activities is higher .

In addition to the daily marketing online , After the fusion, it went online : Shuangzhen shop 、999 seckill 、 The 11th National Congress of the CPC promoted three key projects , Luck draw 、 seckill 、 vouchers 、 Shelf components are reused in all three , In especial Plane ticket 、 market 、 Eleven promotion activities of three hotel businesses , Did it 0 Development , Direct configuration online .

5.2 From the perspective of experience

Experience consistency : The previous three systems , Behind the scenes UI It's not the same team , So the skin of the same component is not the same , With UI The unity of the team , The consistency of page presentation is better .

Page availability : In the same system ,CMS stay app Both offline package and applet offline package scene have been degraded and rendered , And image loading, automatic retrying and other optimization , Enhance the experience of weak network environment .

5.3 From the perspective of carrying business

The system currently carries Plane ticket 、 The hotel 、 Bargaining business in the market , A large number of new customers are attracted to the platform every day , Win free 、 More credit 、 High frequency services such as lottery after payment , And the daily airline operations of air tickets 、 The hotel 、 Daily operational activities of play , Can be operated, self configured online .

6. Follow up planning

Experienced CMS The first phase of 、 After the second iteration , In component overlay 、 System concurrency and risk control , They're protected . But in the end, if this thing wants to be more successful , It is bound to meet the following points :

  1. The development cost has been greatly reduced
  2. UI The design cost is greatly reduced
  3. Operating costs have been greatly reduced

face 1 and 2, Because of reuse , The cost is naturally reduced ; But because of the complexity of some component configuration ( For example, seckill 、 shelves 、 Vouchers, etc ), It's hard to use it , So we set a perceptual goal :

The smooth degree of operation has been improved

If the operation is configured , It's smooth , That means less time , Naturally, the problem doesn't exist , And improve the smoothness of operation , Not just the optimization of component properties , We plan to :

  1. Component add 、 Delete 、 Modify basic operation smoothness
  2. Component attribute simplification 、 Sinicization 、 The manual is equipped with
  3. Can quickly find the components you want , Give full play to your imagination

Serving Marketing , The only constant is change ; For marketing , A long way to go , The marketing scene is also changeable and complex , We have to be sensitive all the time 、 to be very careful , Optimize the system , In order to better serve users , Enabling Marketing .

版权声明
本文为[Where to go]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224152607730b.html

Scroll to Top