Netease Cloud Relaunch: The Year of the Cloud Computing Front End (AngularJS fan caution)

This article is published by netease Cloud

Author: Zhao Yusen

There has been no drastic change in the front end of 2017, but the development momentum is still unabated. As languages, standards, frameworks, and libraries become more stable and refined, teams are less focused on building the wheels and more on accumulating the required component libraries, developing the right tools, and integrating their own solutions.

Our front-end development team of the Cloud Computing Technology Department is no exception. After passing through the rapid development period of netease Cloud Basic Service (netease Honeycomb) last year together with other cloud computing groups, the main goal now has turned to how to better speed up the iteration efficiency, improve user experience and improve webpage performance. Aiming at this goal, our group made overall optimization and evolution of front-end technology, working mode, technology accumulation and other aspects in this year.

The front-end technology

Technology selection

At the beginning of the year, after researching and discussing various frameworks on the market, we decided to ditch the old NEJ+Regular+MCSS architecture and switch to Webpack+Vue+PostCSS+CSSModules architecture.

Mainly from the following aspects:

Development efficiency (hot update of Webpack + partial hot update of Vue component > Manual refresh of traditional development mode)
Performance issues (Vue dependency management < Regular dirty check)
Potential bugs (one-way flow of Vue < bi-directional binding with unclear data flow, CSSModules local class < traditional CSS global class)
Framework popularity (Webpack+Vue+PostCSS > NEJ+Regular+MCSS)
Learning curve (Vue < NEJ+Regular)
Documentation perfection (Webpack+Vue+PostCSS > NEJ+Regular+MCSS)
Community support (Webpack+Vue+PostCSS > NEJ+Regular+MCSS)
.

The following two tables are our survey results for each framework for your reference:

At present, except that the framework of netease cloud basic service console is being migrated, the system developed later, such as domain name system, operation platform and exclusive cloud management platform, has adopted the new architecture scheme.

Component library

In order to reduce the development cost and ensure the consistency of user experience of each project, we implemented a set of independent component library — CloudUI according to the specifications developed by the design team.

Currently, CloudUI includes more than 50 components and three sets of themes, achieving 80% perfection, 75% service coverage and supporting multiple cloud computing projects.

After several months of practice, we have developed a mature iterative process that can respond quickly, develop quickly, release quickly, and output detailed ChangeLog:

V0.1.25 Fixes: - Removed 'heading' attribute and style modification for 'U-modal' components, - Fixed 'U-table-view' component display error when 'display' value is' none 'Enhancement: - Update component 'U-line-chart' style to increase to 20 different color line segments and beyond setting default line segment colorsCopy the code

The whole stack,

This year, our group has done some practice and accumulation in the aspect of full stack. The team gradually develops towards full stack. Some members focus on the research of traditional front-end and multi-terminal and in-depth cooperation with designers, while others focus on the research of Node.js full stack development mode.

In the second half of the year, we used Vue+Koa architecture to reconstruct the domain name system, and accumulated a set of corresponding tool templates and practical experience.

Tool chain

According to the previous series of technical selection and practice, we developed the corresponding series of tools.

The front side

Integrated build tool
icon-font-loader
svg-classic-sprite-loader
vue-multifile-loader
vue-markdown-html-loader

In the back-end

Integrated development tool
Engineering templates and core packages
Generate Swagger interface documentation according to JSDoc annotations

Testing and Monitoring

In order to ensure the code quality and operation stability of the business, we made corresponding work from two dimensions:

Added E2E tests to the main modules of netease Cloud basic service console, recorded UIRecorder scripts and added them to continuous integration.
Product access APM, front-end performance statistics and error statistics.

Working mode

In order to improve the technical strength of the whole team and strengthen the technical depth of each member, we also made some adjustments in the working mode. From the previous single line of business for everyone to two lines of business + technology. The business line needs the technical line to improve quality and efficiency, and the technical line is inseparable from the practice and experience of the business line.

Learn to share

As for knowledge accumulation and learning sharing within the team, we have gradually figured out some routines:

Take advantage of GitLab’s MergeRequest and pair CodeReview
Fortnightly front-end group sharing
Cooperate and communicate with surrounding departments
Library management mechanism

conclusion

In this year, our group undertook many projects and shouldered more responsibilities.

In this year, we have completed the transformation and accumulation of technology, and have set a good posture to meet new challenges next year.

We haven’t done a lot of technical output this year. A large wave of our group’s articles are coming, let’s netease front-end technology conference goodbye ~