Amoy's self-developed front-end R&D tool AppWorks is officially released

After a year of iteration and intensive development for nearly 2 months, AppWorks was officially released recently.

AppWorks address: https://appworks.site/

AppWorks is a VS Code suite that has received widespread attention from developers in the community. It has 2w+ downloads in the VS Code plug-in market. It is one of the top 100 suites in the VS Code plug-in market that is loved by developers. It has been logged in the VS Code plug-in market many times per week/month Trend list. Within Taobao, AppWorks creates projects 50+ times a day, blocks used 50+ times a day, and DAU 400+.

The official version of AppWorks is positioned as a front-end R&D tool set, with the goal of making the development of front-end applications faster, better, and easier

• What is a tool set? The tool set means that AppWorks includes a series of tools (desktop client, editor plug-ins, command line tools, etc.) for front-end R&D scenarios.
• Why is it faster, better, and easier? Fast, good and easy refers to the three core issues that need to be solved in the front-end R&D process: R&D efficiency (to be faster), code quality (to be better), and R&D threshold (to be easier).

This article will mainly introduce the capabilities of AppWorks and how to use these capabilities to solve these problems.

makes the development threshold a little lower

Good tools should be affordable to everyone. The primary problem that AppWorks solves is that everyone can quickly start front-end development. Faced with this problem, the solution provided by AppWorks is GUI tools + massive reusable materials.

Development Toolbox

To start the development of front-end applications, you first need to install the necessary development tools and configure the corresponding development environment:

• The necessary development tools include: Visual Studio Code, Google Chrome, Charles, etc.;
• The configured development environment includes: Node.js, npm, git, etc.

Visual Studio Code address:

https://code.visualstudio.com/

Google Chrome address:

https://www.google.cn/chrome/

Charles address:

https://www.charlesproxy.com/

Node.js address:

https://nodejs.org/en/

npm address:

https://www.npmjs.com/

git address:

https://git-scm.com/

To this end, AppWorks provides a front-end development toolkit- AppWorks Toolkit to help developers quickly and easily build a front-end development environment.

AppWorks Toolkit address: https://github.com/appworks-lab/toolkit

Toolkit is a desktop client, developers can quickly install and use. Its core capabilities are:

• One-click installation of front-end development tools , these tools include but are not limited to: desktop clients, editor plug-ins, browser plug-ins, command line tools, etc.;
• visual management front-end development tool , covering tool search, installation, upgrade, uninstall complete software life cycle management;
• visually configure the front-end development environment , these configurations include but are not limited to: Node configuration, npm configuration, Git configuration, etc.

For a more detailed description, please refer to: "Front-end Environment"

Reading address: https://appworks.site/pack/basic/toolkit.html

Massive reusable materials

The second step of front-end development requires massive reusable materials. Only when the materials are massive and reusable can they serve the development of front-end applications. The requirements are:

• Massive : There are corresponding cross-end cross-frame materials for different terminals;
• can be reused : need to have a higher degree of domain abstraction and maintainable code quality.

For this AppWorks provides a material solution- AppWorks Material to meet these requirements:

The features of AppWorks material solutions are:

• Rich and high-quality materials : Abstracted from the business and after multiple rounds of reviews, it supports the materials of different UI components such as Fusion Design, Ant Design, and Rax;

• to customize materials : Provide scaffolding tools for different teams to quickly customize templates, blocks and components in the business area to form a material library;

  low-cost document site : Open up the hosting of the Fusion Material Center to quickly form material sites and documents.

Let a good development experience promote efficiency

Good tools should be able to provide a good development experience and promote efficiency. To this end, AppWorks provides a front-end R&D suite based on VS Code-AppWorks Pack improves the experience and efficiency in the field of source code development from the following aspects.

AppWorks Pack address:

https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks

minimalist development process

Pack integrates operations such as creating, debugging, and publishing projects into VS Code through plug-ins. Common engineering operations and docking with online platforms can be completed in the editor. The integration of these capabilities eliminates the need for developers to frequently switch and learn between multiple clients and platforms:

