1、内容提要这个问题的背景与困境我们是如何解决这些问题的截止到现在，问题解决效果如何小结、问与答前端组件化开发过程可视化开发过程傻瓜化开发过程自动化开发过程模板化数据模型化背景人不够人数不够技能不足培养缓慢流失严重招聘困难坑空等萝卜需求多需求紧需求复杂需求多变定制性强团队间难以相互支援理想中的Ux妹子们输出的原型直接当代码用是人就能开发 Web App会 if else 就能开发复杂 Web App看看demo，看看视频就能上手新手三五天就能上手开发 Web APP与用户确认需求时，直接拖出实际效果用户当场确认效果，减少反复用户自己拖出想要的效果手段如何解决这些问题？手段前端组件化数据模型化开发过

2、程可视化开发过程傻瓜化开发过程自动化开发过程模板化前端组件化收益统一的技术栈前端组件化收益Ux成果在最细粒度层面上落地统一的功能封装统一的组件API统一的交互过程统一的知识/技能统一的UI风格统一换肤消除重复造轮子统一的开发流程统一的前后端接口调用统一的数据结构统一的Bug统一的合规治理Ux妹子们不再需要与所有团队对接统一的坑组件团队永远是问题的最后一桶Web开发专家都沉淀在组件团队组件团队成为黄埔军校Ux妹子们专注于设计，无需担忧落地统一的技术栈统一的合规治理组件团队成为黄埔军校前端组件化挑战前端组件化挑战需要自上而下强制推行，领导的信任与坚持是最大挑战组件团队的设计能力组件团队的填坑能力组

3、件团队是纯技术团队组件团队的领军人物组件API的向下兼容性组件团队如何处理兼容性包袱组件团队的技术影响力严格编码规范与 Code Review自动化测试与DevOps需要自上而下强制推行，领导的信任与坚持是最大挑战组件团队的领军人物前端组件化Jigsawhttp:/数据模型化收益数据模型化收益配置=SQLSQL=数据零编码生成 Rest 服务零编码生成 Rest 服务了解业务就可以开发 Rest 服务了解业务就可以开发 Rest 服务数据模型化Pluto数据模型化-Pluto报表配置数据模型化-PlutoPluto编译器生成的中间文件、SQL语句以前，这些文件都是手工编写的数据模型化-Plut

4、o手段前端组件化数据模型化开发过程可视化开发过程傻瓜化开发过程自动化开发过程模板化Web应用恒等式视图+数据=应用视图可视化开发收益视图可视化开发收益对 HTML/CSS 技能零要求对 JS 编码技能要求很低很低.模板化的开发方式让app开发过程成为流水线解决组件到app的最后一公里代码自动生成：工具将开发者填写的业务逻辑片段串成app自动植入埋点一键测试自动生成部分自动化测试代码一键发布Ux妹子的输出成为开发者的输入开发能力开放视图可视化开发挑战（开发可视化工具）这条路上尸骨累累，甚至有很多连痕迹都没有留下 侯振宇（支付宝金蝉主要作者）http:/ one can be a Web Appl

5、ication Developer ExpertAWADEAwade 设计理念Awade 设计理念 面向组件，而非面向DOM 我们认为，HTML+CSS的灵活性和可能性是无法抽象的，任何尝试对HTML+CSS做出抽象的可视化工具必然走入两个死路：一是变得极其复杂，失去了快速/简单的可视化工具没有任何价值；另一个死路是可用性严重下降，只能当做玩具玩玩。类似Jigsaw这样的组件集，已经将DOM的细节做了最大程度上的屏蔽，并通过API的方式将少量关键细节暴露出来，外部通过操作这些API来控制组件的行为。对这些API做抽象则简单许多，Awade正是在这个层面上做抽象的，这样既避免陷入过多细节，又借助

6、组件的能力提升Awade自己的可用性。Awade 设计理念 拥抱市面上所有Angular组件集；Jigsaw只是默认的，并非不可替代；我们在Awade与组件集之间加入了一层meta，它是任何组件用法与功能的抽象，是组件与Awade之间的纽带；凡是有正确meta的组件，都可以被Awade识别和使用；Awade 设计理念 前后端一体化的开发模式，支持一键式调用模型化的数据、支持普通Rest服务数据、支持直接编码提取、加工数据；支持一键式数据服务打桩，让Web应用的开发与后台解耦，实现并行甚至提前开发；拥抱垂直式的特性切分与开发模式：使用Awade开发，人人都是全栈工程师；Awade 设计理念 支持

