Front-end early chat conference, a new starting point for front-end growth, jointly held with the Nuggets. Add wechat Codingdreamer into the conference exclusive push group, win at the new starting line.
The 14th | front-end growth promotion, 8-29 will be broadcast live, 9 lecturer (ant gold suit/tax friends, etc.), point I get on the bus 👉 (registration address) :
The text is as follows
This article is shared by Kai Wei, lecturer of the fifth Session – Front-end Monitoring System Construction:
The opening is introduced
My name is Wei Kaiwei, the front-end engineer of Alibaba CBU Experience Technology Department. Today, I will talk with my beautiful tablemate Bartian about front-end component measurement monitoring and scene measurement monitoring. First, I will start the first part — how to design front-end monitoring strategy combining components.
Personal introduction
Worked in GOME Big Data Research Institute in the direction of data visualization from 2016 to June 2018.
In July 2018, I joined CBU department of Ali and was mainly responsible for engineering system construction and digital factory construction. In 2019, I was responsible for marketing activities, component management and page building of 1688 marketing venue. I served as PM for 6 times and A++ PM for 4 times.
Business background
1688 has several s-level promotions, several A++ promotions and various marketing activities every year. In fiscal year 2020, it has launched more than 40 themed activities (basically activities every day) and built more than 17,000 venue pages.
The basic unit of a page is its components, and the number of components defines the development cost. The fiscal year counted more than 10,000 components. Some of them have been big hits for a while and turned a business around, some are quickly forgotten, and some are taken offline as soon as they are launched. From “hot” to “outdated”, is it a problem of their own quality, or the “brokerage company” packaging? Tell me how much you’ve contributed to the “fans.”
Daily accumulation
A good operation strategy may not immediately meet expectations, or it needs a certain number of experiments to continue to tune, and finally achieve the maximum matching of people, goods and field.
Imagination is the beginning of creativity, lots of experimentation + lots of tuning + lots of development = lots of resource pools. Over time, this translates into massive deposition, duplication and waste. With a good strategy, you need to develop new components. When the venue does not achieve the desired effect, the business side will try to change the size, adjust the atmosphere, through several points of interest and so on. The business side is called “adjustment”, and we write development as “development”. When the effect of the venue is relatively stable, the business side may try different ways of playing, which may bring surprises. What brings us, of course, is development. Sometimes I run out of inspiration. Test the waters quickly.
On the one hand, the above chart explains the origin of 10,000 components, and on the other hand, it refers to the decision behind the creation of components — data performance analysis.
Normally, we care about the whole venuetraffic 和 conversion.
The entry and direction of the flow of the most direct action points are all focused on the component, the current page PV is actually the number of clicks on the previous page component, page conversion rate is also the click conversion rate of components. A good component not only has an engaging UI, engaging content, floor location, exposure, and stability are all important. Every component is packaged by mental strategy, refined by product thinking, combined with superb technology, inspiration, wisdom and sweat. Apart from disposable consumer goods, simple components are also likely to be polished and restored to glory. Components that consistently perform well should serve as role models to maximize their value. To this end, the marketing and engineering teams combined to build a platform to launch the Component 360 program.
Component 360 Definition
Component 360 takes on the responsibility of “broker” and is responsible for managing component “population”, enriching component labels, opening more component application scenario query, aggregating component exposure in business group, click conversion effect, code quality, rendering performance, data loading performance and failure times. In the face of component selection, it can intuitively analyze and compare the index ranking of similar components, and choose the best with data. As the business effect changes, the performance data flows back from the scene to the components themselves. As the survival of the fittest continues, the excellent components floating in the upper layer are more valuable for maintenance. The hidden recovery at the bottom of the pool reduces application interference and maintenance costs.
We hope to accumulate past operational experience and technical experience in scene construction and digitize the experience model to assist operation analysis and decision-making, reduce experimental costs, and make scene construction more regular, more digital and more efficient.
A component model
Component modeling for FY 2020 is centered around business effectiveness and quality monitoring.
Refer to the amount
The number of references to a component can reflect its generality. The more business it spans, the more generality it represents and should be circled as a key governance object.
The application case
During the 2020 331 Promotion period, the wireless component technology stack of the conference hall will be fully transformed from A to B, which means that the wireless components used in the previous promotion period will face the cost of migration and transformation. High frequency components in the big promotion business are selected as priority migration objects, and the use value of low frequency can be KO to determine whether it is necessary, which greatly reduces the workload of upgrading and transformation and ensures the controllability of construction period of 331 Big promotion.
monitoring
Performance monitoring
Creating a page determines the site on which the page is located, which defines the SPMA (site) and SPMB (page itself); A component is used in the construction process, and SPMC bits are determined. SPMD is generated for every clickable hyperlink rendered after the page is published and run online.
The automatic burying point of super positioning model is usually applicable to general data such as flow, source and miss rate, guidance conversion, transaction amount, equipment, daily activity and so on.
A polished UI, cool animations, attractive goods, and even several sets of skins, all for one click, for streaming, for shopping, and ultimately for conversion.
Lead conversion = lead volume/clicks/exposure
Exposure of componentsPV of the component, PV of the page is not equal to PV of the component. Page PV is generated as soon as the page is visited, and component rendering loads areLazy loading is adoptedImproved performance. Components only count as a component PV when they appear in the visible area of the page. Page PV >= Component PV >= Component Click.
Component clicks can be located to the result of a single page by spMA, B and C bits on the page. A component may be used N times on a page. Spma and B bits are the same, but SPMC is different. Is referenced N times in N pages, spMA, B, c are different. Define the number of clicks a component has, to locate exactly which pages and floors it uses, and to wash them out in full. The component itself is versioned. if it is not the latest page, it must be the latest version, following the backward compatibility specification of Y and Z, different versions of the same component can be used on a page (as required). Data summary classification is partitioned by year, month and day. Component package name, version, and SPMABC are the minimum grouping conditions.
Quality monitoring
A component that performs well in a business has a very nice look, and component quality is its physical fitness. Slow data loading, poor performance, frequent bugs, massive size, redundant code, poor functionality, and complex configuration mean that components will not survive the first 15 days of the year. In particular, data loading time, rendering time and abnormal conditions will be directly exposed to the client and cause uncomfortable user experience, even leading to failure to operate, and the loss of traffic and conversion (customer complaints) is not without reasons.
Ali platform has done a lot of page-level monitoring, such as the first screen loading time, network request time, picture loading time, blank screen rate, JS abnormality. Optimizing the page level also has to overcome the component itself this hurdle, otherwise when encountering the following overall normal, individual components do not appear the situation will not be monitored. Components are loaded and rendered in modules, and the failure of a single component does not affect the overall rendering. Those unfamiliar with page structure won’t even have a problem seeing the page on the right.
Abnormal monitoring
A component’s invisibility is either a result of special logic controlling the display or an exception. Exceptions are also classified into script execution exceptions and data exceptions. Execution exceptions are usually detected at the page level in JS errors. Data exceptions are at the logical level and JS Error monitoring is indistinguishable because they do not even report errors — often with interfaces. The data results of the exception are presumably made with various compatibility (A && A.B && A.B.C and Babel 7’s A? .b? Which do you prefer?
For example, if there are 50 commodities in a list, there are 3 commodities with the same pictures. This is not a problem from the code level, and it is difficult to see the problems after several times of visual inspection on the page, and no error will be reported during operation.
Monitoring scheme: each component has a data source, and the results of the data source have their own format. As shown in the figure below, we set a field link in the data structure as the monitoring card point and configure the verification rule.
Asynchronous rule verification is triggered when saving component configuration, the exception is just a warning; When the page is published to the pre-delivery environment, the data rules of synchronization are verified for all components. If an exception occurs, the page is blocked and the cause is given. Until the exception repair is complete, the re-release is successful, and finally online. In the online environment, the server will poll the data of the components in the page in use. Once the data is abnormal, it will immediately alarm in the working group, so that the technical students can find the problem and solve it in the first time.
Improvement point: the online environment adopts the way of server side polling and verification, and the data used is the request data under an environment, but the real data of user’s individuality is what we need to monitor. It is possible to move the logic from the server to the front end running environment and verify each time the data is returned before it is sent to the component for update to really discover the customer problem.
Performance monitoring
Component performance monitoring points:
- Module load time. Components, though rendered as a single module, actually extract all of their common dependencies into a SINGLE JS request (called JS Comb), and then combine the components’ own script requests into a single JS request to avoid redundant dependencies between multiple components. Merging requests reduces request frequency and improves load performance. The impact is that the loading time of individual components cannot be counted, so we adjusted the part of network request, and the module loading time was attributed to the self-execution time when the module was first referenced.
- Initialize the data load time. In the first rendering process of our page, the data of the components on the page will be requested back, and then sent back to the components for rendering. Page open rate in seconds has always been an important indicator of performance, and the component’s data load time determines the contribution of open seconds.
- Render time. The rendering time between beforeRender and afterRender. How well the components perform is averaged across multiple pages.
Configuration complexity
Components tend to leave many configuration parameters open to ensure their own flexibility. The first development is in place, flexible enough, operation students can achieve more intervention in the visual construction system. If you need something, add more. When the number of configuration items increases to more than 10, each configuration is a physical task that should be forgotten and feared by those who use this component for the first time. Similarly, components become more complex at the code level, making subsequent maintenance more expensive. Of course, more open configuration also reflects more functionality. Computational complexity is designed to make complex configurations as simple as possible, such as using checkboxes instead of input boxes, and providing default values and help hints as much as possible. After component iteration, the configuration that is not needed is cleaned up in time to reduce users’ confusion.
The complexity calculation rule is configured.
The code quality
Integrated management
Whether it’s exposure, performance monitoring, or aggregating data for components, you can’t ignore the page population they’re in. The core that brings them all together is SPMA, B, and C. In the component details page of the Component market, you can freely aggregate related pages or business groups in the Component 360 panel to view the market results.
I didn’t know that Xiaoming next door was 150 points, but I always felt that I was 99 points and still very good. There is a contrast to know where their own poor, in order to have targeted optimization.
Visual application
General monitoring and analysis are one end of the project, the other end of the data. In fact, on a page, behind the platform can be many. Such as the activity platform, building platform, banner resource platform, algorithm platform, product selection platform, A/B Testing platform, scene control platform, plus the data platform and monitoring platform, I also want to calm down for A while.
Visualize data – What you see is what you get
People are very concerned about the performance data for the pages that are put out there, and when you go to a data analysis platform and you see component data that looks like this.
The page structure is exactly the same as it was when we set it up. When I see repeated component names (multiple uses of “wireless universal hot zone”), I may not be able to remember what kind of image is placed to attract clicks, whether the height takes up a lot of space, and whether the red atmosphere or pink atmosphere is better.
Find the page you want to view data from in your build page list, and click the “Computer” icon in the “Effect Data” column to take you to the posted page. Instead of what you might normally see, there are a lot of colorful masks on the page, with component names labeled and precisely covered in the corresponding block. The color of the mask represents the heat of the first metric data on the current page (this is a block version of the thermal map).
Mobile viewing data
What if I want to see the results of my mobile data delivery?
-
Just open the browser console on the PC page you just opened, switch to mobile debug mode, and swipe the page again. This is a common technique. If you don’t understand, use the following method.
-
Still find the target page on the Chimera platform, in the “effect data” column, move the mouse over the “phone” icon to appear the QR code. Use any QR code recognition tool (browser, wechat, Alipay, Taobao, Dingding…) to scan.
Make sure you connect to the Intranet.
De-platformize and look at the data
Thanks
Q&A
How do you measure component configuration complexity
A: First summarize the component configuration types: Input type Basic complexity 3, default value -1, necessary + 1 (string, number, URL, JSON, rich text, etc.); Select type (radio, check, drop down, etc.), basic complexity 2; Nested type configurations, such as configuring a list with images, text, links, basic complexity = summation of child elements * minimum number of lines.
2. How to measure code quality
A: Using ESLint and Sonar, the group has developed a code inspection platform where the front end projects can commit and build with quality plugins that throw out the number of rule lines (such as assigning constants twice) that will impact the performance, and optionally fix other problems. Once the code is posted to the normal environment, the system automatically creates a check task for the current branch, then categorizes all the departments that trigger the rules, gives a score based on the number of Blocker/Critical/Major levels, a good/bad rating, and an analysis of how long it will take to fix it. Team code quality report a comparison, push to optimize the code.
This article is formatted using MDNICE