龙空技术网

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

阿里开发者 775

前言:

今天兄弟们对“java实训总结范文”大概比较重视,小伙伴们都需要学习一些“java实训总结范文”的相关内容。那么小编在网摘上汇集了一些对于“java实训总结范文””的相关内容,希望各位老铁们能喜欢,你们快快来了解一下吧!

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

作者 | 马赟(涅羽)

来源 | 阿里开发者公众号

一、背景

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

业务团队面临的问题

面临的问题

保障策略

1、资源问题

目前业务团队在业务支撑方面,前端资源存在较大瓶颈。

2、效率问题

由于前后端的gap,业务、技术、交互等方面的沟通,成本不优

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

专业前端:负责业务领域整体前端架构的设计、规划、优化以及负责性较高前端需求实现等全栈工程师:负责中低复杂度前端需求的全栈化研发

1.1 全栈化的好处1.1.1 具备更强更灵活的资源能力,为后续业务发展蓄力提前准备好全栈化的建设,需求可以快速迭代上线,自给自足,帮助业务快速拿到结果。1.1.2 拓宽知识面,思路考虑更完整提高研发效率,提升解决问题能力,提高排查问题效率,可以快速侦破问题,及时处理问题。向前一步,不给自己的能力设限,扩充自己的知识面,离架构师更进一步。1.1.3 能理解不同岗位的同学的诉求,增强同理心后端同学能理解为什么前端同学会对接口字段提出很高要求,期望后端提供的接口按照开源社区的标准来定义(好的接口是自说明的,不用过多的文档,遵循业界 API 设计规范,使用接口符合人的直觉,接口字段稳定)前端同学能理解为什么后端同学不愿意轻易写特殊逻辑判断(一套模型已经定义得很优雅了,加个特殊分支就破坏了代码的一致性)

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

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

全栈化四部曲

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

step1: 学习前端

前些天关注到这样一个路线图,,用于指导你成为一个合格的开发者需要了解的东西,看完之后获益良多,自觉很适合作为钉钉同学学习前端开发的路线指导。因此进行改造后初步变为钉钉前端开发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="; crossorigin></script>  </body></html>

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

SPA单页面应用

MPA 多页面应用

组成

一个主页面和多个页面片段

多个主页面

刷新方式

局部刷新

整页刷新

URL模式

哈希模式(hash)

历史模式(history)

SEO搜索引擎优化

难实现,可使用SSR方式改善

容易实现

数据传递

容易

通过url、cookie、localStorage等传递

页面切换

速度快,用户体验良好

切换加载资源,速度慢,用户体验差

维护成本

相对容易

相对复杂

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

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

理解MVVM模式、单页面应用、前端路由。掌握框架提供的API方法,比如页面的render原理、数据变更如何更新视图、以及框架的生命周期等。会使用数据状态管理来分发数据到你的页面。

剩余60%,完整内容请点击下方链接查看:

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

标签: #java实训总结范文