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

百度前端基础平台分享

雷志兴 / 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日星期六

!anksberg

cnberg@gmail.com

10年10月30日星期六