SlideShare a Scribd company logo
1 of 53
Download to read offline
百度前端
基础平台分享
雷志兴 / berg
百度FE
@cnberg
10年10月30日星期六
前端通用组
解决百度前端通用和基础性的问题
10年10月30日星期六
• 百度前端现状
• 前端基础平台
• 开发框架
• 开发、测试平台
• 文档管理
前端基础平台
10年10月30日星期六
FE
Web Front-End R&D
web前端研发
10年10月30日星期六
FE
PM
RD
QA, OP ...
10年10月30日星期六
•搜索产品
•社区产品
•商业产品
众多产品线
10年10月30日星期六
与不同的后端交互
•C
•php
•java
10年10月30日星期六
遇到了一些麻烦
• 切换和沟通成本增加
• 重复建设
• 成功实践的推广难度加大
10年10月30日星期六
前端基础平台
10年10月30日星期六
0 100
在过去
10年10月30日星期六
0 10030
拥有基础平台
10年10月30日星期六
• 基础库
• 开发、测试平台
• 前端资源管理
• 文档管理
10年10月30日星期六
1. 基础库
10年10月30日星期六
单一职能的基础方法
ui、效果控件
业务逻辑套件
产品线具体逻辑
Javascript代码分层
base
component
app
10年10月30日星期六
base
component
app
单一职能的基础方法
ui、效果控件
业务逻辑套件
产品线具体逻辑
Javascript代码分层
10年10月30日星期六
百度产品线特征
• 需求多样化
• 部分产品线性能要求高
• 产品线之间存在前端调用、交互
• 结构复杂的遗留系统
10年10月30日星期六
设计思路
• 易于封装、扩展
• 安全,避免冲突
• 按需装载
10年10月30日星期六
实现方案
• 最少暴露 -只在当前作用域下新增一个
变量
• 安全无害 - 不扩展原生对象和托管对象
10年10月30日星期六
• 函数级别的需求选择
• 自动管理依赖
• 代码选择器和辅助工
具获取最小代码集
实现方案
10年10月30日星期六
core
extra
核心方法
扩展方法
10年10月30日星期六
base
component
app
单一职能的基础方法
ui、效果控件
业务逻辑套件
产品线具体逻辑
10年10月30日星期六
fx
ui
...
特效组件
UI组件
其他组件
10年10月30日星期六
百度产品线特征
• 需求多样,单个组件相对简单
• 性能要求高
• 加载最小化
10年10月30日星期六
设计思路
• 高性能,安全可靠
• 按需组合控件特性
• 易封装,可重用
10年10月30日星期六
实现方案
• 采用字符串拼接创造控件
• 不持有DOM节点
• 通过插件机制来解耦控件
• 组合和行为使重用最大化
10年10月30日星期六
UIBase
dialogbutton
draggable
table ...
stateable
...
alert
confirm
modal
keyboard
...
行为
插件
派生
10年10月30日星期六
简单可依赖的基础库
10年10月30日星期六
2. 开发、测试平台
10年10月30日星期六
前端开发中的常见操作
10年10月30日星期六
java	
  -­‐jar	
  yuicompressor.jar	
  myfile.js
10年10月30日星期六
拼合CSS sprite图片
.rc-­‐block1	
  .tl,	
  .rc-­‐block1	
  .tr,	
  .rc-­‐
block1	
  .bl,	
  .rc-­‐block1	
  .br	
  {
	
  	
  	
  	
  background:	
  url("/home/bg.gif");
	
  	
  	
  	
  height:	
  3px;
	
  	
  	
  	
  overflow:	
  hidden;
	
  	
  	
  	
  width:	
  3px;
}
.rc-­‐block1	
  .tl	
  {
	
  	
  	
  	
  background-­‐position:	
  -­‐4px	
  -­‐57px;
}
.rc-­‐block1	
  .tr	
  {
	
  	
  	
  	
  background-­‐position:	
  -­‐7px	
  -­‐57px;
	
  	
  	
  	
  float:	
  right;
}
10年10月30日星期六
完成开发后
删除代码中的console.log
10年10月30日星期六
提交测试前
将模块集成为模板10年10月30日星期六
前端开发过程中的
一些常见失误
10年10月30日星期六
线上图片写成了线下地址
10年10月30日星期六
js中的中文未unicode编码
导致部分页面乱码
10年10月30日星期六
HTML标签未正确闭合
10年10月30日星期六
百度前端
• C语言模板,性能强劲却功能有限
• 多人分工,模块化开发要求高
• 代码放在服务器上后,才能查看效果
10年10月30日星期六
设计思路
• 自动优化、检测前端资源
• 增强模板功能
• 定制性强
• 跨平台运行
10年10月30日星期六
实现方案
• 提供预处理模板
• 用户自定义工作流
• 提供插件机制
• 插件以子程序形式存在
10年10月30日星期六
前端
资源
优化
分发
检测
集成
线下地址检查
jslint检查
页面、模板检查
JS、CSS、HTML压缩
图片压缩
CSS sprite自动化
编译预处理模板
上传到服务机
自动替换地址
静态文件引用添加时间戳
10年10月30日星期六
工作流
10年10月30日星期六
自动处理
前端开发中的机械劳动
10年10月30日星期六
3. 文档管理
10年10月30日星期六
使用
MS office/wiki
管理开发、接口文档?
10年10月30日星期六
MS Office
• 文档更新,无法保证所有副本更新
• 需要学习繁琐的排版操作
• 无法得知与历史版本间的差异
• 无法聚合、检索
10年10月30日星期六
wiki
• 一旦离线,所有文档将不可用
• 在线编辑体验差
• 扩展困难
10年10月30日星期六
本地编写代码
10年10月30日星期六
在线查看文档
10年10月30日星期六
• 语法简单
• 使用本地编辑器
• HTML展示,不需要专有软件
• 永久URL,看到的总是最新版本
• 使用svn存储,多人合作、diff、更新方便
10年10月30日星期六
创造一种
给前端工程师最方便的
文档编辑和管理方式
10年10月30日星期六
基础平台
没有最好,只有最适合
10年10月30日星期六
!anks
berg
cnberg@gmail.com
10年10月30日星期六

