一、背景 1. 需要在windows系统上开发一个应用，在只有前端人力的情况下，采用electron的方式 2. 实现POS基础业务，如登录、订单等，支持会员、促销、优惠券业务 二、目标 1. 使用前端熟悉的方式快速构建桌面应用 三、行动 1. 梳理登录、订单、支付模块逻辑 2. 找出难点，各个击破 四、结果 1. 在短时间内完成功能的开发

项目描述: 由于商超收银排队问题比较严重，利用该小程序可 以让用户在超市购物时自助结账，从而提高商家收银效率，并通过在首页增加外卖入口，将 线下用户引流到线上。 行动：  订单详情页二维码和倒计时的展示  小程序接入性能监控工具 CAT(美团内部公共服务)  小程序接入埋点 SDK，并进行埋点 结果:  访问量持续增长，总访问量达到11.8万，一定程度上解决了商家排队的问题  增长率有变缓的趋势，在没有地推的情况下，用户粘性不大

一、背景 1. 平台做什么的？ 闪购开放平台是给零售类、医药类商家以及服务于此类商家的第三方软件服务商提供开放对接服务的平台，平台面向的用户主要是商家和开发者 2. 技术背景 a. 闪购成立初期，开放平台业务是依托于外卖开放平台的 b. 外卖开放平台前端分散在两个项目里，一个是vue + webpack的项目，一个是FTL + jQuery + bootstrap + avolonJS的前后端不分离项目 c. 由于业务调整，需要搭建闪购自己的开放平台，为了利用最小的成本快速搭建系统，我采用将vue + webpack的项目直接迁移、对首页进行改造的方式。前后端不分离项目涉及的业务逻辑很重，就暂时没有进行拆分。 二、痛点 1. 用户体验差 因技术栈不同，交互不一致； 前后端不分离项目是多页应用，保存一个表单都会触发视图刷新，且视图刷新速度较慢，体验不顺畅； 2. 开发成本高 增加通用功能时，需要在两个项目中同时添加，因技术栈不同，代码基本不能复用，导致开发成本成倍增加； 前后端分离项目使用的外卖自己开发的组件库，很不好用，导致开发时间长； 前后端不分离项目不能使用闪购自己的组件库，导致开发时间长； 3. 部署时间长 使用公共服务PLUS进行部署，部署慢； 4. 质量监控不完善 基本没有质量监控措施； 三、目标 1. 提升用户体验 解决用户体验差的问题 2. 提高研发效率 解决开发成本高、部署时间长的问题 3. 完善质量监控体系 解决质量监控不完善的问题 四、行动 1. 针对提升用户体验、提高研发效率的目标 a. 组件库替换: 将KangarooUI组件库替换为Roo Vue组件库 b. 部署方式改变:由PLUS部署改为talos部署 c. 前后端不分离项目的迁移 难点 菜单多（29个）、页面多（96个） 逻辑多，有些逻辑产品也不是完全清楚 直接全部迁移风险大 行动 分周期阶段性重构 一期 跳转到新页面时，后端只需要返回页面路径，不再从后端model中获取数据 在ftl中引入iframe，在iframe中嵌入fe项目中的路由 嵌入的iframe中的src会通过nginx转发规则，拉取fe项目的静态资源 二期 在FE项目中维护一份菜单 菜单部分均以devCenter为开头，通过前端路由加载静态资源 之后跟随项目实现完全迁移 2. 针对完善质量监控体系的目标 a. 在项目中添加质量监控工具Akita b. 统一告警模板 c. 及时对告警进行处理 五、结果 1. 提升用户体验 随着页面迁移越来越多，差异化越来越小 2. 研发提效 开发一个页面由1pd降为0.5pd甚至0.25pd，效率提升了2-4倍 部署时间由10min到2min，部署时间提升了5倍，且减少了对后端的依赖 3. 质量保障 可以及时收到项目告警，并对告警进行响应，JS报错率从4%下降到 0.5%左右，下降了8倍 4. 将重构/前后端分离经验，在电销拆分中复用，更得心应手的解决出现的问题