通过了一年的迭代， 近 2 个月集中开发， AppWorks 正式发布。html
AppWorks 是社区受到开发者普遍关注的 VS Code 套件，在 VS Code 插件市场有 2w+ 的下载量，是 VS Code 插件市场受开发者喜好的百佳套件之一，屡次登录 VS Code 插件市场周/月趋势榜。在淘宝内部，AppWorks 日均建立项目 50+ 次，日均区块被使用 50+ 次，DAU 400+。前端
AppWorks 正式版本定位前端研发工具集，目标是让前端应用的开发更快更好更轻松node
这篇文章将主要介绍 AppWorks 有哪些能力，以及如何使用这些能力解决这些问题的。web
好的工具应该是人人都用得起的。AppWorks 首要解决的问题是让人人均可以快速地开始前端研发。面对这个问题，AppWorks 提供的解法是 GUI 工具 + 海量可复用物料。
▐ 开发工具箱
要开始前端应用程序的开发，首先须要安装必要开发工具和配置相应的开发环境：
-
必要的开发工具包括：
Visual Studio Code
、
Google Chrome
、
Charles
等等；
-
配置的开发环境包括：
Node.js
、
npm
、
git
等等。
https://code.visualstudio.com/
https://www.google.cn/chrome/
https://www.charlesproxy.com/
为此 AppWorks 提供前端开发工具箱 ——
AppWorks Toolkit
来帮助开发者简单快速搭建前端开发环境。
https://github.com/appworks-lab/toolkit
Toolkit 是一个桌面客户端，开发者能够快速安装和使用。其核心能力有：
-
一键安装前端开发工具，这些工具包括但不限于：桌面客户端、编辑器插件、浏览器插件、命令行工具等等；
-
可视化管理前端开发工具，覆盖工具查找、安装、升级、卸载完整的软件生命周期管理；
-
可视化配置前端开发环境，这些配置包括但不限于：Node 配置、npm 配置、Git 配置等等。
https://appworks.site/pack/basic/toolkit.html
▐ 海量可复用物料
前端开发的第二步须要有海量可复用的物料。物料只有海量和可复用，才能正在地服务于前端应用的开发，其要求是：
为此 AppWorks 提供物料解决方案 —— AppWorks Material 来知足这些要求：
AppWorks 物料方案的特色有：chrome
好的工具应该可以提供好的开发体验并促进效率的提高。为此 AppWorks 提供了基于 VS Code 的前端研发套件 ——
AppWorks Pack
从如下几个方面来提升源码开发领域的体验和效率。
https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks
▐ 极简的开发流程
Pack 将建立、调试和发布项目等操做经过插件的方式集成到了 VS Code 中，在编辑器内便可完成常见的工程操做以及与线上平台的对接。这些能力的集成使得开发者不须要频繁地在多个客户端、平台间进行切换和学习：
▐ 友好的可视化开发
Pack 提供了基于物料的可视化开发方式，基于 AppWorks Material 提供的海量物料，经过区块组装生成页面，一键添加物料到代码，物料的文档、示例均可以在编辑器中直接触达：
https://appworks.site/pack/basic/materials.html
▐ 强大的编码辅助
Pack 提供的编码辅助能力包括：代码提示（自动补全、信息提示和定义跳转）、代码重构和代码片断等功能，这些功能是覆盖多种编程语言（JavaScript、CSS）和多种 DSL（React、Rax）和多套研发框架（rax-app、ice.js）的。
以 Pack 提供代码重构功能为例，能够快速删除组件文件及组件文件全部的引用，同时删除掉因为组件属性所带来的不须要的变量：
更详细的说明能够参见：《代码补全》
、《代码重构》
《代码补全》：https://appworks.site/pack/basic/intelli-code.html
《代码重构》：https://appworks.site/pack/basic/refactor-code.html
好的代码质量是软件工程的立身之本，好的开发工具应该可以为软件工程的代码质量提供保障。
为此 AppWorks 提供了代码质量解决方案 ——
AppWorks Doctor
来解决该问题。Doctor 提供了代码规范和项目质量评估模型，并结合编辑器来进行自动修复规范问题和产出项目质量评估报告；线上则提供数据大盘来全面了解团队和项目的质量状况，帮助开发者和管理者对代码质量保持持续的关注。
▐ 代码规范
Doctor 经过
@appworks/spec
包来声明和约束代码规范。该规范遵循阿里巴巴前端编码规范，并结合了咱们在
ICE
和
Rax
项目的最佳实践，包含 ESLint、stylelint、commitlint 及 Prettier 的相关规则，开发者能够很方便地与本身的前端项目进行结合。
@appworks/spec：https://www.npmjs.com/package/@appworks/spec
▐ 质量分析
Doctor 创建了项目质量评估模型，该模型包含如下几个维度的分析：
typhonjs-escomplex：https://www.npmjs.com/package/typhonjs-escomplex
jscpd：https://www.npmjs.com/package/jscpd
开发者能够在 VS Code 中对本身的本地项目进行质量检测，并自动修复规范问题，查看维护度和重复度方面的分析及优化建议：
亦或者针对依赖的基础库和框架进行自动化的升级，Doctor 也提供了人为监督和偶尔干预的方式：
▐ 线上治理
代码规范和质量分析让开发者能够在本地主动地去优化项目的质量。但对于团队来讲，依然须要有被动的方式来促进项目的质量治理。例如了解重点项目的质量趋势状况，团队成员的质量状况，推动落地最佳实践或某些依赖包的升级等等。
在阿里内部，Doctor 经过对接 DEF 工程平台，在项目的发布部署环节收集项目的质量信息，并给开发者发送这次迭代的质量报告，由此来提高团队成员的质量意识。同时发布环节的质量检测是可控的，当遇到一些特殊状况时，例如咱们发现了某个有重大缺陷或安全问题的代码或依赖包，能够中断这次发布流程：
经过对项目发布时质量状况的采集，Doctor 可以知道团队内项目和成员的质量概况和趋势，在
AppWorks Data Platform
上进行数据的展现和分析：
AppWorks Data Platform：https://appworks.alibaba-inc.com/
这里面目前开发常用的场景是在线上网站展现项目的质量信息，开发者能够经过跳转到 WebIDE 唤起 Doctor 插件完成一键修复和优化代码：
广义的研发效率是指软件从需求到上线的完整过程当中的投入和产出比。编程效率是指单位时间内有效的代码产出，编程效率是研发效率的重要组成部分。
AppWorks 目标经过定义编程效率的评估标准，产出团队的编程效率报告，分析影响编程效率的因素，制定提高编程效率的方案，对方案进行实施，观测效率数据变化，调整提效方案，最终达到提高我的和团队编程效率的目的。
现阶段，AppWorks 主要完成了编程数据的采集及统计。
▐ 数据采集
AppWorks 经过 Time Master 插件来将自动追踪开发者在编辑器中的编码行为，Time Master 采集的数据包括开发者的编辑器使用时长及其在编辑器上针对代码文件的全部操做，例如打开文件、关闭文件、在代码文件上进行键入等；
最终能够作到统计开发者在每一个文件、每一个项目的详细编辑行为，例如：
在阿里内网环境，Time Master 将会把这些数据上报到 AppWorks Data Platform。
▐ 数据分析
基于上报的数据，AppWorks Data Platform 能够提供我的、项目和团队编程数据的统计和分析：
项目大盘：提供具体项目的成员开发投入状况的数据统计及分析；
我的大盘：提供我的质效数据统计及分析，并与团队的总体状况进行对比；
团队大盘：提供团队总体的项目质效数据统计及分析，团队成员的质效概况。
▐ 编码辅助加强
从过往一年的用户使用数据来看，编码辅助功能依然是开发者使用最频繁的功能，对该功能准确率的提高会促进曝光率和转换率的提高：
从平常的用户访谈来看，开发者对基础库和框架的代码提示和代码重构有迫切的期待，诸如快速提取代码、快速变量命名、Inline Style to CSS 等操做，能为开发者提供愉悦的编码体验。将来 AppWorks 将持续加强编码辅助能力，并结合 Time Master 对相关功能的实际编码效率提高进行量化。
▐ 项目质量治理
AppWorks 在上一个年度完成了 Data Platform 的雏形，打通了质量数据的上报、存储和统计链路。
但有数据只是提供了参考价值，基于数据作出行动，持续完善数据模型，使得指标数据提高，才能完成体现数据中心的价值。
将来 AppWorks 将经过线上网站和编辑器端信息的触达，让开发者和管理者了解基础库和框架的最新动态，配套升级工具，推进团队基础设施的升级。例如经过线上线下的联动，推动 React 15 升级到 17，Rax 核心库从 0.6 升级到 1.0 等等。
▐ 工具箱能力完善
AppWorks Toolkit 的第一个版本中已完成快速安装必备工具和管理 Node 版本功能。将来将持续完善对前端工具和开发环境的管理和配置能力，成为前端开发的第一入口，帮助初学者快速开始前端开发，引导开发者用好工具，排查和修复开发环境问题。例如：
▐ 编程数据价值挖掘
AppWorks 在上一个年度完成了编程数据的上报、存储和统计链路。将来 AppWorks 将主要经过 API 或离线数据分享的方式，让业务平台和工程平台利用编程数据进行研发效能的度量或分析，使得数据价值更大化。
AppWorks 将持续重视用户体验，作开发者喜欢的、好用的工具。任何建议或意见，能够提交 issue 给咱们：https://github.com/appworks-lab/site/issues
-
AppWorks 官网：https://appworks.site
-
AppWorks Toolkit: https://github.com/appworks-lab/toolkit
-
AppWorks Pack: https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks
-
AppWorks Material: https://appworks.site/materialCenter/fusion