More Related Content

Viewers also liked

Viewers also liked (7)

Era Vargas
Era VargasEra Vargas
Era Vargas
 
January 2017 Posting List
January 2017 Posting ListJanuary 2017 Posting List
January 2017 Posting List
 
Heliantus annus
Heliantus annusHeliantus annus
Heliantus annus
 
Six Sigma
Six SigmaSix Sigma
Six Sigma
 
mahnama paighame shariat jan 2017
mahnama paighame shariat jan 2017mahnama paighame shariat jan 2017
mahnama paighame shariat jan 2017
 
Cap 4 medicion de angulos
Cap 4 medicion de angulosCap 4 medicion de angulos
Cap 4 medicion de angulos
 
George Grie Neosurrealism
George Grie NeosurrealismGeorge Grie Neosurrealism
George Grie Neosurrealism
 

More from isnull

站点报告模板
站点报告模板站点报告模板
站点报告模板isnull
 
My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规isnull
 
基于Web的项目管理工具redmine
基于Web的项目管理工具redmine基于Web的项目管理工具redmine
基于Web的项目管理工具redmineisnull
 
张勇 搜搜前端架构
张勇 搜搜前端架构张勇 搜搜前端架构
张勇 搜搜前端架构isnull
 
Mysql开发与优化
Mysql开发与优化Mysql开发与优化
Mysql开发与优化isnull
 
软件工程&架构
软件工程&架构软件工程&架构
软件工程&架构isnull
 
淘宝分布式数据处理实践
淘宝分布式数据处理实践淘宝分布式数据处理实践
淘宝分布式数据处理实践isnull
 
183银行服务器下载说明
183银行服务器下载说明183银行服务器下载说明
183银行服务器下载说明isnull
 
人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析isnull
 
Tsung
Tsung Tsung
Tsung isnull
 
Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010isnull
 
Dutch php conference_2010_opm
Dutch php conference_2010_opmDutch php conference_2010_opm
Dutch php conference_2010_opmisnull
 
Yui3 初探
Yui3 初探Yui3 初探
Yui3 初探isnull
 
大型应用软件架构的变迁
大型应用软件架构的变迁大型应用软件架构的变迁
大型应用软件架构的变迁isnull
 
易趣
易趣易趣
易趣isnull
 

More from isnull (17)

站点报告模板
站点报告模板站点报告模板
站点报告模板
 
My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规
 
基于Web的项目管理工具redmine
基于Web的项目管理工具redmine基于Web的项目管理工具redmine
基于Web的项目管理工具redmine
 
张勇 搜搜前端架构
张勇 搜搜前端架构张勇 搜搜前端架构
张勇 搜搜前端架构
 
Mysql开发与优化
Mysql开发与优化Mysql开发与优化
Mysql开发与优化
 
软件工程&架构
软件工程&架构软件工程&架构
软件工程&架构
 
淘宝分布式数据处理实践
淘宝分布式数据处理实践淘宝分布式数据处理实践
淘宝分布式数据处理实践
 
Scrum
ScrumScrum
Scrum
 
Scrum
ScrumScrum
Scrum
 
183银行服务器下载说明
183银行服务器下载说明183银行服务器下载说明
183银行服务器下载说明
 
人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析
 
Tsung
Tsung Tsung
Tsung
 
Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010
 
Dutch php conference_2010_opm
Dutch php conference_2010_opmDutch php conference_2010_opm
Dutch php conference_2010_opm
 
Yui3 初探
Yui3 初探Yui3 初探
Yui3 初探
 
大型应用软件架构的变迁
大型应用软件架构的变迁大型应用软件架构的变迁
大型应用软件架构的变迁
 
易趣
易趣易趣
易趣
 

雷志兴 百度前端基础平台与架构分享