雷志兴 百度前端基础平台与架构分享
53
百度前端 基础平台分享 雷志兴 / berg 百度FE @cnberg 10年10月30日星期六
-
Upload
isnull -
Category
Technology
-
view
1.426 -
download
0
description
Transcript of 雷志兴 百度前端基础平台与架构分享
百度前端基础平台分享
雷志兴 / berg百度FE
@cnberg
10年10月30日星期六
前端通用组解决百度前端通用和基础性的问题
10年10月30日星期六
• 百度前端现状• 前端基础平台• 开发框架• 开发、测试平台• 文档管理
前端基础平台
10年10月30日星期六
FEWeb 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日星期六
