高可扩展前端技术.pptVIP

注册、初始化模块 Googlemap 模块的实例代码 发布框模块 由于我们的Googlemap 使用 iframe 嵌入，对我们之间声明的模块中的方法进行绑定 Pagelet的加载规则，1. css , 2. html 3. js, 由于是简单例子，这里没有加载 css * Pagelet的加载规则，1. css , 2. html 3. js, 由于是简单例子，这里没有加载 css * 高可扩展前端技术 蔡芳敦 @cfddream 2011/11/22 * 别以为我在睡懒觉，其实是在思考… * 思考？ 面对像新浪这么多应用，复杂的功能业务时，前端如何解决？ 在1的基础上，如何改善交互体验？ 在1的基础上，如何提高网站的访问、浏览速度？ * Fea.js Library Building a scalable web application * Fea.js 构建一个可扩展的 JavaScript web 应用程序 提高网站前端性能 目的： * Fea.js Application Core[AC]：应用管理中心 “系统，管理者各种各样的资源” Sandbox[S]：沙箱层，每个M都有单独的S “系统与软件之间通信的桥梁，每个软件都有自己的输入输出接口” Module[M]：模块层，业务逻辑、职责独立 “系统上，独立的软件” 结构： * Fea.js BigPipe[B]：分解Page，把M(html+css+js)封装Pagelet[P] “通过流水线分工处理，提高生产效率” Broadcasting system/Pub-Sub/[P-S]：让S控制M与M之间的通信 “没2块钱买可乐，须向同学们借” AOP[AOP]：面向切面编程 “细化业务逻辑” 无刷新技术：监控前进后退，单页面 核心功能： * Fea.js 结构流程图： * 未来规划： P1 P4 P2 P3 P5 * 例子： * 例子：注册模块/执行 * * * 例子：第三方事件绑定 * 例子：声明并执行PageLet，下载资源 * 网站又快起来了，来我们去Happy下 * 相关资料 / (规划中，估计要很久） /cfddream/fea BigPipe /cfddream/aop Scalable JavaScript Application Architecture 使用Big pipe提升浏览速度v2(From Sina) * 谢谢！ * 大家好，我是来自于娱乐圈开发小组的蔡芳敦，现阶段的主要工作对前端的开发和研究。 通过对Facebook/sina 前端技术研究和分析 在最近的一段时间，都在思考前端的几个问题。 1. 面对像新浪这么多应用，复杂的功能业务时，前端如何解决？ 不管是官方的还是第三方的应用， 开发、维护、以及跟整体进行交互，都需要我们对其进行深度考虑。 2. 在1的基础上，如何改善交互体验？ 当一个页面涉及相当多的功能、应用时， 如何让用户使用地更流畅，更爽，逗留的时间更久？ 3. 在1的基础上，如何提高网站的访问、浏览速度？ 内容一多，网站的打开速度，内容的展现，严重的考验着用户的耐心 * 分享下，娱乐圈小组开发的 fea.js 库，这个库在未来会部署到我们的娱乐圈；借鉴了、学习了YUI3框架正因为是库，不是框架，所以更轻量、功能单一，不像YUI3是一台强劲的发动机 随着前端 mvc 等技术的兴起，单页面、无刷新的Web应用越来越多Google 一系列产品， 后端提供数据，前端 直接进入主题，介绍下 fea.js 项目 分三层架构AC：把Page看成一个控制M的注册、注销（M 生命周期）、通过S对M发布指令 S：AC 与 M 桥梁；提供全局的 P-S 系统，控制 M 与 M 之间的通信 M：业务逻辑层 - 内容层 - 结构层 + 行为层 + 表现层fea.js 有三层结构 最底层的是：Application Core－应用管理中心 如果放大来看，它就像我们操作系统，管理着各种各样的资源 中间一层是：Sanbox - 沙箱层 操作系统与软件进行通信的桥梁 最上层的是：Module - 模块层 就像操作系统上的软件 功能介绍BigPipe 通过流水线的方式，并发处理web page, Broadcasting system 解决模块之间的耦合性，为模块之间提供通信机制 AOP 帮助我们对功能进行切分核心功能： BigPipe技术：bigpipe是由Facebook前端研究人员研究和开发的， 通过bigpipe技术，facebook 把网页打开的平均时间由5s，优化到了2.5秒。 我想这个2.5s对一个大型网站，它背后所隐含的价值