请选择 进入手机版 | 继续访问电脑版

大唐名人网

 找回密码
 暂停注册
大唐名人网 门户 IT 查看内容

京东前端架构组团队是如何工作的?

2016-4-26 19:37| 发布者: admin| 查看: 189| 评论: 0

  知乎上曾提出过这样一个问题“大公司需要什么样的前端架构”,前端工程化意识强的大公司,往往都有一个完整的技术体系和高效的前端团队和协作流程。前端是一个产品的脸面,如何维护好我们的面子问题,京东JDC前端架构组负责人刘威为我们深度剖析前端团队的工作方式。

  本次分享来自于极牛技术实践分享系列活动。 极牛技术实践分享系列活动是极牛联合顶级VC、技术专家,为企业、技术人提供的一种系统的线上技术分享活动,每期不同的技术主题,和行业专家深度探讨,专注解决技术实践难点,推动技术创新。

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

  产品研发角色

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

  PM:产品经理(完成产品的构思,决策,规划,输出含有项目功能点的产品需求文档)

  UI:视觉设计师(负责产品的视觉风格设计)

  UE:交互设计师(负责产品的交互设计)

  UR:用户研究员(负责设计和实施各种客户满意度、需求等调研项目,分析相关数据,输出强有力研究报告,协助产品经理改进产品)

  FE:前端工程师(负责高保真还原UI的设计搞以及UE的交互,配合RD完成接口数据的联调和上线)

  RD:后端工程师(编写后台程序,设计数据库,和FE一起完成实现PM的产品功能点)

  OP:运维工程师(负责线上和测试机器的环境搭建和维护)

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

  产品研发流程

  

京东前端架构组团队是如何工作的?

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

  1.需求和功能最终会由产品经理进行分拆和细化,输出带有产品功能点的产品原型;

  2.用研会对相关产品原型的需求进行用户调研和问卷调查,协助产品对需求做好合理有效的把控;

  3.交互和视觉会根据产品原型的功能点进行视觉设计和交互设计,输出视觉稿和交互原型;

  4.前端会根据视觉设计稿和交互原型,输出带有完整的交互的高保真静态页面;

  5.后端进行开发,包括需求分析、设计、编码等环节;

  6.前后端进行联调,联调的差不多时候,会把项目测试地址发给产品进行功能点把控,遗漏的功能点进行补充开发,同时发给视觉设计师,因为设计师对视觉、颜色的敏感度要比前后端、测试强很多,有时候测试也发现不了某个色值在网页和设计稿的具体差异,所以需要进行设计效果确认;

  7.测试工程师在项目设计阶段编写测试用例,收到前后端的测试代码,进行功能测试、UI测试、接口测试、安全测试以及兼容性测试;

  8.上线阶段分为两种,第一种前端先独立上线新版号的静态资源至CDN,后端再次上线,最后修改静态资源的线上引用版本号,第二种静态资源未发布至CDN而是放在后端代码工程里,那么前后端会一起上线;

  前端团队角色

  1.归属:聚合和分散

  >>聚合:前端人员工位集中在一起,需求由前端经理统一分配,团队归属于UED,当然也会细化出几个业务小组,对接不同的业务线,方便管理。聚合的好处是管理非常方便,由于前端人员在公司里相对较少,聚合也会使前端团队成员的归属感非常强,同时相关前端问题可以集中高效解决

  >>分散:相对聚合来讲,分散后前端团队一般归属于大业务线的研发经理统一管理,可能是由原来UED前端团队拆分到各个业务线里,也可能是大部门自己组建成独立前端团队,有一个问题就是分拆后团队间沟通,成长不如聚合流畅

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

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

  >>页面制作:高保真还原视觉设计师的设计稿和交互工程师的交互需求

  >>脚本开发:负责页面交互的技术实现,配合后端完成数据接口的前台调用

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

  >>H5:webapp和app内嵌页面的前端开发

  >>动效开发:完成设计师精心设计的动态效果和动画效果,动效逐渐会形成一个岗位

  >>小游戏开发:大型促销活动的游戏开发,大型节日相关的彩蛋和节日氛围脚本开发

  >>iOS、Android:多端开发逐渐成为蓄势,随着phonegap/reactNative等框架的出现,前端涉及的范围也越来越广了

  前端开发流程

  

京东前端架构组团队是如何工作的?

  项目构建:生成标准化项目文件目录

  模块引入:引入已开发好并且可以在当前项目中使用的模块

  模块编译:把模块依赖的模板文件/js/css/json数据文件引入页面中,scss编译成css,数据打入模板生成html

  输出:主要是进行性能优化,静态资源加上cdn,css sprite,js/css/图片压缩

  联调:把前端本地的静态文件上传至测试服务器或者后端机器

  上线:把项目中的静态资源包括js/css/图片上线至CDN

  前端工具系统

  

