墨夫当关——巨型小程序分布式开发与自动化管理

1. 墨夫当关巨型小程序分布式开发与自动化管理刘帅

2. 11 新浪阿里巴巴腾讯百度小米 2次创业 3本技术书籍 2017回归小程序多团队协同开发解决方案

3.

4. 2018年，3月帅，广州有个政务小程序项目，你过去支援一下，去两个星期就回来好的

5. 供应商首页+用户中心公共模块首页社保交管婚姻出入境公积金婚姻社保交管生活缴费护照生活缴费 …… 出入境公积金护照 …… 广东政务小程序矩阵

6. 2018.03 我加入项目 2018.05.21 粤省事上线两个月现在

7.

8. 您带了多少人马？

9. 2人？ 2人

10.

11. 小程序矩阵的问题

12. 体验问题：不同模块间切换需要跳转小程序跳转跳转跳转跳转

13. 体验问题：最近浏览记录会被各模块小程序侵占

14. 实地调研：广东地税办事小程序相关二维码

15. 任务目标：小程序矩阵合并成一个小程序公积金社保交管婚姻出入境公积金护照生活缴费 ……

16. 数十家供应商如何有序协同开发？

17. 架构层面：隔离 & 总控

18. 政务小程序需求首页+用户中心公共模块公积金社保粤省事婚姻 ……

19. 小程序矩阵有隔离&分治，但没有总控&合并开发 …… 提交开发社保仓库提交开发主程序仓库提交 // …… ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils // …… ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils // …… ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils 独立仓库，独立小程序完美的隔离&分治各模块小程序独立注册&审核&发布没有合并的场景和总控的手段

20. 没有总控，管理失控亲，你们的模块没通过代码亲们，公共模块发新版啦，质量校验诶，需要改一下哦大家及时更新一下哈噢？功能都OK吗？功能都OK的现在工期这么紧，要不先缓缓？诶，…，似乎有道理…… 代码质量管理难以推行更新好麻烦，新功能还用不上，先缓缓同上同上 ? 公共模块更新总是滞后

21. 选择合并方案时，答案一目了然

22. 源码阶段合并 v.s 集成阶段合并 // …… ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils …….git // 主程序代码 ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils main.git // 婚姻代码 ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils 合并成一份源码 ├── ├── ├── ├── │ │ │ ├── │ │ │ ├── │ │ │ ├── │ │ │ ├── │ │ │ ├── │ │ │ └── app.js app.json app.wxss gongjijin └── pages ├── cat └── dog shebao └── pages ├── apple └── banana hunyin └── pages ├── apple └── banana churujing └── pages ├── apple └── banana … └── pages ├── … └── … pages ├── common ├── index └── logs utils all-in-one.git branch/feature/ main-featureA branch/feature/ main-featureB 拉分支 branch/feature/ shebao-featureA 合并 branch/fix/ shebao-bugA branch/feature/ hunyin-featureA branch/feature/ hunyin-featureB hunyin.git 源码阶段合并，有合并，但总控弱；有分治，但没有隔离

23. 源码阶段合并 v.s 集成阶段合并开发 …… 提交开发主程序仓库提交开发婚姻仓库提交 // …… ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils // 主程序代码 ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils // …… ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs └── utils 工具自动合并完成小程序 ├── ├── ├── ├── │ │ │ ├── │ │ │ ├── │ │ │ ├── │ │ │ ├── │ │ │ ├── │ │ │ └── app.js app.json app.wxss gongjijin └── pages ├── cat └── dog shebao └── pages ├── apple └── banana hunyin └── pages ├── apple └── banana churujing └── pages ├── apple └── banana … └── pages ├── … └── … pages ├── common ├── index └── logs utils all-in-one.git 集成阶段合并，已有的隔离 & 分治现状；工具实现合并，自带总控手段

