钉钉全栈化实践总结-前端篇

阿里技术

于 2022-11-10 17:00:25 发布

阅读量1.1k

点赞数

文章标签：前端钉钉 java

本文链接：https://blog.csdn.net/AlibabaTech1024/article/details/127791842

版权

作者：马赟阿里云钉钉业务平台团队

一、背景

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

业务团队面临的问题

1）资源问题：目前业务团队在业务支撑方面，前端资源存在较大瓶颈。

2）效率问题：由于前后端的gap，业务、技术、交互等方面的沟通，成本不优

保障策略

专业前端+后端研发全栈化

专业前端：负责业务领域整体前端架构的设计、规划、优化以及负责性较高前端需求实现等

全栈工程师：负责中低复杂度前端需求的全栈化研发

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。

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";
}

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

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

<!DOCTYPE html>
<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: SPA单页面应用与多页面应用的区别