- 前端日常使用的工具与框架（新人必看） 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 周会机制
定期参与内网前端相关文章或者专题分享会的学习，并在周会/周报/专项分享会中分享相关学习心得，半年至少2次，纳入KPI中
高效周会一小时：
- 同步本周需求进展和风险，及时暴露出来方便整体调整把控，遇到的问题记录总结沉淀，及时同步分享给全栈化的所有同学。（纳入全栈化宝典）
- 现场答疑解惑，回顾上周action和本周action。
- 拉通团队中相关涉及前端的业务项目，碰撞、探讨，侧重业务、技术结构性共性问题的挖掘、定义和解决，并引导沉淀通用平台能力并推动落地与能力复用推广
3.2 全栈化双周报
《全栈化双周报》能最有效且最直接让部门知道我们做的事，让问题被暴露出来从而接受一些好的建议做出及时调整，同时让全栈化做的好的同学被看见！所有同学要求在周报中增加思考总结部分，反馈这段时间遇到的结构性问题、思考与解决或者业务、技术趋势的判断，主管以及虚拟前端主管有针对性进行解答。
直接上模板：
- 【上周action回顾】回顾上一次周报中的action同步更新完成情况。
- 【总体进展】全栈化目标的关键成果及进展，比如同步完成了多少次培训、学员进步情况等。
- 【培训计划进展】同步当前培训计划的进展。
- 【学员工作进展】：明细表格、体现工作明细、时间点和进度，对做的好的同学给予实名赞扬，让大家看见。
- 【问题总结】针对全栈化推进过程中遇到的问题。
- 【下一步规划】分享计划、以及文档沉淀计划。
- 【思考感受】说一下当前全栈化推进过程的思考和推进过程中的感受。
四、结果
以我所在的部门为例：
- 【工作量】在过去六个月全栈化六个同学完成了90人/日左右的前端需求工作，每个迭代能完成50%以上的前端开发工作，并且可以做到无线上客诉和风险。（这里包括系分设计、开发、测试验收、设计还原、灰度计划以及上线后的大盘数据监控数据分析等流程）
- 【成长】而在过程中，我们一半以上我们服务端的同学也成长为了前端应用的owner，做到真正意义上的全栈化工程师。
- 【沉淀】 我们沉淀了全栈化宝典手册、完善的问题记录、复盘记录文档、和分享培训课程供新人学习提效，加速成长。
五、过程中的思考
5.1 我们踩过的坑
- 同样的坑会绊倒一样的同学。
通过全栈化宝典沉淀出来。每周同步大家遇到的问题原因、背后的知识点以及解法。
- 需求交付压力大，线上发布风险高。全栈化同学刚上手需求，上线前发现不符合预期导致返工。
这种问题本质上是过程管理没有做到位，一定是需求过程管理机制上出了问题，文章所述的每一环节都很关键。
- 全栈化同学需要兴趣导向，更需要完善的培训机制，每个人程度不一样，要及时听他们的反馈和建议，做出及时调整。
5.2 思考
- 全栈不代表降低要求，全栈是为了提升开发效率，如果质量差，不好维护，反而降低了团队效率。
- 避免只是多涉猎，而缺少实战，看过不等于会运用，部门提供全栈化的机会是一方面，需要全栈化的同学有坚定的决心和具体的学习计划。
- 全栈化落地是一个艰辛的过程，但长期来看一定是有价值的，可以很负责任的说我们已经尝到了甜头。过程中有问题，甚至造成返工，这都是预期内，也是必须要经历的，纸上得来终觉浅，绝知此事要躬行说的就是这个意思。