24. 合并结构：小程序分包加载机制 { ├── ├── ├── ├── │ │ │ ├── │ │ │ ├── │ │ └── "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] app.js app.json app.wxss packageA └── pages ├── cat └── dog packageB └── pages ├── apple └── banana pages ├── index └── logs utils } 分包模式目录结构分包模式app.json配置

25. 分包加载机制没有模块级全局概念，如何处理？

26. 模块级全局=模块内全部页面引用

27. 业务模块小程序全局样式&全局配置合并小程序 { "window": { "navigationBarTitleText": "交管", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F8F8F8", "navigationBarTextStyle": "black" } app.json 模块A 模块B 模块C …… } app.wxss 保留留在模块根目目录下 { "navigationBarTitleText": "⻋车辆预约查询", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F8F8F8", "navigationBarTextStyle": "black" <page>.json 页面页面页面页面 } <page>.wxss @import "/jiaoguan_uroad/app.wxss";

28. 业务模块小程序生命周期函数合并小程序 app.js 模块A 模块B 模块C …… <page>.js 页面页面页面页面 // app.js App({ onLaunch (options) { // Do something initial when launch. }, onShow (options) { // Do something when show. }, onHide () { // Do something when hide. }, onError (msg) { console.log(msg) }, // ... }) // page-b.js Page({ onLoad: function(options) { // ⻚页面面创建时执行行行 App.onLaunch }, onShow: function() { // ⻚页面面出现在前台时执行行行 App.onShow }, onHide: function() { // ⻚页面面从前台变为后台时执行行行 App.onHide }, // ... })

29. 自动化集成合并小程序 …… weshop 小程序自动化生产车间合并小程序集成报告

30. 优先杜绝及早暴露简化关系非急勿扰

31. 优先杜绝别人人的别人人的别人人的别人人的别人人的别人人的模块模块模块模块模块模块别人人的别人人的别人人的别人人的别人人的别人人的模块模块模块模块模块模块别人人的别人人的别人人的别人人的别人人的别人人的模块模块模块模块模块模块别人人的别人人的别人人的别人人的别人人的别人人的模块模块模块模块模块模块别人人的别人人的别人人的别人人的别人人的别人人的模块模块模块模块模块模块别人人的别人人的别人人的别人人的别人人的模块模块模块模块模块保密要求我的模块代码冗余源码阶段合并方案存在的问题，从源头彻底杜绝代码冲突

32. 及早暴露更新公共模块代码质量校验合并小程序每一次合并前置更新公共模块并进行代码质量校验，及早暴露问题，及早修复集成报告

33. 简化关系出入境主程序公共模块交管婚姻出入境公积金护照生活缴费 …… 主程序交管婚姻公积金护照 …… 生活缴费模块间的相互影响关系由错乱的网状变为有序的中心辐射，平级模块不应相互影响

34. 非急勿扰问题优先自动解决，不能解决才爆出

35. 化繁为简明确清晰假力于己

36. 化繁为简 Git技能有限？那就让有限技能够用

37. 化繁为简 weshop boss weshop assemble 获取主包代码并进入需要在主程序目录下执行 weshop assemble 老板不懂技术细节？那就让他不需要懂

38. 化繁为简你好，我的模块有个链接要跳转到外部模块，路径怎么填呢？你好，我的模块有个链接要跳转到外部模块，路径怎么填呢？你要跳转的是主模块还是子模块？主模块的话不用加前缀，子模块的话要加上模块名前缀外部模块路径统一加上模块名前缀好的诶，……，子模块？主模块？区分外部链接规则费神？那就让他不要区分

39. 明确清晰问题模块问题代码出处责任人哪个模块有问题？问题代码在哪？责任人是谁？如何解决？结论错误原因及解决办法

40. 假力于己分包加载独立小程序天然分治环境小程序分包加载机制作为合并基础 ESLint社区成熟规范

41. WESHOP的迭代演化环境变量 …… 主程序 …… 代码重复率检测打点注入代码质量评分集成报告

42. 89 ~400 2018.03 我加入项目 2018.05.21 粤省事上线现在

43. 应用案例粤省事数智贵阳国务院客户端国家政务服务平台海关总署旅客通关粤税通北京通信用中国移动端 ……

44. WESHOP Taro COMING SOON……

45. 前端开发的门槛越来越低，需要对架构与设计模式的思考越来越多

46. Thanks