百度前端
基础平台分享
雷志兴 / 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	
  {
	
  	
  	...
完成开发后
删除代码中的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日星期六
Upcoming SlideShare
Loading in...5
×

百度前端架构

1,728

Published on

百度前端技术交流会--百度前端架构

1 Comment
11 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,728
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
89
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

百度前端架构

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

    Clipping is a handy way to collect important slides you want to go back to later.

×