自动生成代码的方案。 目前，业内主流的代码生成方案有两种，一种是通过训练神经网络，从图片或草图直 接生成代码，以微软 sketch2json 为代表；另一种是基于 Sketch 源文件，从中解析 出图层信息转化成 DSL 并生成代码，以 imgCook 为代表。经过实践，我们发现第 一种方案基于神经网络的代码生成算法虽然简单粗暴，但复杂层布局的准确率较低、 可解释程度不高导致后续无法持续优化。方案二中 环布局），58 Picasso 仅支持原始组件的识别，复杂组件生成错误较多，不支 持成组 / 悬浮 / 循环布局，准确率较低。 ● 代码可读性方面：淘宝 imgCook 在生成布局时，测试样本中图层重叠区域使 用到了基于根布局的绝对定位方式，不符合 RD 预期，可读性一般，而我们的 方案使用相对定位方式，可读性较好。 58 > 2021年美团技术年货 ● 研发流程覆盖度方面：淘宝 imgCook 钮、标题、进度条、评分组件等，但 是 Sketch 数据源中并没有这些组件只有图层信息，图层是设计师在设计 UI 视图时 用到的视图控件。组件与图层的对应关系是一对多的关系，图层在 Sketch 数据源中 的表现形式如下图中的 JSON 数据结构所示，描述了图层的坐标、大小等信息，后 续布局生成就是基于对图层的切割来实现的。 [ { "class_name":"MSTextLayer"

⼩小程序开发姿势各不不相同，mpvue 是如何决策的？制定规则 还是复⽤用规则，mpvue 如何通过最⼩小的代价，打通传统前端 和⼩小程序开发的壁垒？ Vue 代码 mpvue 编译器器 视图层代码 逻辑层代码 执⾏行行阶段 编译阶段 View VDom Component WXML WXSS Service mpvue SDK 事件函数 逻辑 Data ⽣生命周期 data 对象实例例 mpvue runtime 实例例间⽣生命周期互通 维护 Vue 对象实例例 mp 触发事件 + Vue 执⾏行行回调函数 Vue 维护数据模型和虚拟 dom ⼩小程序负责视图层渲染 mpvue runtime 实现 事件函数 mp 对象 AppData ⽣生命周期 事件函数 Vue 对象 data ⽣生命周期 事件代理理机制 数据同步机制 ⽣生命周期关联

前端逻辑有⼀一定规模，分层有利协作 – 便于保证数据的⼀一致性 – 业务逻辑的复⽤用 – 每个层次的单独可测试 • Struts这种服务端MVC的弱点在哪⾥里？ – 拉长了视图层的⽣生成和渲染 – 不利于UI⼈人员协作 ⾃自定义标签 • 在创建界⾯面时，声明式代码是有优势的。 • HTML的标签集是⽐比较贫乏的。 • 服务端⾃自定义标签的劣势

Process IPC、RPC Render Process IPC 、RPC IPC ✔ 项⽬目实践 应⽤用架构 ⽤用户功能 ⼯工程搭建 项⽬目配置 模板注⼊入 构建部署 视图层 Bridge Node API Native API 服务端 Eggjs Cat Egg-cors Egg-Script 应⽤用层 中间层 客户端 Vue Vue-Router

的新功能可以参阅迁移指南! Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的 是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第 三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 (opens new window) 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 的开发者，你可能会对 Vuex 和 Redux (opens new window) 间的差异 表示关注，Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所 以它能够轻松的通过一些简单绑定 (opens new window)和 Vue 一起使用。Vuex 区别在于它是 一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合，同时提供简洁的