第四届D2分享 – 从YUI2到YUI3看前端的演变（PPT+演讲内容）

PPT下载

http://download.csdn.net/source/2042813

 

 

2.
回顾javascript的历史，1996年3月javascript的第一个版本1.0发布，那时候NS2和IE3就开始支持了。距现在已经10多年了。现在普遍使用的javascript1.5是2000年11月发布的。距现在也将近十年了。
3.
我们看个比较。05年的yahoo首页基本上都是静态内容的展现，到了09年yahoo最新的首页不仅有非常丰富的表现形式，同时像个平台一样，集成了各种服务，甚至包括第三方的应用。
4.
再看我们国内的淘宝。03年的淘宝首页同样完全是静态内容展现，设计风格也颇具那个时期的特色。现在的淘宝首页内容的表现形式非常丰富多彩。
从这个比较中你会发现，Javascript在相当长的一段时期内充当一个什么样的角色呢？只是用它来显示广告，做做网页特效而已。它基本上是个龙套的角色。
5.
Javascript真正广泛应用起来是在05年。05年初一位用户体验专家James Garret将Javascript在google产品的应用方式总结为AJAX。Ajax的深远意义是对传统产品设计理念的颠覆。由原来的浏览网页，变成和网页互动。同年天才程序员兼著名投资人的Paul Graham在那篇著名的文章“Web 2.0”里宣布“Javascript now works”。Javascript摇身一变成为世界上最流行的语言。
反思的问题：“Javascript在05年以前为什么没有发挥作用？”产品设计和技术的结合的经典案例。设计和技术结合带来产品上的创新。那时侯设计和技术很紧密，现在随着各自的专业化反而有些疏远，是一个不好的现象。
6.
Web2.0实际上同时带动了前端各个学科的发展。看看这些Web2.0的相关关键字，有产品的，有技术的，有设计的。像前端技术的热门关键词有ajax，Web标准，openAPI等，设计方面呢，有易用性，设计标准化，用户为中心等等。
7.
05年以前，有个流行说法“设计80%的工作是排版”，前端开发那个时候主要工作就是“切图”，但确实当时的实际需求就是这样的。05年以后，各个公司都开始做Web2.0的产品，前端开发的需求也就越来越复杂。为了降低复杂度，提高开发效率，各种Javascript库在05年左右纷纷出现。 大约在05年年初雅虎专门成立一个“表现平台”小组开发内部用的库，这就是YUI的前身。
8.
这是前不久统计的现在最流行的几个Javascrip开源库。你会发现现在用的最广泛的库都是05/06年出来的。
9.
所有Javascript库无一例外的都会解决这5个方面的问题。1.建立浏览器的标准接口层，解决兼容性的问题；2.实现复杂的交互和动态效果；3.Ajax开发组件；4.提供一个RIA控件(Widget)库；5.增强Javascript的语言特性，在原生方法基础上扩展更多方法。这些也反映出前端开发的最基本需求。
10.
那么我们看YUI的发展过程。06年初，YUI的第一个beta版本对外发布。当时提供了5个公用功能组件（Utilities）和3个Widget。dom和event实现浏览器统一的接口层，animation和dragdrop实现动态交互效果，connection实现Ajax应用。几乎所有的库的都提供这些功能，只是内部的代码结构设计不一样。方式不一样。YUI从一开始就把每个功能组件独立为一个文件，再按需引用。
11.
07年初的时候，这两个方面继续丰富。特点是Widget增加很多。回想一下那个时期，这些表现层的组件很受欢迎。像产品设计中用的最多的就是tabview。
12.
到了08年，Widget组件的规模继续扩大。但同时，你会发现utilities这块也增加了很多。这反映出当时的一个现象，随着UI设计和UE研究的深入，开始追求更符合自身产品定位的表现形式。所以，现成的Widget越来越不能满足产品设计的需求。开发者对库的基础功能的需求增加了。对代码的品质和维护性有了更高的要求，所以像YUI的单元测试和性能分析工具，包括像现在常用的代码压缩工具YUICompressor，都是哪个时期出来的。
13.
到09年9月14日YUI 2.8.0的发布。提供了本地存储的组件，增加了新的Widget。看看这两块已经发展的相当完善了。随后还会发布2.8.1一个修订版。YUI2的发展就终结了。后面就是YUI3的发展了。
14.
一个好的库就是一堆很全很好用的工具加上一本详细的说明书。我觉的YUI2是一个优秀的库。唯一遗憾的是没有中文的书。国内阿里系的公司基本都在用YUI，腾讯的有些产品也在用YUI,VeryCD用的也是YUI。
15.
比较一下YUI和jQuery这两个库的特点。jQuery把公用功能集中在一个文件中。YUI采用的是“点菜”的方式，每个组件是一个文件，然后按需加载。从jQuery的源文件里看到jQuery也增加了requires的方法。
16.
基于库的开发方式是这样的。现在的前端开发模式基本都是这样的。但是当开发越来越复杂，页面维护的周期越来越长时，这种库风格开发的问题就逐渐暴露出来了。
17.
这是开心登录后的首页在头部引了十多个Javascript文件。且不说性能的问题，维护成本我想会相当高。
18.
就像堆积木。当规模小的时候可以很快，很方便。但当规模越来越大，结构越来越复杂后，这种方式就会变的很危险。前端开发也会面临软件危机的风险。
19.
前端开发演变到今天有那些新的特点呢？原来的单兵作战变成多人轮流维护和协作开发。产品设计的创新需求越来越多。就地解决问题变成系统解决问题，对外联文件和inline代码就需要系统管理。现在的代码生命周期越来越长复杂度越来越大，需要一种可持续性的开发方式，像在开发流程里整合版本管理和单元测试。
20.
从09年开始我觉得“库”开始向“框架”演变了。
21.
从字面上区别一下“库”和“框架”。“框架”侧重组织和结构。“库”是存放东西得地方。库是功能集。
22.
再看维基百科上对“框架”的解释：“框架是一个基本的概念结构,主要是被用来解决或应付复杂的问题”。
23.
下一代YUI-YUI3的定位就是一个纯粹的框架。08年发布了一个预览版开始尝试全新的框架理念，到09年9月29日，发布了YUI3的正式版。经过一年的探索，包括听取来自社区的反馈意见，最终YUI3的框架理念彻底形成。
24.
简单看一下YUI3的框架特点。YUI3的功能模块，会按照具体功能进一步细化成更小的子模块。如图所示。这样可以根据具体的开发需求，选择加载最小功能单位的模块。就像吃自助餐一样，这种方式最节约。
25.
YUI3内部有一个插件机制。YUI3的结点对象或是基于Base类和Widget类创建的对象都会有一个Plug方法，通过它可以绑定插件。如，给所有图片安一个动画插件，图片就有了动画功能。同样，增加一个拖拽功能，直接装个拖拽的插件。（Demo）
26.
另外YUI3的类还有一个扩展机制，可以很快拼一个新类。比如，YUI3的Overlay组件，它的源文件只有一行。
YUI3内部提供的这些机制使模块的重用度非常高。
27.
要学习YUI3强烈建议大家看今年YUI大会的幻灯资料。都很精彩。
28.
我觉得现在比较好的开发架构是“框架”加“库”的模式。首先将所有功能模块化，然后利用YUI3建立模块间的依赖关系，将所有模块系统管理起来。原有的库也可以整合到框架中。最后统一用YUI3的基础组件框架开发组件。
29.
就好比，把一个庞大复杂的应用析构成若干小的模块开发。然后再有序的组织在一起。
30.
Demo: 利用YUI3组织代码
网易新闻频道首页的问题：Javascript代码是采用集中管理，你会看到当代码非常多的时候，可维护性就会变的很差，很难区分那些代码服务那些模块。当内容模块撤换时，代码就很容易遗留在页面中，造成冗余。另外像统一的头部导航，为了方便重用js代码只能直接写在页面内。
利用YUI3组织的话。首先把所有的功能做成模块，然后把模块的配置对象放到全局js文件里。这样head里只需要统一加载一个全局文件(15K)。在每个内容模块后面跟上相应的处理。由于是异步方式，所以不会对性能造成太大的影响。
31.
每个人写代码都会有自己的习惯和风格。尤其是不好的风格，会给协作开发带来了很大的问题。每个人都会有RTFS(read the fucking source)的经历。YUI3提供了3种基础的组件框架：Base, Widget和Plugin。基于统一的组件框架开发就会很一致。
32.
Demo: 自定义组件。我们看一个具体的例子。
一个基础的Widget框架模板是这样的，开发任何Widget直接copy它。它规定了一个统一的组件生命周期：初始化，渲染UI，在UI上绑定事件，同步UI，销毁。如果基于它开发组件都必须按照这个套路。
看看具体的代码。
34.
产品设计和技术只有紧密的配合才有可能创新。