21CN前端开发团队之发展史

蔡立勋

微信：Qcalent

目录

21CN前端概况

实践经验与心得

前端发展展望

21CN公司简介

是一个拥有超过十年互联网从业经验的国有企业，

是中国电信集团下属的全资子公司，

也是中国电信旗下最具媒体价值、排名最靠前的互联网品牌企业。

近年来致力于移动互联网和云计算领域的产品研发。

中国电信综合平台开发运营中心

世纪龙信息网络有限责任公司（21CN）

媒体资讯 电子邮箱 移动应用 云存储

产品与业务

16年来，我们的脚印

21CN前端概况

团队概况

用户体验中心

用户体验研究部 设计部 前端开发部

产 品

技术

21CN前端诞生于2010年，隶属于用户体验中心下的二级部门，在包括产品、设计、技术的三大专业

职族下偏UED，目前超过30名成员。

团队职责

1. 实现界面和交互

2. 设计成果输出

3. 最优化解决方案

4. 提升用户体验

1. 编写结构良好、语义化的HTML和兼容

的CSS，高保真输出界面；

2. 实现具有良好性能的界面组件、交互功

能，通过技术改善用户体验；

3. 负责产品易用性改进、加载速度和界面

技术优化；

团 队 成 员

发展状况

0

10

20

30

40

50

60

2010 2011 2012 2013 2014 2015 2016

人员

业务概况

2010-2012

2013-2014

2014-2015

前端负责的业务逐年增多，价值逐步得以体现。

21CN门户 彩版/触屏版 头版客户端

天翼云 189邮箱 天翼帐号

流量宝

云通讯录

企业邮箱 微 企 VGO

WebPage HTML5 Hybrid

WebApp

FullStack

H5Game

JS SDK

实践经验与心得

@2010-2012年

• 网站版式各异、频道个性化浓；

• 页面改版频繁、运营活动增多；

• 设计风格已陈旧、不符合用户审美观；

问 题

对 策

• 简单粗暴：整站改版重构；

• 多个统一：统一布局、统一头尾等；

• 模块化、组件化；

• 引入栅格系统；

工业化模块化

总 结

• 渐渐增强、优雅降级；

• 懒加载及容错机制；

• Yahoo性能优化规则，使用YSlow、

HttpWatch优化前端性能；

• 将规范转化为工业化工具；

工业化模块化

12个 一级频道首页

超过38个 二级频道页

超过86个 次级频道页

搭建页面 选择主题 一键发布

工业化工具

内容模块的规范化，统一调用

交互组件的整合，简单易用

通过拖拽、自由组合的方式生成页面：

@2013-2014年

前后端分离

• 脚本开发分工不明确；

• 页面脚本多，管理混乱；

• 请求泛滥，页面加载慢；

问 题

对 策

• 展现层及交互逻辑由前端实现；

• 后台专注接口服务；

• 引入bootstrap框架；

• 脚本依赖管理及分层架构；

前后端分离

总 结

• 通过前后端团队结构调整，实现前后端分离，

后端负责实现稳健的业务，前端负责实现操作

流程及UI层；

• 采用 （通用模块定义）规范开发，达到浏览

器端模块化开发的目的；

• 搭建一套完善的前端开发脚手架，为后续业务

发展奠定基础；

189邮箱 21CN邮箱 企业应用

推广到所有产品线：

Back-

bone

Boot-

strap

Seajs SPM

NPM Grunt

@2014-2015年

全栈式开发 http://mean.io/

团队协作工具：TeamWork

其他……

多套项目管理软件接入需求池

设计

前端

测试

用研

需求进入UED内部流转 输出成果及各类统计

日报/周报

效能数据

项目甘特图

文件流转 专业管理

产品/运营

人事/上级

UED职能

TeamWork

HTML5创意平台

各类奖品

微秀

体验平台

营销配置平台

媒体互动系统

用户（前端&运营）

数据统计

信息收集

活动配置

登录注册

赚取消耗

授权认证

审核

发布&传播

天翼帐号

收获了什么？

1 需求分析 2 交互原型 3 视觉设计

4 前端开发 5 模拟场景测试 6 功能开发

7 质量测试 8 产品上线

可用性报告、竞品分析 交互设计、信息架构

高保

真设

计

界面及交互高保真实现 设计最终产物交付研发

开发

接口

，功

能实

现

达上线状态、质量合格

参与可行性分析 交互动作、效果

界面评审

界面及交互执行

前后端联调

核心职能：视觉规范执行与交互实现

前端工作流程

开发&测试&发布

编码

构建工具

Compass自动

雪碧、压缩合并

执行批处理命

令、自动打包

提交发布

• CSS编程化（SASS语法编程）

• JS模块化（采用CMD规范）

• HTML模板化（JS模板编译器）

• NPM模块（CSS/JS检查、文件侦

测、FTP上传等）

• Compass框架（合并图片、支持

高清屏、浏览器内核、CSS3矢量

等）

• MD5映射（业务代码）

• 自动提交静态资源SVN

一般开发流程

质量完成标准

四大方面 的自测项

兼容适配 加载速度 代码逻辑 设计还原度

开发完成标准

序号 标准

1 代码经过单元测试

2 代码经过同事交叉检查，确保代码符合编码标准，业务逻辑没有隐患

3 代码被提交到源码库，而且提交说明以保证可追溯

4 提交的代码没有破坏构建

5 兼容测试通过（针对PC端、手机端，覆盖所有浏览器的兼容策略）

6 加载速度自测（PageSpeed等工具）

7 通过设计师对视觉/交互还原度检查

前端发展与展望

岗位发展展望

用户体验 开发体验

</> • 编码效率

• 复用扩展

• 开发调试

• 打包部署

“节流” “开源”

• 高还原度

• 加载迅速

• 交互流畅

• 智能人性

创意型 开发型

T型人才：全栈工程师？

复合型 宽泛扎实的专业知识

T型人才示意图

打破专业壁垒：产品、设计、交互、后端等

专业深入的技术技能

精准娴熟的工程经验

专业深度：编程技能、框架应用、开发技巧、调试工具等

不仅仅是MEAN

前端发展展望

界面实现 强交互、富逻辑的展现 前后端的分层

从单一到多面，由点到面的演进

前端技术部

部门架构

应用开发部

邮箱研发部

XXX部

基础平台部 工具/框架/服务

完善职能，形成

前端专有技术体

系，构建平台化

的前端生态。

勿忘初心，方得始终。

思 考

• 前端工作依赖于设计及后端，如何提高协同效率？

• 前端解决方案产品化如何应对产品需求频繁修改？

谢谢