百度技术沙龙第 23 期 一站式的前端开发框架

在 2 月 18 日由百度主办、InfoQ 策划组织实施的第 23 期百度技术沙龙活动上，来自百度前端通用组技术负责人雷志兴（@berg）、豌豆实验室前端架构师陈广琛（@CatChen）和赵望野（@赵望野）分别分享了各自在前端开发技术上取得的成果及经验，话题涉及“前端集成解决方案”，以及“豌豆荚的 Web 界面”等。本文将对他们各自的分享做下简单的回顾，同时提供相关资料的下载。

 

主题一：前端集成解决方案（微盘下载讲稿）

 

来自百度的高级工程师，前端通用组技术负责人雷志兴第一个为大家分享，演讲主要包括病疾已久的前端架构、体系结构和集成开发环境等内容。目前前端病疾主要包括：

 

开发慢

运行慢

协作慢

产品上线慢

雷志兴重点讲述了贯穿开发流程的体系结构和集成开发环境，他提到，工具只能解决表面问题，而且多种工具往往不能很好地与系统集成，增加了工程师学习和使用的成本。针对这些问题，百度实现了一个完整的自动化构建系统，通过本地化的应用程序，基于一套规范的开发模式解决了上述矛盾——保证开发时系统的模块化，在上线前自动优化静态资源，实现维护和运行的双赢。接着，他通过 JavaScript 和 CSS 代码片段说明了体系结构的基本特性：

 

简化开发，提高协作和沟通效率

业务型的框架

更多、更好的库

此外，本地模拟也很重要，这涉及到自动“编译”、本地化调试和数据构建等工作。“架构即高效”主要要做好以下工作：

 

体系结构 

组件化，简化开发方式，提高协作效率

集成开发环境 

“编译”代码，持续提高运行速度

模拟环境和工具，让开发更自动化

主题二：豌豆荚的 Web 界面（微盘下载讲稿）

 

豌豆实验室前端架构师陈广琛以及前端工程师赵望野第二个为大家分享，主要内容涉及交互设计的主要原则和豌豆荚 2.0 中的前端 MVC 实践。重点介绍了 OneRing、Backbone.js 并加以实例进行演示。陈广琛首先讲到，使用 Web 的好处就是能够带来更好的交互与视觉设计、实现数据与视图的分离。一个 Web MVC 的典型流程是：

 

Control 截获请求

Control 操作 Model 并完成读写

Control 把数据传递给 View

View 进行渲染并呈献给用户

在未引入 Web MVC 之前，Single Page Application 主要面临前端工程的规模越来越来，逻辑越来越复杂以及数据、交互、UI 逻辑混杂的问题。为了解决此问题，豌豆荚引入了桌面应用框架OneRing。和 Adobe AIR 类似，它支持用 HTML/JS/CSS 制作用户界面，与之不同的是，它的应用为本地程序，可以直接访问操作系统的数据。此外，在豌豆荚 2.0 中，还用到了Backbone.js，提供了 JavaScript 代码的组织功能。Backbone 主要包括 Models、Collections、Views、Events 以及 Controller。此外，在进行前端实践的过程中，豌豆荚也面临着一些挑战：

 

通过实践和性能跟踪调整 View 的划分力度、渲染策略，复用 DOM 节点

同后端业务边界划分（不对数据进行任何处理）

数据的组织结构（尽量同后端保持一致）

大量异步请求的处理。

Open Space（开放式讨论环节）

 

和以往的环节一样，​为了让参会者能够有更多的时间进行相互的交流，本次活动依然设置了 Open ​Space（开放式讨论）环节。除百度讲师雷志兴、豌豆实验室陈广琛和赵望野，北京互动阳光张涛、天津渤海商品交易所张二青也分别作为话题小组长，同参会者进行了话题分享和讨论。

 

会后，一些参会者也通过新浪微博分享了他们的参会感受：​​

 

@_ 仑子 _：# 百度技术沙龙 # 听@berg 讲百度前端开发对 csshtmljs 的处理方式，对于不了解百度开发方式的人，虽然讲的有些笼统，但对庞杂的前端代码的处理思想却很值得借鉴。

 

@fejustin：刚从# 百度技术沙龙 #出来，百度在# 前端集成开发 #方面的探索值得称道，相信这是未来趋势，我很喜欢这个主题，可惜今天内容不够丰富，有点不过瘾；早就怀疑过# 豌豆荚 #的 UI 是纯前端的，果然如此！现在这样典型的客户端应用都是纯前端实现的，我似乎隐约看到传统客户端的未来。[另外，#Backbone#要火啊！]

 

@网际大鱼：百度前端开发碰到的问题我们都碰到了，下面看他们的解决方案。

 

@单车之梦想：在听百度前端技术沙龙，感觉自己在技术上越来越是井底之蛙了，现在还能看到天，估计再过几年，连天都看不到了。