BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 贾国清 关注 0 他的粉丝 发布于 2012年8月28日. 估计阅读时间: 6 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在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@百度技术沙龙 获取后续的活动信息。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT