Your SlideShare is downloading. ×
雷志兴 百度前端基础平台与架构分享
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,417

Published on

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,417
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
54
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×