狠狠撸

狠狠撸Share a Scribd company logo
百度前端
基础平台分享
雷志兴 / 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
con?rm
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 of?ce/wiki
管理开发、接口文档?
10年10月30日星期六
MS Of?ce
? 文档更新,无法保证所有副本更新
? 需要学习繁琐的排版操作
? 无法得知与历史版本间的差异
? 无法聚合、检索
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 (7)

Era VargasEra Vargas
Era Vargas
Thiago Bro
?
January 2017 Posting List
January 2017 Posting ListJanuary 2017 Posting List
January 2017 Posting List
John Rust
?
Heliantus annusHeliantus annus
Heliantus annus
maximiliano aguinda
?
mahnama paighame shariat jan 2017
mahnama paighame shariat jan 2017mahnama paighame shariat jan 2017
mahnama paighame shariat jan 2017
sunninews92
?
Cap 4 medicion de angulosCap 4 medicion de angulos
Cap 4 medicion de angulos
Alfredo Leguia Guzman
?
George Grie Neosurrealism
George Grie NeosurrealismGeorge Grie Neosurrealism
George Grie Neosurrealism
Kapitán József
?
Era VargasEra Vargas
Era Vargas
Thiago Bro
?
January 2017 Posting List
January 2017 Posting ListJanuary 2017 Posting List
January 2017 Posting List
John Rust
?
Heliantus annusHeliantus annus
Heliantus annus
maximiliano aguinda
?
mahnama paighame shariat jan 2017
mahnama paighame shariat jan 2017mahnama paighame shariat jan 2017
mahnama paighame shariat jan 2017
sunninews92
?
Cap 4 medicion de angulosCap 4 medicion de angulos
Cap 4 medicion de angulos
Alfredo Leguia Guzman
?

More from isnull (17)

站点报告模板
站点报告模板站点报告模板
站点报告模板
isnull
?
My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规
isnull
?
基于奥别产的项目管理工具谤别诲尘颈苍别
基于奥别产的项目管理工具谤别诲尘颈苍别基于奥别产的项目管理工具谤别诲尘颈苍别
基于奥别产的项目管理工具谤别诲尘颈苍别
isnull
?
张勇 搜搜前端架构
张勇 搜搜前端架构张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
?
惭测蝉辩濒开发与优化
惭测蝉辩濒开发与优化惭测蝉辩濒开发与优化
惭测蝉辩濒开发与优化
isnull
?
软件工程&补尘辫;架构
软件工程&补尘辫;架构软件工程&补尘辫;架构
软件工程&补尘辫;架构
isnull
?
淘宝分布式数据处理实践
淘宝分布式数据处理实践淘宝分布式数据处理实践
淘宝分布式数据处理实践
isnull
?
183银行服务器下载说明
183银行服务器下载说明183银行服务器下载说明
183银行服务器下载说明
isnull
?
人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析
isnull
?
Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010
isnull
?
Dutch php conference_2010_opm
Dutch php conference_2010_opmDutch php conference_2010_opm
Dutch php conference_2010_opm
isnull
?
Yui3 初探
Yui3 初探Yui3 初探
Yui3 初探
isnull
?
大型应用软件架构的变迁
大型应用软件架构的变迁大型应用软件架构的变迁
大型应用软件架构的变迁
isnull
?
易趣
易趣易趣
易趣
isnull
?
站点报告模板
站点报告模板站点报告模板
站点报告模板
isnull
?
My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规
isnull
?
基于奥别产的项目管理工具谤别诲尘颈苍别
基于奥别产的项目管理工具谤别诲尘颈苍别基于奥别产的项目管理工具谤别诲尘颈苍别
基于奥别产的项目管理工具谤别诲尘颈苍别
isnull
?
张勇 搜搜前端架构
张勇 搜搜前端架构张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
?
惭测蝉辩濒开发与优化
惭测蝉辩濒开发与优化惭测蝉辩濒开发与优化
惭测蝉辩濒开发与优化
isnull
?
软件工程&补尘辫;架构
软件工程&补尘辫;架构软件工程&补尘辫;架构
软件工程&补尘辫;架构
isnull
?
淘宝分布式数据处理实践
淘宝分布式数据处理实践淘宝分布式数据处理实践
淘宝分布式数据处理实践
isnull
?
183银行服务器下载说明
183银行服务器下载说明183银行服务器下载说明
183银行服务器下载说明
isnull
?
人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析
isnull
?
Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010
isnull
?
Dutch php conference_2010_opm
Dutch php conference_2010_opmDutch php conference_2010_opm
Dutch php conference_2010_opm
isnull
?
Yui3 初探
Yui3 初探Yui3 初探
Yui3 初探
isnull
?
大型应用软件架构的变迁
大型应用软件架构的变迁大型应用软件架构的变迁
大型应用软件架构的变迁
isnull
?

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