preface
One month has passed since the beginning of the 21st year. I want to write a summary from the perspective of the team and review the technical construction and team atmosphere of our team in the past 21 years.
Technical aspects
Our team is one of many at Billon, responsible for supporting all web-related needs generated by the voice room business. The company has some internal infrastructure: Scaffolding, monitoring, alarm, publishing platform, serverless, all kinds of component library, micro front, and so on, the direction of the big already done, so for the technology project, we need to find pain points in the business development, solve the problem of inefficient to bring friends to grow, there may be a complete set of plan could also be a little technical points.
Technical project process: find problems => evaluate feasibility (whether there is infrastructure to avoid repeating wheels) => research => formulate plans => technical review => technical implementation => team propaganda => use feedback => function optimization.
The following is the technical capability we have completed in this year. If you have the same problem or have a better plan, welcome to discuss together:
Low Code platform – Kelvin
Background: With the rapid development of marketing activities, there are many contents, and a scheme to improve efficiency is in urgent need. Objective: To build a general PLATFORM for BUILDING H5 projects, which can realize the rapid establishment of requirements with business logic in the form of plugging and removing component libraries: Access component library 13 building pages 900+ From research and development to the promotion of business use to business planning of their own component library expected to open source this year
Sign up for sdK-@fe /sm-verify
Background: The login and registration of each business is independently responsible for technical upgrading involving H5, Web end, small program, official website and so on. Difficult objective: Abstract the common ability of login and registration and maintain it by one party. In the end, because the UI is different and the framework is different, only the logic and interface are abstracted @ FE/SM-Verify View layer or the respective business implementation
Long link SDK-@fe/Percy
Background: Connecting multiple scenes: IM long connection, chat room long connection, system message, activity scene multiple channels: self-built long connection, long connection of multiple cloud business objective: to smooth the difference between multi-channel and multi-scene to reduce the cost of connecting results: a total of 9 projects access two small program project article: Small white 10 minutes introduction Websocket, hand in hand with you to achieve a multi-person chat room ~
API&Mock platform – Nash platform
Background: There is no unified platform maintenance for interface definition and no unified mock ability. Many projects are started to wait for the back-end interface to complete the development goal: the front-end and back-end simultaneously develop automatic API document generation tools to reduce serial time. Achievement: Generate interface documents by scanning interface notes through the gateway scanning capability when the server publishes; Generate mock results by automatically matching generic and private policies through the Mock platform. The gateway recognizes header field intercepts and returns mock data that has been promoted for company-level use
Chrome identity plug-in tool – identity-Switcher
Background: H5 simulation of user identity is cumbersome and cannot remember to manage multiple users relying on browsers simulation of mobile terminal PC needs to copy cookies into the project and restart the project to access user identity Objective: Users can simulate user identity without copying back and forth and switching web pages The ua generated by chrome plug-in interception request injection can achieve the effect of user management and r&d environment management. Based on the omnibox capability, it provides the r&d personnel to input the url that needs to obtain the cookie and inject the obtained cookie under the current address with one key, which has been promoted by the company level. Article: How do I use these three small tools to help the little sister improve 100% development efficiency
Public library – @fe/utils
Background: Every r&d staff should accumulate their own common function library and copy the content back and forth every time, document maintenance and upgrade, and word of mouth. Objective: The team also needs to accumulate a common function library based on business. Achievement: 20+ commonly used functions have been accumulated and used in the team
Off-site features – @fe/ Rainbow
Background: In order to improve the DAU and new users of voice APP, we need to count the specific data such as the number of new channels and the number of outbound users to promote the accurate product analysis and launch. Therefore, our attribution project came into being as follows: Real-time guiding APP data results, such as call function inside and outside the station, download bar and mask outside the station, PV and UV events inside and outside the station, registration times outside the station, APP arousal times, channels, conversion rate, etc. : UMD export has covered all project business by default and you can decide whether to use completed data kanban
FAQ – @fe/issue
Background: The pit that each student stepped on cannot be known to the problem that often wastes time and repeats, and the target is unknown: There needs to be a function like Git Issue, which can be added to manage the problems encountered in the research and development, and there can be a status management problem classification label and other functions so that others can comment on the results: A single project @fe/issue only uses the issue function, and there are a large number of nail reminders for operations such as modification and comment, which have accumulated 24 problems
Tool burial point – @fe/ Turing
Background: Business projects Each company should have a common scheme for statistical use of data. It is impossible to know the use situation of internal use technology projects, so that output objectives cannot be quantified. Add a burying point for technology projects and visually display data results
Module update notification – @fe/module-update
Background: With the increase of business, we have accumulated more and more NPM packages. Maintenance is also a big problem. Everyone has the right to change and does not timely notify the changes. Git commit @fe/module-update Git commit @fe/module-update Git commit
Image compression – @fe/compress
Background: activity project pictures very much Every picture of the export to use manual compression tinypng time-consuming to target: need an automated tool processing images results: reference git workspace concept Achieve on-demand compression compression of the specified range in the current workspace pictures only old project provides a key compression of the entire project images article: Elegant front end image compression
Doric skeleton screen
Background: The loading process of business functions realized by H5 will be in loading state, which is easy for users to have waiting anxiety. Objective: To provide cross-terminal skeleton screen scheme for commonly used pages. Achievement: We have completed two projects in two apps and need to optimize the pages with short waiting time
Buried test platform
Background: The test of buried sites in the test environment is to check the human cost by capturing packages. Nearly 100 buried sites of large-scale activity projects have been reported and all the scenarios have been reported. It takes one day’s work to measure the data of buried sites. Solve the problem of test environment is buried point test automation Save manpower cost, and improve the accuracy of the buried point test results: monitoring point of news report Falling into a new real-time library to deal with data repository Report record number calibration parameters on the accuracy of the test environment function test report complete directly on the platform can be exported To save time and effort
Skin – @fe/theme-webpack-plugin
Background: Some H5 pages need to be embedded with two apps with different styles, so there are two sets of skin requirements: CSS variables, Webpack Plugin abstractions into tool results: specific variables are used in the project and background-color is used: Var (–bg-color-1) this way to make the theme work; Switching the theme, using the plugin-provided toggleTheme() method, with poor promotion by modifying link’s href attribute needs to follow the business iteration
Tool-guide for beginners
Background: Novice guide function each development cycle is not long and quick students may be a few hours, but there is no technical point, repeated labor. In order to solve this kind of problem objective: We need to make a general one, try to have similar demand next time, and finish it in 1 minute: Enter the project for the first time, can highlight the elements in the page, in each direction of the element can be added to explain the guide, click to jump to the next step, until the completion of the novice guide, the next entry into the project does not show the novice guide, due to explain the guide part of the high flexibility, using the output picture article: Vite + VUE-TS 10 minutes for a beginner guide
H5 container inspection tool
Background: The client students may have some influence on WebView when the version iteration is completed and the review is released, leading to the unavailability of normal functions of H5. The human body notification may have omissions, which are not intelligent and automatic, and has experienced several online problems. Therefore, a tool that can check container functions in advance is urgently needed. Before the release of the output tool client, test some use cases in each Webview using the tool to help detect whether the function of each position is normal. If there is any abnormality after the test, it will be notified in the bridge update. Research and development achievements of the corresponding client: help the research and development to find problems, which has been promoted to the test students
There are also some of the following and lower use rate is omitted…
It is expected that our team can also exert certain influence in the front-end field, and every partner in the team who goes out can take the lead on his own. We should be proud of having worked in this team, so we must enhance the influence of the team. Since the second half of the year, the Nuggets have published a total of 18 articles, and will continue to push the issue this year.
Atmosphere in
Wuxi Yuantouzhu – Cherry blossom 🌸 Tour
Be sure to go again this year, it’s really beautiful ~~~🌸🌸🌸🌸 Note time at the end of March oh!
Fung Yin Bay – Villa Home Party
The sea wind is very strong Li Jing’s big chicken steak with beer 🍺 Werewolf killing play late we sleep in strange positions
Hangzhou Lin ‘an – Curling & The Valley of the Wind
Dry curling competitive experience is really good, a strong sense of integration. The thin figures in the team uniform on the grass in the Valley of the Wind and the handsome smiles beside the train are all the spirits of the team
A variety of meals
There are also spontaneous Sanya and Wugong Mountain
The pictures are so beautiful
conclusion
Record the achievements and happiness of the past 21 years, and hope that all the team members will feel rich and colorful when looking back on the past year, and have gained physically and mentally. Happy life happy work. 22 years of exploring the unknown together!!