7、开发自定义插件，用于提供新组件、覆盖内置组件、提供新的数据源、或者对已有数据源提供更易用的配置UIAwade 实现原理Awade 主要功能静态布局实时编译动态渲染所见即所得调试数据与交互配置全功能预览一键式发布结构树模块管理路由管理组件管理静态资源管理Awade 实现原理 静态布局 网格化平铺容器，开发者根据业务需要添加新组件，或者拖拽网格中的组件修改他们的相对位置；Awade内部利用独创的算法，根据各个组件的相对位置，计算并生成最佳的CSS布局代码，可支持水平、垂直方向上的响应性；网格中，固定将8px作为最小单位，组件的位置与尺寸均为8px的整数倍；这个过程对开发者的HTML/CSS技术的要

8、求是：零；Awade 实现原理 静态布局 每个容器类组件中各有一个独立的网格，并提供独立布局能力；容器类组件是实现页面布局功能的最最高难度所在；“每个容器都是一个爹，谁都惹不起”；Awade 实现原理 AI布局？直接将Ux妹子做好的原型图导入到Awade中，通过AI算法将原型图中的组件的类型、位置、尺寸识别出来，在利用Awade的布局算法，自动生成HTML/CSS代码；Awade 实现原理 数据与交互配置 Awade从组件的meta中读出当前组件所支持的属性、事件；开发者根据业务需要挑选所需的属性、事件进行配置；Awade根据配置直接生成代码；这里要求开发者对组件的API有一定的了解、且有一定

9、的JS编码能力，弱化编码能力要求是Awade主要的持续优化方向之一；Awade 实现原理 实时编译 Awade的编译过程非常复杂，完整的编译过程至少需要花一整天才能讲透；关键环节：SVD-Typescript-Javascript-Angular Component Factory-DOM 自研编译器+各个开源编译器交织混合使用；Awade 实现原理 动态渲染 使用Angular的动态渲染器将编译好的组件实时渲染出来，从而实现了所见即所得的开发体验；一个普通尺寸的app从编译到渲染出来，大约是300500ms左右，比传统的方式快了23倍；Awade 实现原理 预览与发布 编译过程推送到服务端进

10、程，完全使用Angular Cli工具编译，以确保预览可以100%还原实际效果；发布过程与预览相似，只是加入了各种编译优化参数，一键式发布出适合生产环境使用的App文件；Awade暂未实现热发布；Awade 实现原理 结构树 以Y轴为视角提供当前模块的概要结构，提供当前模块所包含组件的快速导航能力；相对的，网格上提供的是以Z轴为视角的组件视图，此视角与运行时的视角一致；开发时，必须同时使用Y轴、Z轴视角才能管理好组件；Awade不需要开发者了解这些知识，这点很重要；Awade 实现原理 模块管理、路由管理 模块管理提供了多模块切分能力，目的是将任意复杂app化整为零；路由管理则在运行时提供了状

11、态切换的能力，将开发时被切碎了的状态根据业务需要串联起来；Awade 实现原理 组件管理 Awade一切能力的源头，没有了组件，Awade啥都做不了；但是实现上，组件管理器仅仅是一个归类了的列表，仅此而已；Awade 实现原理 静态资源管理 提供外部静态资源（图片、静态数据等）的导入、调整、删除等；悄悄抹平了运行时与设计时静态资源url的差异；GIFsAwade 布局Awade 交互Awade 同步编程Awade 撤回/重做修改Awade 容器/嵌套容器效果效果Ux妹子们输出的原型直接当代码用是人就能开发 Web App会 if else 就能开发复杂 Web App看看demo，看看视频就能上手新手三五天就能上手开发 Web APP用户当场确认效果，减少反复用户自己拖出想要的效果与用户确认需求时，直接拖出实际效果小结小结人不够组件化、模型化还不够！任何人三五天要能上手开发Web应用！开发过程可视化傻瓜化自动化模板化