【第565期】京东前端架构组团队是如何工作的？

前言

今年五一你在哪里呢？是趁这三天出去旅游还是在家学习或者奶娃呢？

每个公司的前端团队有大有小，或者还是一个人独立战斗的。那么一个高效的团队流程是怎么如何的？那么今天就来看京东JDC架构组负责人@刘威来分享前端团队的工作方式。感谢@极牛授权～

正文从这开始～

一个完整的高效的的前端团队的工作模式主要分为以下几个方面：

产品研发角色

一个完整的互联网产品会由以下人员构成：

创业公司人员往往身兼数职，比如这些角色常常会由一个同学担任UI/UE，PM/UR，FE/RD，RD/OP，当然随着公司的发展，这些角色会逐渐单一化和专业化，最后更会以独立团队出现。

产品研发流程

业务驱动的公司一般是由业务方来提出业务需求，比如采销，而产品驱动的公司一般由产品经理直接来提出需求，具体的研发流程如下：

前端团队角色

1.归属：聚合和分散

2.职级：经理/组长/高级工程师/普通工程师

3.职责：页面制作/脚本开发

4.周边：H5/动效开发/小游戏开发/iOS、Android

前端开发流程

前端工具系统

开发环境：

>>分为本地环境、测试环境、线上环境

系统介绍：

开发流程中系统的使用：

先从code source库新建一个项目，使用命令行工具init命令初始化项目，用Build进行开发，开发完成后，再通过命令行工具Upload一键上传至测试环境，联调结束和测试无误后，增加点击统计，并提交本地代码至git库。

打包编译(Deploy)发布(Publish)系统的使用：

在Deploy系统上拉取git库上的代码，通过线上自动化工具进行在线打包编译，通过Publish系统进行线上自动化部署至CDN，最后上线后进行静态文件缓存更新，流程图如下：

前端协作模式

协作流程如下：

前后端分离可以这样处理：

前端工程化

百度百科关于“软件工程”名词解释：

软件工程是一门研究用工程化方法构建和维护有效的、 实用的和高质量的软件的学科。

工程化要解决哪些问题：

工程化解决方案要点

这是简单说一下JDF京东前端开发集成解决方案(Jingdong front-end integrated solution)中命令行工具和前端模块，如下：

命令行工具

JDF命令工具基于nodejs，介绍如下：

1.跨平台

完美支持windows、mac、linux三大系统

2.项目构建

3.模块开发

可快速方便的对模块进行创建，引用，预览，安装和发布

通过积累，可形成完全符合自己业务的模块云服务

4.模块编译

5.项目优化

6.项目输出

7.项目联调

一键上传文件到测试服务器，方便其他同学开发预览

8.本地服务

9.辅助工具

支持html/js/css文件格式化

支持html/js/css代码压缩

支持html/js/css文件lint，代码质量检查

支持chrome浏览器的LiveReload插件

前端模块

1.前端模块定义

前端模块即widget：包括配置文件、数据源文件、模版文件、样式文件、JS文件、图片文件，如下ui-product-list为一个widget：

1)页面中引用widget用如下代码片断

{%widgetname="ui-product-list"%}

2)很明显html不支持{%%}语法，此时会用到jdf的编译命令"jdf build"，核心是把ui-product-list.json中的json数据打到ui-product-list.vm模板上，最后输出静态html片断；同时.scss编译成.css，并且在header头增加样式引用：

页面尾部增加js引用:

3)输出的时候使用jdf output会把多个wiget中js/css引用变成combo的形式

如：

??/widget/ui-product-list/ui-product-list.css,/widget/header/header.css/widget/footer/footer.css

这样就算页面引用N多个模块，也只会发出一个请求

2.前端模块使用方法

3.前端模块云平台

搭建成本非常低，只需配置好一台FTP服务器，通过FTP服务器储存，下载，以及分配相关用户权限，版本管理依赖于widget中的componet.json中的version，使用方便，可以使用jdf命令行工具进行发布，下载。