[Baidu web frontend_conference_2010.10]_[fe-com_baidu]

百度前端基础平台分享

雷志兴 / berg百度FE

@cnberg

10年10月30日星期六

前端通用组解决百度前端通用和基础性的问题


• 百度前端现状• 前端基础平台• 开发框架• 开发、测试平台• 文档管理

前端基础平台


FEWeb Front-End R&D

web前端研发


FE

PM

RD

QA, OP ...


•搜索产品•社区产品•商业产品

众多产品线


与不同的后端交互

•C•php

• java


遇到了一些麻烦

• 切换和沟通成本增加• 重复建设• 成功实践的推广难度加大


前端基础平台


0 100

在过去


0 10030

拥有基础平台


• 基础库

• 开发、测试平台

• 前端资源管理

• 文档管理


1. 基础库


单一职能的基础方法

ui、效果控件业务逻辑套件

产品线具体逻辑

Javascript代码分层

base

component

app


base

component

app




Javascript代码分层


百度产品线特征

• 需求多样化• 部分产品线性能要求高• 产品线之间存在前端调用、交互• 结构复杂的遗留系统


设计思路

• 易于封装、扩展• 安全，避免冲突• 按需装载


实现方案

• 最少暴露－只在当前作用域下新增一个变量

• 安全无害－不扩展原生对象和托管对象


• 函数级别的需求选择• 自动管理依赖• 代码选择器和辅助工具获取最小代码集

实现方案


core

extra

核心方法

扩展方法


base

component

app





fx

ui

...

特效组件

UI组件

其他组件


百度产品线特征

• 需求多样，单个组件相对简单• 性能要求高• 加载最小化


设计思路

• 高性能，安全可靠• 按需组合控件特性• 易封装，可重用


实现方案

• 采用字符串拼接创造控件• 不持有DOM节点

• 通过插件机制来解耦控件• 组合和行为使重用最大化


UIBase

dialogbutton

draggable

table ...

stateable

...

alert

confirm

modal

keyboard

...

行为

插件

派生


简单可依赖的基础库


2. 开发、测试平台


前端开发中的常见操作


java -‐jar yuicompressor.jar myfile.js


拼合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;}


http://img.baidu.com/img/iknow/home/bg.gif

http://img.baidu.com/img/iknow/home/bg.gif

完成开发后删除代码中的console.log


提交测试前将模块集成为模板


前端开发过程中的一些常见失误


线上图片写成了线下地址


js中的中文未unicode编码导致部分页面乱码


HTML标签未正确闭合


百度前端

• C语言模板，性能强劲却功能有限

• 多人分工，模块化开发要求高• 代码放在服务器上后，才能查看效果


设计思路

• 自动优化、检测前端资源• 增强模板功能• 定制性强• 跨平台运行


实现方案

• 提供预处理模板• 用户自定义工作流• 提供插件机制• 插件以子程序形式存在


前端资源

优化

分发

检测

集成

线下地址检查jslint检查页面、模板检查

JS、CSS、HTML压缩图片压缩CSS sprite自动化

编译预处理模板

上传到服务机自动替换地址静态文件引用添加时间戳


工作流


自动处理前端开发中的机械劳动


3. 文档管理


使用MS office/wiki

管理开发、接口文档？


MS Office

• 文档更新，无法保证所有副本更新• 需要学习繁琐的排版操作• 无法得知与历史版本间的差异• 无法聚合、检索


wiki

• 一旦离线，所有文档将不可用• 在线编辑体验差• 扩展困难


本地编写代码10年10月30日星期六

在线查看文档10年10月30日星期六

• 语法简单

• 使用本地编辑器

• HTML展示，不需要专有软件

• 永久URL，看到的总是最新版本

• 使用svn存储，多人合作、diff、更新方便


创造一种给前端工程师最方便的文档编辑和管理方式


基础平台没有最好，只有最适合


!anksberg

[email protected]


mailto:[email protected]

mailto:[email protected]

[Baidu web frontend_conference_2010.10]_[fe-com_baidu]

Documents

Transcript of [Baidu web frontend_conference_2010.10]_[fe-com_baidu]