作为部门的前端“独苗”，我的钉钉全栈化实践总结

　　

　　阿里妹导读

　　作为前端总会在业务上面临资源、效率等问题，本文讲述如何发挥专业前端在特殊位置的价值，让整个人力的利用效率最大化，并且可以通过实践将这套方法论贡献给有需要的团队去复用实践！

　　一、背景

　　全栈工程师一直是个热议的话题，我所在的部门是钉钉的智能办公-场景技术，作为部门的前端“独苗”，我要一个人收口部门十几条业务模块的前端工作，一个人要pk20来个服务端同学，同全局视角来看这显然不是长久之计，我们在业务上会面临资源、效率等问题，而我们的保障策略是推进专业前端+后端研发全栈化的方式来应对。其次可以发挥专业前端在特殊位置的价值，让整个人力的利用效率最大化，最后可以通过实践将这套方法论贡献给有需要的团队去复用实践！

　　业务团队面临的问题

　　1.1 全栈化的好处

　　1.1.1 具备更强更灵活的资源能力，为后续业务发展蓄力

　　提前准备好全栈化的建设，需求可以快速迭代上线，自给自足，帮助业务快速拿到结果。

　　1.1.2 拓宽知识面，思路考虑更完整

　　提高研发效率，提升解决问题能力，提高排查问题效率，可以快速侦破问题，及时处理问题。

　　向前一步，不给自己的能力设限，扩充自己的知识面，离架构师更进一步。

　　1.1.3 能理解不同岗位的同学的诉求，增强同理心

　　后端同学能理解为什么前端同学会对接口字段提出很高要求，期望后端提供的接口按照开源社区的标准来定义（好的接口是自说明的，不用过多的文档，遵循业界 API 设计规范，使用接口符合人的直觉，接口字段稳定）

　　前端同学能理解为什么后端同学不愿意轻易写特殊逻辑判断（一套模型已经定义得很优雅了，加个特殊分支就破坏了代码的一致性）

　　二、如何全栈化-我们怎么做的？

　　简单来讲参与全栈化的同学要做到四个步骤，我将围绕服务全栈化同学的视角，展开讲述我们落地过程的细节与机制。直接上图：?

　　

　　全栈化四部曲

　　备注：Step4 持证上岗 不是适用于所有部门落地全栈化作为参考，也不是衡量学习前端的唯一途经。

　　step1: 学习前端

　　前些天关注到这样一个路线图，https://github.com/kamranahmedse/developer-roadmap，用于指导你成为一个合格的开发者需要了解的东西，看完之后获益良多，自觉很适合作为钉钉同学学习前端开发的路线指导。因此进行改造后初步变为钉钉前端开发RoadMap，作为部门新人学习前端的一个导向。请注意这些路线图的目的是给你一个轮廓，并在你困惑的时候停下来看看接下来该学习什么的时候指导你，工具和框架经常都会变化，我们更应该了解为什么某个工具比其他工具更适合用在一些情况。

　　1.前端开发学习RoadMap

　　这份图多为个人意见。

　　

　　2.资料补充（RoadMap每个节点代表一个里程碑）

　　2.1 阶段一：基础知识学习：

　　

　　基础不牢地动山摇，前期打好一个基础很重要。

　　这部分的知识点比较基础，要先具备对基础知识的掌握。

　　2.2 阶段二：4-7 前端工程化学习

　　

　　理解并掌握前端如何使用webpack等工具对你的代码进行打包配置，掌握前端资源部署的原理。

　　前后端分离：从服务端视角理解前后端分离。

　　

　　图：前后端分离/未分离

　　分离前服务端的代码会有一个VM模版引擎写在java工程中，当发起URL Requst时，会返回这个HTML Response。

　　Controller来填入数据，同时View层来模板引擎消费数据，处理数据展示。

　　变化1: 模板不再出现UI逻辑。

　　变化2: SPA单页面应用 与多页面应用的区别

　　2.3 阶段三：8-11前端框架应用学习?

　　

　　选择一个前端框架，我认为学习前端框架有三个重点：

　　理解MVVM模式、单页面应用、前端路由。

　　掌握框架提供的API方法，比如页面的render原理、数据变更如何更新视图、以及框架的生命周期等。

　　会使用数据状态管理来分发数据到你的页面。

　　2.4 ?阶段四：前端工具框架介绍及补充

　　阿里集团前端体系

　　

　　前端日常使用的工具与框架（新人必看） 5天掌握

　　工具

　　图片上传服务器

　　前端国际化文案解决方案

　　Done蓝湖：

　　前端设计稿

　　Aone：管理需求平台

　　需求空间

　　DBase：

　　前端项目创建及发布平台

　　DEF：

