写点什么

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

2012 年 8 月 27 日

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

2012 年 8 月 27 日 01:092730
用户头像

发布了 156 篇内容, 共 42.3 次阅读, 收获喜欢 2 次。

关注

评论

发布
暂无评论
发现更多内容

成功是逼出来的,把自己逼上绝路,你才能成功

陆陆通通

程序 28天写作 倒逼

中国金融科技权威盛会点赞了这个来自 AWS 的金融行业解决方案

亚马逊云科技 (Amazon Web Services)

云计算 AWS

28 天带你玩转 Kubernetes-- 第二天(K8s 介绍)

Java全栈封神

Kubernetes k8s k8s入门 28天写作 k8s历史

生产环境全链路压测建设历程 25:FAQ 7、8 正常业务保护和外调接口的处理

数列科技杨德华

28天写作

价值创造

JiangX

创业 投资 认知 28天写作 价值

如果梦境取决于一串代码「幻想短篇 2/28」

道伟

28天写作

海明威《老人与海》

抗哥

28天写作

前端性能优化之指标

知识乞丐

前端性能优化 28天写作

28 天带你玩转 Kubernetes-- 第二天(K8s介绍)

Java全栈封神

Kubernetes k8s k8s入门 28天写作 k8s历史

聊聊并发,进程通信方式,go协程简单应用场景

AI乔治

Java 架构

justauth-spring-boot-starter V1.3.5 发布成功

RD

OAuth 2.0 justauth 第三方登录

python 基本数据类型-1

老赵

Python 28天写作

同理心

lidaobing

28天写作 了不起的盖茨比

演讲还是辩论

将军-技术演讲教练

28天写作

架构师训练营第 12 周学习总结

菜青虫

关于私域流量与社群的思考

.

28天写作

大数据知识专栏1-Hadoop环境安装

小马哥

大数据 hadoop 28天写作

IDEA@Data注释使用

AI乔治

Java 架构 注解

领域驱动设计在爱奇艺打赏业务的实践

爱奇艺技术产品团队

架构 DDD

AWS x 红帽 | 以客户需求为驱动,加速开放混合云落地

亚马逊云科技 (Amazon Web Services)

云计算 红帽 AWS

详细教程丨如何利用Rancher和Kong实现服务网格?

RancherLabs

微服务 k8s

架构师训练营第 1 期 - 大作业 2

Anyou Liu

架构师训练营第 1 期

MySQL在按照某个字段分组、排序加序号

AI乔治

Java MySQL 架构

车轱辘话来回说怎么治

Justin

团队协作 沟通 28天写作

SpringBoot 系列 2——SpringBoot原理分析

程序员的时光

程序员 springboot 七日更 28天写作

28天瞎写的第二百一三天:背代码的故事

树上

代码 28天写作

新官上任,如何开始你的管理工作(上)

一笑

管理 28天写作

Springboot 开发环境搭建和项目启动

武哥聊编程

Java springboot SpringBoot 2 28天写作

想不想get和湖南卫视一样的现代直播?

亚马逊云科技 (Amazon Web Services)

【薪火计划】09 - 员工激励理论

brave heart

管理 28天写作

架构师训练营第 12 周课后练习

菜青虫

2021年全国大学生计算机系统能力大赛操作系统设计赛 技术报告会

2021年全国大学生计算机系统能力大赛操作系统设计赛 技术报告会

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