FinOps有望降低企业50%+的云成本! 了解详情
写点什么

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

  • 2012-08-27
  • 本文字数:2121 字

    阅读完需:约 7 分钟

在 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-08-27 01:093020
用户头像

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

关注

评论

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

技术解码丨实时音视频与PSTN融合的解决方案

腾讯云音视频

腾讯云 音视频 PSTN

最壕58人逆天改命:四面阿里拿offer后,才发现师哥给的面试笔记有多强大

Java架构师迁哥

关于程序猿的28个经典段子

模块三作业

king

从零开始学习3D可视化之演示项目

ThingJS数字孪生引擎

大前端 可视化 3D 3D可视化

程序员是如何看待程序员的,程序员是做什么的?

毕业总结

菲尼克斯

架构实战营

NGINX社区线下Meetup第三期成功举办 感受成都开发者们的NGINX热情

爱极客侠

大专的我,闭关56天,含泪拿下阿里offer,五轮面试,六个小时灵魂拷问

掌握这些核心算法,拿不到10+个offer你来找我,我锤飞你个不争气的

北游学Java

Java 算法

「腾讯面试题」兔子试毒

别人都在谈爱琴海,凭什么程序员就“地中海”网友:还是太优秀!

融云技术分享:全面揭秘亿级IM消息的可靠投递机制

JackJiang

即时通讯 IM 可靠消息最终一致 融云

程序员小哥月入5万,却被丈母娘拒绝,丈母娘一番话让小哥很尴尬

2021- iOS开发者一份你一定会被问到的面试题(附参考答案)

iOSer

ios 面试 ios开发 iOS 知识体系

为什么双赞安卓ARM工控主板应用前景那么好?

双赞工控

DEMO CHINA带着1000+投资人,500+好项目首登重庆

创业邦

创业 投资

2021年FiL最新消息:fil值得投资吗?

区块链 IPFS fil fil矿机 fil行情

如何下载YouTube视频/影片(4K画质)

资源君

分享 经验分享 youtube视频下载 工具分享 教程分享

Baetyl邀你来战EdgeX中国挑战赛!

百度开发者中心

人工智能 最佳实践 物联网

程序员工资高,到底程序员的工资有多高?你不了解的程序员!

海归硕士程序员吐槽:回国一个月都没找到工作,我书都白读了?

程序员面试时自称字节跳动工作两年,被发现学历造假,结果蒙了!

程序员崩溃的40个瞬间!最后一个是你意想不到的.....

详细架构设计文档

刘丽

【云厂商】部分知名云服务商名单

行云管家

云计算 公有云 云服务 私有云 云厂商

《面试八股文》之 Redis 16卷

moon聊技术

redis 面试

Go 语言的信号式抢占原理

Xargin

后端 Go 语言 系统编程

程序员没两把刷子,就别送外卖了!!!

网络攻防学习笔记 Day86

穿过生命散发芬芳

网络攻防 7月日更

时序数据库助力安全监控

greatersecurity

  • 需要帮助,请添加网站小助手,进入 InfoQ 技术交流群
百度技术沙龙第29期回顾:易维护的前端框架(含资料下载)_JavaScript_贾国清_InfoQ精选文章