　　前端应用构建平台

　　DingStudio：钉钉前端调试工具 （外网可能访问不到，正在开源计划中）外部同学可以使用SwitchyOmega?

　　配合whistle进行调试。

　　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使用）

　　3.前端课程培训

　　培训内容：详细的培训计划按月纬度排出来

　　前端基础知识培训。HTML CSS JS

　　框架使用：React H5 小程序 重要知识讲解课程。（手把手教学指导）

　　前端工具使用培训：钉钉前端调试工具、监控工具、构建工具等。

　　课程主要以前端核心基础知识、框架使用等偏实战为准来进行培训分享，目的是为了给到全栈化同学实实在在的帮助和指导。这里面需要注意的是课程的定制需要根据全栈化的进展要做出及时的调整，比如有一些知识点是同学们呼声比较高的、或者在最近实践中遇到频次比较高的问题类似监控使用等可以穿插进来培训分享，及时查漏补缺。

　　培训频次：1周一次，1-2小时。

　　培训形式：会议室&部门群直播。

　　step2 实战上手

　　这一环节一定是最有效也最重要的环节，也是学习前端最快速的方式。

　　全栈化同学应当参与前端需求的评审。

　　完成前端需求的系分技术方案，包括实现思路、系统结构图、评估影响面，具体看‘系分文档模板’。

　　过程中遇到问题及时与前端师兄对焦。推动全转化的人要把自己当成一个项目经理对全栈化的同学进行风险管理，有每日对焦完成进度、风险提早暴露。

　　没个迭代都要保障全栈化同学在前端的投入时间，短期看不到收获，但长期来看是一定有价值的。

　　step3 沉淀

　　钉钉全栈化宝典-自查手册

　　?https://www.yuque.com/fe9/basic/qvoo0d?

　　里面记录了70余篇关于全栈化落地过程中的文档沉淀，其中包括：

　　开发遇到的前端问题以及背后的知识点总结。

　　项目复盘、问题复盘。

　　培训课程以及分享内容。

　　后续期待更多同学参与共建，一起让前端开发更加简单。这是一个长期需要去做并且一定会有回报有价值的事情，需要大家一起来共建，让更多的人参与进来一起进步。

　　step4 认证检验

　　玩游戏打怪会升级，前端开发也一样。

　　因此我们需要落地一个机制用来检验前端开发同学对前端知识的掌握及学习成果具体对应在哪个等级上。

　　

　　以上是以我们钉钉智能办公认证为例，针对每一个阶段都做了详细的要求说明。

　　认证形式为答辩形式：参与全栈化的同学将自己的材料总结后现场进行功能展示，由评委来进行打分。以上是以我们钉钉智能办公认证为例，针对每一个阶段都做了详细的要求说明。

　　中级认证要求

　　1.完成一个页面的开发，并可跑起来

　　2.有点击事件

　　3.有使用jsapi

　　4.有使用引入npm包并且运行

　　5.页面元素较为丰富，达到1/2 屏（iphoneX机型标准)

　　6.DingDesign组件与自定义组件至少有一个

　　7.有arms监控代码

　　8.有组件化交互

　　9.有状态存储器Redux

　　高级认证要求

　　1.跨页面通信

　　2.对现有小程序能力增强（扩展能力）

　　3.贡献小程序UI组件Antd组件库

　　4.现有native功能完成小程序改造

　　5.可用数据指标衡量的性能优化

　　代码规范

　　组件优先使用AntDesign组件https://ant.design/docs/react?

　　像素单位统一使用rpx

　　图片统一采用外链，mediaId或iconfont，不要使用相对路径引入

　　代码需要经过eslint检测（可以直接使用命令tnpm run lint:fix 修复代码）

　　整体目录清晰、命名规范

　　有容错机制（如对象序列化必须 try..catch，接口请求有异常处理）

　　评审细则：

　　功能完整40分：独立应用：有3个以上页面，包含与后端的数据交互，包含增删改查常规能力。

　　业务场景5分：不堆垒无意义的应用，真正为了解决某个方向问题或提高工作效率的背景下而开发应用。

　　稳定性15分：提供数据大盘，提供error日志并根据数据分析应用目前情况。灰度机制建立回滚能力介绍。

　　技术考核30分：针对应用中涉及的知识点进行考核，能理解问题要点准确回答。

　　开发规范10分：代码规范，理由脚手架生成等手段保障代码的规范性，变量命名清晰，文件结构符合规范。

　　

　　认证权重占比参考

　　提交审核流程：提交审核流程到师兄->主管 完成审批后 颁发认证证书。

　　充分认可并认可全栈化同学的产出和成长！

　　三、过程管理

　　3.1 周会机制