Author's brief introduction
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 ：
- 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 .
- 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 .
- 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 ？
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 ：
- A lot of pages - Take the idea of reuse , You don't have to redevelop every page
- 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 ：
- 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 .
- 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 .
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 .
For developed components , You can publish it yourself , Integration to the main system ：
Component integration is complete , We can integrate all the required components in the marketing category management interface ：
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 ：
- app In end rendering ,hybrid Support for offline packages
- H5 Browser side , Support server-side rendering
- Applet side rendering , Natural offline package mode
such , We have achieved better rendering effect at all ends , There are some problems to be solved at each step of the process ：
- 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 .
- 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 .
- 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 ：
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 .
After all, they are two very different ends , The middle page has a lot of details , All have been solved ：
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 ：
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 ：
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 ：
- 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 .
- 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 .
- 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 .
- 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 .
- 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 ：
- 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 .
- Design ： Unified control of display and interaction requirements , Initial decision on whether to reuse existing components .
- product ： Check the function and logic requirements in a unified way , Initial decision on whether to reuse existing components .
- 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 ：
- The development cost has been greatly reduced
- UI The design cost is greatly reduced
- 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 ：
- Component add 、 Delete 、 Modify basic operation smoothness
- Component attribute simplification 、 Sinicization 、 The manual is equipped with
- 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 .