京东前端架构组团队是如何工作的?

  开发环境:

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

  系统介绍:

  >>Code Source---代码库,常见如svn或者git;

  >>命令行工具---应用于开发流程中,比如项目构建,模块编译,输出等集成工具;

  >>性能监控系统---对页面加载时间,比如首屏加载时间,domready时间,onload时间,分辩率,浏览器类型等的统计和监控;

  >>点击统计系统---对页面元素的点击次数或者某个区域点击量统计,并生成报表;

  >>Deploy打包编译系统---对静态文件进行线上抽取、打包、压缩、合并,并生成一个上线任务包;

  >>Publish文件发布系统---把压缩后的静态文件包发布至CDN的系统;

  开发流程中系统的使用:

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

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

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

  

京东前端架构组团队是如何工作的?

  前端协作模式

  协作流程如下:

  前端页面制作

  前端交互实现

  前后端定数据接口(前后端分离)

  后端开发

  前后端联调

  前端上线

  后端上线

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

  >>页面分拆出独立的widget模块,widget有模板/js/css/json数据文件,每个widget中json数据文件是在项目开发前,前后端依据当前项目的功能点提前约定好

  >>前端可在本地基于json数据文件写模板,后端也可以基于json数据文件写后端业务逻辑相关的数据接口

  >>联调时候,前端把模板传至公共的测试环境里,后端把数据打到模板上渲染出页面。

  前端工程化

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

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

  工程化要解决哪些问题:

  适合自身团队发展的开发流程和开发规范,包括代码规范、模块化规范(提高生产力)

  一套自动化的项目发布/部署方案(提高系统灵活性)

  一套自动化代码质量检测方案(提高系统可靠性)

  比较好的性能优化(提升用户体验)

  工程化解决方案要点

  前端命令行工具:工具编译引擎、核心模块、扩展等;

  前端模块:模块的定义、安装、创建、调试、预览、发布,前端模块构建平台建设;

  前端组件:基础库和模块加载器的选型、组件库的建立;

  前端规范:编码规范、目录规范、组件规范等;

  前端文档:前端必备的文档;

  前端开发流程:项目生成、编译、输出、联调、部署、上线;

  前端性能优化:pc和h5页面性能优化的方式和思路;

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

  命令行工具

  JDF命令工具基于nodejs,介绍如下:

  1.跨平台

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

  2.项目构建

  生成标准化的项目文件夹

  支持本地,联调,线上三种开发流程

  每个项目都拥有一个单独的配置文件,按选项统一编译

  3.模块开发

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

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

  4.模块编译

  支持模块编译,内置模块编译引挚

  支持将vm和smarty模版编译为html

  支持将sass和less编译为css

  支持ES6

  5.项目优化

  自动将页面中的js、css引用转换成combo请求格式

  自动压缩优化js、css、png文件

  6.项目输出

  默认给所有静态资源添加CDN域名前缀或后缀戳

  支持cmd规范,自动提取文件id和dependencies,压缩时保留require关键字

  支持png图片压缩插件,将png24压缩为png8

  自动生成css雪碧图,并更新background-position属性值

  可将小图片一键生成base64编码

  文件编码统一化,即无论当前文件格式是gbk,gb2312,utf8,utf8-bom,统一输出utf8

  7.项目联调

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

  8.本地服务

  支持开启本地服务器,方便调试

  支持本地静态文件预览,内置本地开发调试服务器,以及当前目录浏览

  支持实时监听文件,文件被修改时会自动编译成css,并刷新浏览器

  实时在控制台输出错误信息,方便定位代码错误

  9.辅助工具

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

  支持html/js/css代码压缩

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

  支持chrome浏览器的LiveReload插件

  前端模块

  1.前端模块定义

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

  ---ui-product-list[文件夹]

  ---component.json[配置文件]

  ---ui-product-list.json[数据源文件]

  ---ui-product-list.vm[模板文件或者.smarty文件]

  ---ui-product-list.scss[scss文件]

  ---ui-product-list.js[js文件]

  ---images[图片文件]

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

  {%widget name="ui-product-list"%}

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

  <link type="text/css" href="/widget/ui-product-list/ui-product-list.css" source="widget"/>

  页面尾部增加js引用:

  <script type="text/javascript" src="/widget/ui-product-list/ui-product-list.js" source="widget"></script>

  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.前端模块使用方法

  模块安装:(jdf widget -install xxx ) 解决可复用的问题,不用每次都新建,可以先在模块云上查找合适的模块,然后下载至当前项目

  模块新建:(jdf widget -create xxx ) 在本地新建一个模块

  发布模块:(jdf widget -publish xxx ) 解决了共享和沉淀的问题,项目结项,可以把可复用或者修改后的模块提交至模块云,审核通过就会发布至模块云上

  模块预览:(jdf widget -preview xxx ) 用于调试单个模块,同时解决了团队协作问题,项目分成多个独立模块,各负其责

  模块列表:(jdf widget -list) 展示模块云上所有模块的列表

  3.前端模块云平台

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

  以上就是一个完整高效的前端工作团队和协作模式。

  关注更多技术大佬分享,订阅微信公众号“极牛”


相关阅读

投稿、合作、联系:admin2#tangedu.cn| 小黑屋|网站地图|大唐名人网 |京ICP备07504790号|

GMT+8, 2019-9-17 05:21 , Processed in 0.092889 second(s), 23 queries .

Powered by Discuz!

© 2001-2015 Comsenz Inc.

返回顶部