美文网首页
如何打造高效的vue技术栈团队

如何打造高效的vue技术栈团队

作者: 空无一码 | 来源:发表于2018-12-24 20:26 被阅读280次

    本人毕业于北京某211高校,近几年一直从事前端研发相关的开发和管理工作,虽然一开始先使用的是react,但是近一年多主要还是使用vue。为了更好地开展工作,所以想整理分享一下自己对打造一个高效的vue技术团队的拙见,以此和大家交流进步。

    有很多还只是我的想法,有待实际工作中加以完善,本文将持续更新。。。

    前言

    一般只有前端人数达到了稳定在6人以上,才有必要考虑技术栈选型,和围绕该技术栈进行合理的团队建设。

    据我所知,近两年,前端开发新项目的技术选型,选择最多的是基于react的技术栈,其次是基于vue的技术栈,请看2018年12月的有关数据:

    • 从npm官方仓库周下载量来看, vue 为789,637, react 为 3,629,659 ,从国内的cnpm淘宝镜像的月下载量来看,vue为237,845, react为 935,420 ,react 和vue的下载量,国内约为3.5倍,国外将近5倍;
    • 而另外一个指标github上的star来看,react为118,254, vue为122,990,vue已经超越react;
    • react 是Facebook公司开源维护,而vue是华裔尤雨溪个人维护,不过一年多以前他组织了一个官方团队专门去开发维护,当然他本人推荐基于Google的有关开发插件比较两个框架用户更合理。

    以上只是简单对比了一下react和vue的总用户数,不分孰优孰劣,一个团队打造怎么样的技术栈主要还是由团队的负责人及架构师基于对某个技术栈的熟悉度和业务实际来抉择。

    不过,从过去一年的新增量来看,vue显然排在第一,特别是在国内,vue成了多数前端负责人和架构师技术选型的首选,所以还是很有必要探索一下本文的话题。

    对我来说,react技术栈和vue技术栈 掌握程度都差不多,react更偏 使用RN开发原生应用,而vue更偏h5嵌入原生APP,weex只是简单看过。

    写了完本篇后,我还会考虑 整理分享 如何打造高效的react技术栈团队的一些思考。

    vue 周边生态

    截止2018年12月24日,vue各核心库的最新版本如下:

    • vue 2.5.21(2017.10.13发布2.5.x后已经一年多了,下一个大版本 vue 3.x 预计19年下半年发布);
    • vuex 3.0.1 (官方状态库已经一年多没更新了,比较稳定);
    • vue-router 3.0.2 (18年11月更新的,主要一些小功能和改了一些bug);
    • vue-cli 2.9.6 (官方脚手架7个月前更新就会把精力投入到3.x中去了, 且命名为@vue/cli);
    • @vue/cli 3.2.1 18年12月周下载量为62,451,已经超过 2.x 的22,798了;

    下面,再看看社区开源主流的vue组件库:

    • vuetify 最新版本为1.3.15,npm周下载量为85,978, star为15,479(国外社区维护,同时支持移动端和pc端);
    • element-ui 最新版本为2.4.11,npm周下载量为149,248, star为33,640(饿了么开源的PC端组件库);
    • mint-ui 最新版本为2.2.13,npm周下载量为8,392, star为13,124(饿了么开源的移动端组件库);
    • ant-design-vue 最新版本为1.2.2,npm周下载量为2,513, star为3,405(基于阿里的antd设计);
    • iView 最新版本为3.2.1-rc.1,npm周下载量为22,192, star为18,958 (TalkingData 开源的,主要服务于 PC 界面的中后台产品);
    • vux 最新版本为2.9.2(已经半年没有更新了),npm周下载量为3,255, star为14,807 (个人开发维护为主的移动端组件库);
    • cube-ui 最新版本为1.12.6,npm周下载量为1,756, star为4,966(滴滴开源的移动端组件库);
    • mand-mobile 最新版本为2.0.0-rc.4,npm周下载量为641, star为1,166(滴滴开源面向金融场景的移动端组件库);

    另外 vue官方推荐的请求库axios的最新版本为0.18.0,将近一年不更新了,比较稳定,周下载量为3,550,138,star为52,809,用户还是很多的。

    而vue开发移动应用的解决方案weex-toolkit最新版本为1.3.11,周下载量为633,star 迁移至Apache前为17,317, 迁移后为11,403。

    从以上的数据来看,除了官方核心库和请求库使用axios外,我会优先考虑使用 element-ui 作为PC端组件库的基础,而使用cube-ui作为移动端组件库的基础,按照先熟练使用,后二次开发的思路,面向公司业务迭代,而使用weex,一般需要和原生团队配合,这里不过多展开。

    vue有关学习资料

    基于上一步选定的vue核心库、第三方请求库和第三方开源组件库,本节列一下相关的学习文档和视频教程。

    关于vue

    关于vuex

    关于vue-router

    关于axios

    关于element-ui

    关于cube-ui

    推荐的vue视频教程

    入门学习文档

    对于前端小白来说,建议先去看一下入门的学习文档和入门的vue2.5视频教程,然后再根据需要去看对应的vue官方文档,如果作为架构师,则很有必要在通读官方文档的基础上去学习源码。

    vue 技术栈 分工

    前面讲了很多基础的前置内容,本节才来到核心内容,只有当一个团队稳定在6人以上的时候,才有必要去考虑技术栈及其团队的建设问题,让团队高效的产出。

    对于非扁平化管理的团队,当人数大于6人时,一般会设立一个前端负责人或称为前端研发经理,进行日常的请销假管理和例会的组织。

    而对于扁平化管理的团队,前端负责人就不会有太多的行政管理任务,更多的是人员招募,业务沟通和任务分工,忙的时候不仅要做架构,还需要写大量的业务代码。

    人员搭配

    我们暂且以 6人为参考,多于6人按照比例去参考。如果是6人的话,建议搭配如下:

    • 负责人 1名:负责招募,业务沟通,组织例会和技术选型等;
    • 架构师 1名:负责技术选型和架构,关注vue核心库和组件库的开发维护;
    • 高级研发 1名:业务开发的主力,熟练掌握vue各库和组件库的使用;
    • 中级研发 2名:业务开发的主力,快速实现业务需要;
    • 初级研发 1名:协助业务主力整理代码和自测,以提高交付质量;

    鉴于 目前高级研发 炙手可热,接下来两年,多数团队,还是会出现,负责人兼任架构的情况,同时高级研发也比较缺,而中级研发则比较多。

    所以负责人会比较辛苦,把中级开发培养为高级研发,把高级研发培养成架构师就显得很重要。

    培养机制

    现在很多团队都急于实现业务,而忽略了人才的培养,导致很多研发写业务写吐了,以至加快了跳槽的频率。

    对于企业内部的技术培训,还是相当有必要的,对于基础的培训,每周都有必要组织一次,结合一周业务开发发现的问题进行剖析。

    而对于于日常所用的框架和库,则需要安排不同的研发定期 一对一 带着去关注更新日志,分析源码,以及鼓励其写技术文章去进行总结,并分享给团队。

    对于vue 技术栈,带着技术最好的研发 关注vue的官方库vue,vuex 和vue-router, 再带着一个技术不粗的关注 所用的组件库,还需要带着一个人专门关注脚手架。

    vue 技术栈 团队管理

    这主要是负责人需要考虑的,我觉得应该弱化管理,强化服务,就是负责人,不是领导,而是团队的服务员,既要承担责任,完成公司业务需要,又要兼顾研发的学习成长需要,让大家快乐工作。

    那么怎么去做呢?首先,从自身做起,在技术和品行上做好表率,对前沿技术敏感,工作踏实认真负责;其次,以规则管理团队,而不是自己的主观意志,通过逐步确立规则,带头遵守规则,逐步形成用规则确保团队和谐和高效的配合沟通;最后,定期轮流组织例会,总结一段时间的情况,制定措施,并抓好落实。

    结语

    以上只是简单的写了写,方便开展工作,打造高效团队并不容易,用心去做是基础,特别是在不断的实践中去动态改进。

    相关文章

      网友评论

          本文标题:如何打造高效的vue技术栈团队

          本文链接:https://www.haomeiwen.com/subject/vqmzkqtx.html