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

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

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

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

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

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

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

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

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

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

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

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

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

DingStudio:钉钉前端调试工具 (外网可能访问不到,正在开源计划中)外部同学可以使用SwitchyOmega

JSAPI 是钉钉前端跨端解决方案,这里可以在钉钉的开放平台文档找到你想要的端能力

框架使用:React H5 小程序 重要知识讲解课程。(手把手教学指导)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注