friendly visualization development

Pack provides a material-based visual development method. Based on AppWorks Material , the page is generated through block assembly, and the material is added to the code with one click. The documentation and examples of the material can be directly accessed in the editor:

For a more detailed description, please refer to: "Materials Used"

Reading address: https://appworks.site/pack/basic/materials.html

powerful coding assistance

The coding assistance capabilities provided by Pack include: code hints (auto-completion, information hints, and definition jumps), code refactoring, and code snippets. These functions cover multiple programming languages (JavaScript, CSS) and multiple DSLs ( React, Rax) and multiple R&D frameworks (rax-app, ice.js).

Take the code reconstruction function provided by Pack as an example, you can quickly delete component files and all references to component files, and at the same time delete unnecessary variables due to component properties:

For a more detailed description, please refer to: "Code Completion", "Code Refactoring"

Reading address:

"Code Completion": https://appworks.site/pack/basic/intelli-code.html

"Code Refactoring": https://appworks.site/pack/basic/refactor-code.html

Let good code get continuous attention

Good code quality is the foundation of software engineering, and good development tools should be able to guarantee the code quality of software engineering.

To this end, AppWorks provides a code quality solution- AppWorks Doctor to solve this problem. Doctor provides code specifications and project quality evaluation models, combined with editors to automatically repair specification issues and produce project quality evaluation reports; online data disks are provided to fully understand the quality of the team and the project, helping developers and management The reader maintains a constant focus on the quality of the code.

code specification

Doctor declares and constrains code specifications through the @appworks/spec package. This specification follows the Alibaba front-end coding specification, and combines our best practices in ICE and Rax projects, including ESLint, stylelint, commitlint and Prettier related rules. Developers can easily integrate with their own front-end projects.

address:

@appworks/spec：https://www.npmjs.com/package/@appworks/spec

ICE：https://ice.work/

Rax：https://rax.js.org/

quality analysis

Doctor has established a project quality evaluation model, which includes the following dimensions of analysis:

• Code specification: appworks/spec and provide one-click repair function (Doctor provides the default configuration, but the @appworks/spec configuration priority of the user project will be higher).
• Code maintainability: scan the code through typhonjs-escomplex. A low complexity score indicates that the judgment logic of the code is complex, may be of low quality and difficult to read, test, and maintain.
• Code repetition: scan the code through jscpd. Once the repeated code goes wrong, it means double the workload and continuous uncontrollable. Prompt for code abstraction and refactoring to reduce redundant code.

address:

typhonjs-escomplex：https://www.npmjs.com/package/typhonjs-escomplex

jscpd：https://www.npmjs.com/package/jscpd

Developers can perform quality inspections on their local projects in VS Code, automatically fix specification issues, and view analysis and optimization suggestions in terms of maintenance and repeatability:

Or to automate the upgrade of the dependent base libraries and frameworks, Doctor also provides human supervision and occasional intervention methods:

online governance

Code specification and quality analysis allow developers to actively optimize the quality of the project locally. But for the team, there still needs to be a passive way to promote the quality management of the project. For example, understand the quality trend of key projects, the quality of team members, promote the implementation of best practices or upgrade certain dependent packages, and so on.

Inside Alibaba, the Doctor collects project quality information during the release and deployment process of the project by docking with the DEF engineering platform, and sends the quality report of this iteration to the developers, thereby enhancing the quality awareness of team members. At the same time, the quality inspection of the release link is controllable. When we encounter some special circumstances, for example, when we find a code or dependent package with a major defect or security problem, the release process can be interrupted:

By collecting the quality of the project when it is released, the Doctor can know the quality overview and trends of the projects and members in the team, and display and analyze the data AppWorks Data Platform

address:

AppWorks Data Platform：https://appworks.alibaba-inc.com/

The most frequently used scenario in development is to display the quality information of the project on the online website. Developers can jump to the WebIDE to evoke the Doctor plug-in to complete one-click repair and optimization of the code:

