NetEase Cloud re-reel: cloud computing front-end this year (Angularjs powder cautious into)

Zhao Husen

There has been no drastic change in the front end of the 2017, but the momentum remains unabated. Language, standards, frameworks, and libraries are gradually stabilized and perfected, and teams no longer have to devote a lot of effort to building wheels, but more to accumulate the required library of components, develop the right tools and integrate their solutions.

Our cloud computing technology front-end development group is no exception, after spending time with other cloud computing group, NetEase Cloud Foundation Services (NetEase Hive) last year's rapid development period, now the main goal has shifted to how to better accelerate the efficiency of the iteration, improve the user experience, improve Web performance . In view of this goal, our group has made the overall optimization and evolution in the front-end technology, the working mode, the technology accumulation and so on in this year.

Technology selection of front-end technology

At the beginning of the year, after researching and discussing the various frameworks on the market, we decided to abandon the old nej+regular+mcss Architecture and switch to the webpack+vue+postcss+cssmodules architecture .

This is mainly considered in the following areas:

• Development efficiency (hot update of Webpack + local Hot update of VUE components > Manual refresh of traditional development mode)
• Performance issues (Vue's dependency management < regular dirty check)
• Potential bugs (Vue's unidirectional flow < data flow to ambiguous bidirectional bindings, Cssmodules local class < traditional CSS global Class)
• Frame popularity (Webpack+vue+postcss > Nej+regular+mcss)
• Learning curve (Vue < nej+regular)
• Document Integrity (Webpack+vue+postcss > Nej+regular+mcss)
• Community Support (Webpack+vue+postcss > Nej+regular+mcss)
• ...

The following two tables are our research results for each framework and are available for your reference:

At present, in addition to the NetEase Cloud Foundation Service Console is migrating the architecture, later developed systems such as the domain Name System, operating platform, dedicated cloud management platform, etc. have adopted a new architectural solution.

Component Library

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

At present, Cloudui has more than 50 components, 3 sets of themes, achieve a complete degree of 80%, business coverage of 75%, while supporting a number of cloud computing projects.

After several months of practice, we have developed a mature iterative process that enables rapid response, rapid development, rapid release, and the ability to output detailed ChangeLog:

v0.1.25修复：- 移除对`u-modal`组件增加`heading`属性和样式修改，- 修复`u-table-view`组件在`display`值为`none`的情况下，显示错乱问题增强：- 更新组件`u-line-chart`样式，增加到20种不同颜色线段和超出设置默认线段颜色

Full stack

This year our group has done some practice and accumulation in the whole stack, the team gradually to the full stack development, some members focus on the traditional front end of the multi-terminal research and in-depth cooperation with designers, another part of the staff focused on the node. JS full stack development model.

In the second half we reconstructed the domain Name System with Vue+koa architecture, and accumulated a set of corresponding tool templates and practical experience.

Tool chain

According to the previous series of technology selection and practice, we have developed a series of corresponding tools.

Front-end aspects

• Integrated build Tools
• Icon-font-loader
• Svg-classic-sprite-loader
• Vue-multifile-loader
• Vue-markdown-html-loader

Back-end aspects

• Integrated development tools
• Engineering templates and Core packages
• Swagger interface document generated by JSDOC annotation based on

Testing and monitoring

In order to ensure the code quality and operational stability of the business, we have done the corresponding work from two dimensions:

• Added E2E test to the main module of NetEase Cloud Foundation service console, recorded Uirecorder script and added to continuous integration.
• Product Access APM for 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 make certain adjustments in the working mode. Changed from a single line of business to a business + technology two line for everyone before. Line of business need technical line to improve quality and efficiency, technical line also inseparable from the practice and experience of line of business.

Learn to share

As for the knowledge accumulation and learning sharing in the team, we also gradually developed some routines:

• Using GitLab's mergerequest, double trooped Codereview
• Two-week front end group sharing
• Cooperation and communication with the surrounding departments
• Library Management mechanism

Summarize

During the year, our group undertook a number of projects and shouldered more responsibilities.

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

In this year, we haven't done much technical output yet. A big wave of our group of articles is coming, we netease front-end technology conference Goodbye ~

At last, we sacrificed our great killing device.

NetEase Cloud re-reel: cloud computing front-end this year (Angularjs powder cautious into)