The first phase of the head-end education front-end technology sharing meeting ended on 1.23. The following is the finishing draft of the on-site speeches of the big coffee lecturers. Thank you for your support:
Instructors
Wu Liupo, front-end technical expert, comes from the
daily work content of the front-end team of the Qianxun location network business . He mainly provides front-end support for company portal, e-commerce, marketing, distribution and other businesses. The business covers PC, H5, App, applet, NodeJS And other technical scenarios.
The following is part of Wu Liupo's wonderful speech:
1. Introduction to development process specification
First of all, let me share, an excellent software development and delivery process
- Demand design: Our demand generally comes from the problems collected by the operating students in the actual product operation, and may also come from the direct demand of the company's senior management; after submitting the demand, the product manager will conduct demand demonstration and confirm the demand before entering product design and interaction Design, UED design link
- Development stage: After the development students complete the development and integration locally, submit the test. After the test is passed, the code enters the pre-release or simulation environment. At this time, the data may already be real data, but the machine environment is completely isolated from the production environment. The code will be officially released for production only after the students pass the acceptance of the environment test
- Data correction: Internet applications are often developed in small steps and fast-running, and the production data structure will often face changes. For example, we have refactored part of the project, or the old code has been split, and the new page is online to replace the old page. Orientation and so on, these all require us to make data corrections in time
- Data analysis: There are many types of data sources, such as page data such as PV and UV, user behavior data such as user click events on the page, hot zone map, business data such as product sales information, etc.; these all require us to enter the code Do a good job of data collection at the level
2. The development history of Chihiro CICD
Before: In the past, the main delivery method of our development was to build and package the code through shell scripts, and then compress and upload it to the resource server; when the code was released later, in the test environment or the production environment, download the resource code, and then decompress it. Start-up, many of these links are done manually
Now: After more than two years of CICD development, we have now fully realized the complete automation of the CICD process; after the code is submitted, we will automatically pull it for compilation. If the compilation and build fail, we will actively send emails and nails to remind you , Here are all implemented through Jenkins; after building, according to the category of the project to distribute, pure static resources will be distributed to OSS, CDN acceleration, if it is a server-side program, we will start the containerized deployment, the implementation here It is done through k8s, and user requests are forwarded by nginx; currently all our front-end projects are released and deployed through OSS + k8s + nginx
Three, positioning problem
To locate and deal with production environment problems, our team currently conducts investigations from the following four areas:
- User-side exception error collection: Pre-catch errors, for example, after the browser program reports an error, we can trigger our message robot to notify us, and we internally call this tool "Prophet"
- Business data link abnormal collection: Our team now uses regional block rendering. Through the capture of business link errors, we can quickly know whether there is a problem with the front-end template or the back-end data.
- User footprint: At present, the life cycle of users in our system is normal. We can collect relevant information. For example, users visit from Baidu search, click and use our services; here we use many tools, such as Shence Buried points can help us record part of the information. We have also developed a set of FPM tools ourselves, which can use several data coordinates to locate a user’s behavior
- Report analysis: Different services have many different ways of embedding points, and even many back-end services have a lot of data to be processed. For example, we encountered a JS file loading problem before, and we can see the average access time of this js file through the report. 300+ms, here we will go in for problem handling, optimization, and then use the previous CICD for rapid release and deployment
Four, front and rear separation
We basically do not have server-side rendering now, and we use complete front-end and back-end separation. However, we have made many optimizations on the traditional front-end and back-end separation. We have developed many internal tools to support us to do the front-end and back-end separation:
- Combining CDN + OSS, through our CICD, we can do fast and seamless release and deployment
- BFF layer, through the technology we developed, we can achieve very good back-end business stripping, data cutting, data aggregation, through our front-end Gateway, we can also achieve good data distribution, page rendering, etc., in addition For SEO, we have also done static processing for search engine optimization
- In terms of monitoring, our current "prophet" monitoring can help us quickly find page abnormalities, while burial points can help us do page tracking, Foxer data collection can help us perform general behavioral data analysis, and FPM can help us make pages Performance analysis