百度技术沙龙第 29 期回顾:易维护的前端框架(含资料下载)

  • 贾国清

2012 年 8 月 27 日

话题:JavaScript百度语言 & 开发

在 8 月 18 日由 @百度 主办、 @InfoQ 负责策划组织和实施的第 29 期百度技术沙龙活动上,来自百度高级工程师,前端通用组 FIS 业务框架技术负责人沈洪顺(@walterShen),淘宝旅行资深前端工程师魏凡哲(@魏凡哲 - 陶清)分别分享了各自在前端开发中的经验与实践,话题涉及“百度前端集成开发业务框架”,以及“复杂表单与解耦”等。本文将对他们各自的分享做下简单的回顾,同时提供相关资料的下载。

主题一:百度前端集成开发业务框架下载讲稿观看演讲视频

来自百度高级工程师,前端通用组 FIS 业务框架技术负责人沈洪顺第一个为大家分享,内容主要涉及业务框架的由来、设计原则、核心设计与实现三部分。

随着产品的快速增长和需求的快速迭代,工程师的抱怨也逐渐出现,代码命名的潜在冲突,单文件过大以及大量冗余代码,模块复用也变得越来越复杂,合并静态资源变得繁琐且耗费较大的工作量,静态资源加载也出现了性能问题,于是在这种情况下,工程师们就有了以下的期望:

  • 简单的开发、维护、部署
  • 减少重复劳动
  • 团队高效协作
  • 高性能的代码

于是业务集成框架便出现了,主要的设计原则为方案集成化、工具智能化和流程自动化,核心设计与实现主要包括模块化和自动化部分,主要模块由 Template 模块、JavaScript 模块、CSS 模块、文件及目录模块组成。此外,沈洪顺还对比了静态加载与动态加载的优劣:

  • 静态加载:编译时分析页面使用到的组件,将组件引用添加到页面
    • 优点:适用范围广,编译时处理,不依赖线上处理;
    • 缺点:获取不到运行时组件调用信息,不能调用其他子系统组件,打包合并不能动态调整;
  • 动态加载:编译时在页面增加 Smarty function 标记,线上运动时动态分析组件引用,给页面添加组件调用
    • 优点:加载方式灵活,线上动态调整打包合并信息,可以调用其他子系统组件;
    • 缺点:适用于有后端模板项目,运行时处理依赖和加载

同时,还针对模块加载中的同步加载和异步加载进行了比较:

  • 同步加载:编译时在 head 里插入 script 标签
    • 优点:适用于 ie hack 等类型的文件,加载基础库可以全局使用
    • 缺点:阻塞浏览器
  • 异步加载:浏览器运行时在 head 里插入 script 标签
    • 优点:并行加载,性能高,更适用于模块化思想,可以实现按需加载的效果;
    • 缺点:有一定的学习成本和调试成本

最后,沈洪顺进行了总结,良好的业务框架提供了开发框架和集成开发工具的集合,为产品线提供前端开发的底层支持,可提高开发和沟通协作的效率,最终快速实现需求并达到代码的最优化。

主题二:复杂表单与解耦下载讲稿观看演讲视频

淘宝旅行资深前端工程师魏凡哲(花名陶清)分享复杂表单与解耦的实践,在介绍架构时陶清提到:

如果说架构模式只有一种的话,那就只有分层模式算是架构,只能上层依赖下层,下层不能依赖上层。

模块化的解决方式主要有利用事件广播和组件解耦,事件广播主要有同步(提供数据)和异步(知会状态)两种形式,在使用事件广播时尤其要区分场景地使用,同时也不易太频繁,过多使用将会带来广播风暴,影响性能。

在前端领域中,AOP 是继 OOP 以后又一个解耦工具,适合解决某个功能被多种跨模块对象需要的场景,在前端表单类应用可以看到的使用场景有提示类、富控件输入类以及校验类功能。陶清还提到,YUI3 是一套很棒,但是被严重低估的前端库,主要可通过 YUI.do 实现 AOP,通过 YUI Event 实现广播,YUI Loader 实现模块加载,此外,YUI3 也已经运用 AOP 模式创造了大量组件,可参考YUI 网站

Open Space(开放式讨论环节)

为了促进参会者与我们每期的嘉宾以及讲师近距离交流,深入探讨在演讲过程中的疑问,本次活动依然设置了 Open ​Space(开放式讨论)环节。除了讲师沈洪顺和魏凡哲分享文件打包的性能和校验这些事儿外,现场的参会者还一起交流了 JS MVC 框架、校验适配和用户体验权衡等话题。在 Open Space 的总结环节,几位话题小组长​分别对讨论的内容进行了总结。

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

池建强:值得借鉴,尤其是企业应用的表单,简直是噩梦。

LiHongxi_:昨天,参加了百度技术沙龙,很愉快,在那个大会议室,传来程序员们的开心的笑声。

闪联 - 云朋# 百度技术沙龙 #这次模块化的分享很不错,一方面将平时的技术积累连起来形成一种思路,另外一种是为逐渐成型并扩大的团队提供了一个高效开发的思路

_ 而乐 _# 百度技术沙龙 # 淘宝的前端探索有比较多积累,复杂的应用场景代码的解耦。成熟的设计模式:MVC,MVP. 模块通讯尝试:master/slave ,pubsub。

一玉无痕一:第一次参加# 百度技术沙龙 #,内容设计的很好。第一位讲师先给我们个概念,后一位讲师为我们详细讲解内部处理的方法。

MeteorX:应用解耦分层,都是为了将复杂简单化,尽可能让每层的职责单一。以前的面向过程是自底向上,逐层分解;面向对象则是粒度放大,按人的思维行事;到了 SOA,粒度明显更大了,按公司单位的行为方式协同做事。再往下呢?

有关百度技术沙龙的更多信息,可以通过新浪微博关注@百度技术沙龙,或者加入百度技术沙龙微群,InfoQ 上也总结了过往 28 期所有百度技术沙龙的演讲视频和资料等,感兴趣的读者可以直接浏览阅读

特别提示:第 30 期百度技术沙龙将在 9 月 15 日,北京举行,欢迎关注@InfoQ@百度技术沙龙 获取后续的活动信息。

JavaScript百度语言 & 开发