作为部门的前端“独苗”，我的钉钉全栈化实践总结
阿里妹导读
一、背景
业务团队面临的问题
1.1.1 具备更强更灵活的资源能力，为后续业务发展蓄力
提前准备好全栈化的建设，需求可以快速迭代上线，自给自足，帮助业务快速拿到结果。
1.1.2 拓宽知识面，思路考虑更完整
提高研发效率，提升解决问题能力，提高排查问题效率，可以快速侦破问题，及时处理问题。 向前一步，不给自己的能力设限，扩充自己的知识面，离架构师更进一步。
1.1.3 能理解不同岗位的同学的诉求，增强同理心
后端同学能理解为什么前端同学会对接口字段提出很高要求，期望后端提供的接口按照开源社区的标准来定义（好的接口是自说明的，不用过多的文档，遵循业界 API 设计规范，使用接口符合人的直觉，接口字段稳定） 前端同学能理解为什么后端同学不愿意轻易写特殊逻辑判断（一套模型已经定义得很优雅了，加个特殊分支就破坏了代码的一致性）
二、如何全栈化-我们怎么做的？
step1: 学习前端
2.1 阶段一：基础知识学习：
2.2 阶段二：4-7 前端工程化学习
public String sayHello(Model m) {List<String> list = new ArrayList<>();list.add("hello");list.add("hello world");list.add("hello world ！");m.addAllAttributes(list);return "hello";}
<html><head><script src="//g.alicdn.com/dingding/dingtalk-theme/entr.css"></script></head><body><div id="Root"></div><script type="text/javascript" src="https://localhost:3000/static/js/boundle.js" crossorigin></script></body></html>
2.3 阶段三：8-11前端框架应用学习
理解MVVM模式、单页面应用、前端路由。 掌握框架提供的API方法，比如页面的render原理、数据变更如何更新视图、以及框架的生命周期等。 会使用数据状态管理来分发数据到你的页面。
2.4 阶段四：前端工具框架介绍及补充
阿里集团前端体系
前端日常使用的工具与框架（新人必看） 5天掌握
工具
图片上传服务器 前端国际化文案解决方案 Done蓝湖：
前端设计稿
Aone：管理需求平台
需求空间
DBase：
前端项目创建及发布平台
DEF：
前端应用构建平台
DingStudio：钉钉前端调试工具 （外网可能访问不到，正在开源计划中）外部同学可以使用SwitchyOmega
DingStudio下载：https://work.dingtalk.com/alidocs/dingstudio/index.html#/download
使用文档：https://work.dingtalk.com/alidocs/dingstudio/index.html#/guide/getting-started
配置教程：https://work.dingtalk.com/alidocs/dingstudio/index.html#/guide/project/proxy
whistle前端调试利器：https://zhuanlan.zhihu.com/p/465659728
前端灰度平台：
前端资源加速Rocket：前端离线解决方案 三端灰度平台Gray：灰度平台以及AB Test平台
前端监控平台：
前端监控接入。（各大监控平台，集团对提供强大完善的监控接入方案） 啄木鸟（钉钉小程序容器层）：https://wpk.ucweb.com/
框架
JSAPI 是钉钉前端跨端解决方案，这里可以在钉钉的开放平台文档找到你想要的端能力
介绍及API总览：https://open.dingtalk.com/document/orgapp-client/mini-program-jsapi-overview
如何调试JSAPI：https://open.dingtalk.com/document/orgapp-client/mini-program-jsapi-overview
JSAPI控制台：https://open.dingtalk.com/document
飞冰脚手架ice.js ：https://ice.alibaba-inc.com/（H5使用）
培训内容：详细的培训计划按月纬度排出来
前端基础知识培训。HTML CSS JS 框架使用：React H5 小程序 重要知识讲解课程。（手把手教学指导） 前端工具使用培训：钉钉前端调试工具、监控工具、构建工具等。
培训频次：1周一次，1-2小时。
培训形式：会议室&部门群直播。
这一环节一定是最有效也最重要的环节，也是学习前端最快速的方式。
全栈化同学应当参与前端需求的评审。 完成前端需求的系分技术方案，包括实现思路、系统结构图、评估影响面，具体看‘系分文档模板’。 过程中遇到问题及时与前端师兄对焦。推动全转化的人要把自己当成一个项目经理对全栈化的同学进行风险管理，有每日对焦完成进度、风险提早暴露。
没个迭代都要保障全栈化同学在前端的投入时间，短期看不到收获，但长期来看是一定有价值的。
step3 沉淀
开发遇到的前端问题以及背后的知识点总结。 项目复盘、问题复盘。 培训课程以及分享内容。
step4 认证检验
1.完成一个页面的开发，并可跑起来
2.有点击事件
3.有使用jsapi
4.有使用引入npm包并且运行
5.页面元素较为丰富，达到1/2 屏（iphoneX机型标准)
6.DingDesign组件与自定义组件至少有一个
7.有arms监控代码
8.有组件化交互
1.跨页面通信
2.对现有小程序能力增强（扩展能力）
3.贡献小程序UI组件Antd组件库
4.现有native功能完成小程序改造
评审细则：
功能完整40分：独立应用：有3个以上页面，包含与后端的数据交互，包含增删改查常规能力。
业务场景5分：不堆垒无意义的应用，真正为了解决某个方向问题或提高工作效率的背景下而开发应用。
稳定性15分：提供数据大盘，提供error日志并根据数据分析应用目前情况。灰度机制建立回滚能力介绍。
技术考核30分：针对应用中涉及的知识点进行考核，能理解问题要点准确回答。
开发规范10分：代码规范，理由脚手架生成等手段保障代码的规范性，变量命名清晰，文件结构符合规范。
提交审核流程：提交审核流程到师兄->主管 完成审批后 颁发认证证书。
三、过程管理
3.1 周会机制
同步本周需求进展和风险，及时暴露出来方便整体调整把控，遇到的问题记录总结沉淀，及时同步分享给全栈化的所有同学。（纳入全栈化宝典）
现场答疑解惑，回顾上周action和本周action。
拉通团队中相关涉及前端的业务项目，碰撞、探讨，侧重业务、技术结构性共性问题的挖掘、定义和解决，并引导沉淀通用平台能力并推动落地与能力复用推广
3.2 全栈化双周报
【上周action回顾】回顾上一次周报中的action同步更新完成情况。
【总体进展】全栈化目标的关键成果及进展，比如同步完成了多少次培训、学员进步情况等。
【培训计划进展】同步当前培训计划的进展。
【学员工作进展】：明细表格、体现工作明细、时间点和进度，对做的好的同学给予实名赞扬，让大家看见。
【问题总结】针对全栈化推进过程中遇到的问题。
【下一步规划】分享计划、以及文档沉淀计划。 【思考感受】说一下当前全栈化推进过程的思考和推进过程中的感受。
四、结果
【工作量】在过去六个月全栈化六个同学完成了90人/日左右的前端需求工作，每个迭代能完成50%以上的前端开发工作，并且可以做到无线上客诉和风险。（这里包括系分设计、开发、测试验收、设计还原、灰度计划以及上线后的大盘数据监控数据分析等流程）
【成长】而在过程中，我们一半以上我们服务端的同学也成长为了前端应用的owner，做到真正意义上的全栈化工程师。
【沉淀】 我们沉淀了全栈化宝典手册、完善的问题记录、复盘记录文档、和分享培训课程供新人学习提效，加速成长。
五、过程中的思考
5.1 我们踩过的坑
同样的坑会绊倒一样的同学。
需求交付压力大，线上发布风险高。全栈化同学刚上手需求，上线前发现不符合预期导致返工。
全栈化同学需要兴趣导向，更需要完善的培训机制，每个人程度不一样，要及时听他们的反馈和建议，做出及时调整。
5.2 思考
全栈不代表降低要求，全栈是为了提升开发效率，如果质量差，不好维护，反而降低了团队效率。
避免只是多涉猎，而缺少实战，看过不等于会运用，部门提供全栈化的机会是一方面，需要全栈化的同学有坚定的决心和具体的学习计划。
全栈化落地是一个艰辛的过程，但长期来看一定是有价值的，可以很负责任的说我们已经尝到了甜头。过程中有问题，甚至造成返工，这都是预期内，也是必须要经历的，纸上得来终觉浅，绝知此事要躬行说的就是这个意思。
微信扫码关注该文公众号作者