makes the increase in code coding rate measurable

In a broad sense, R&D efficiency refers to the ratio of input to output in the complete process of software from demand to online. Programming efficiency refers to the effective code output per unit time, and programming efficiency is an important part of R&D efficiency.

AppWorks aims to define programming efficiency evaluation standards, produce team programming efficiency reports, analyze factors that affect programming efficiency, formulate plans to improve programming efficiency, implement plans, observe changes in efficiency data, adjust efficiency plans, and finally achieve improvement The purpose of individual and team programming efficiency.

At this stage, AppWorks has mainly completed the collection and statistics of programming data.

data collection

AppWorks uses the Time Master plug-in to automatically track the developer’s coding behavior in the editor. The data collected by Time Master includes the developer’s editor usage time and all operations on the code file on the editor, such as opening files and closing files. File, type in the code file, etc.;

In the end, it is possible to count the detailed editing behavior of the developer in each file and each item, for example:

• Length of stay
• Edit time
• Number of lines of code added and deleted
• Number of characters added and deleted
• Number of keyboard entries
• and many more

In the Alibaba intranet environment, Time Master will report these data to AppWorks Data Platform.

Data analysis

Based on the reported data, AppWorks Data Platform can provide statistics and analysis of individual, project and team programming data:

• Project market: provide data statistics and analysis on the development investment of members of specific projects;
• Individual market: Provide statistics and analysis of personal quality and efficiency data, and compare with the overall situation of the team;
• Team Market: Provide statistics and analysis of the overall project quality and efficiency data of the team, as well as the quality and efficiency overview of team members.

Future Outlook

Coding assisted enhancement

Judging from the user usage data in the past year, the coding assistance function is still the most frequently used function by developers. The increase in the accuracy of this function will promote the increase in exposure and conversion rate:

• Conversion rate: usage/exposure
• Exposure rate: exposure/number of active users

From the daily user interviews, developers have urgent expectations for the code hints and code refactoring of the basic libraries and frameworks, such as quick code extraction, quick variable naming, Inline Style to CSS and other operations, which can provide developers with pleasure Coding experience. In the future, AppWorks will continue to enhance its coding assistance capabilities and combine with Time Master to quantify the actual coding efficiency improvement of related functions.

Project quality governance

AppWorks completed the prototype of the Data Platform in the previous year, opening up the link for quality data reporting, storage and statistics.

However, data only provides reference value. Only by taking actions based on the data, continuously improving the data model, and improving the index data, can the value of the data center be realized.
In the future, AppWorks will let developers and managers understand the latest developments in the basic library and framework through online websites and editor-side information, supporting upgrade tools, and promoting the upgrade of team infrastructure. For example, through online and offline linkage, the upgrade of React 15 to 17, and the upgrade of the Rax core library from 0.6 to 1.0, and so on.

toolbox capabilities

The first version of AppWorks Toolkit has completed the quick installation of the necessary tools and the management of the Node version. In the future, it will continue to improve the management and configuration capabilities of front-end tools and development environment, and become the first entry point for front-end development, helping beginners to quickly start front-end development, guiding developers to use tools, troubleshooting and repairing development environment problems. E.g:

• Global npm management
• Git/SSH configuration
• Browser/editor plugin management

Programming data value mining

AppWorks completed the reporting, storage and statistics link of programming data in the previous year. In the future, AppWorks will mainly use API or offline data sharing to allow business platforms and engineering platforms to use programming data to measure or analyze R&D efficiency, so as to maximize the value of data.

written at the end of the text

AppWorks will continue to focus on user experience and be a useful tool for developers. Any suggestions or comments, you can submit an issue to us: https://github.com/appworks-lab/site/issues

Relevant information:

1. AppWorks official website: https://appworks.site
2. AppWorks Toolkit: https://github.com/appworks-lab/toolkit
3. AppWorks Pack: https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks
4. AppWorks Material: https://appworks.site/materialCenter/fusion