This document compares YUI 2 and YUI 3 JavaScript frameworks. YUI 3 represents a significant evolution from YUI 2. Some key points: - YUI 3 was released in 2008 as a major rewrite, focusing on modularity, extensibility and a plugin architecture. - It uses a Base, Widget and Plugin model for developing reusable components in a simpler, more object-oriented way compared to YUI 2. - YUI 3 aims to provide a more modular, extensible and flexible foundation for building rich JavaScript applications compared to the older YUI 2 framework.

1. YUI 2 YUI 3
http://hikejun.com
twitter: @kejunz
: http://hikejun.com/sharing/yui_evolve.zip

2. -
http://hikejun.com
Twitter: @kejunz

3. 1996/3 - Javascript 1.0
2000/11 - Javascript 1.5

4. 2005 2009

5. 2003 2009

6. 2005
Javascript

7. Usability Economy Design
Standardization Remixability Convergence
Participation Widgets Collaboration Sharing Pagerank User Centered
Perpetual Beta Trust FOAF Six Degrees XFN Aggregators VC Pay Per Click Ruby on
Rails Syndication SOAP REST SEO IM XHTML Accessibility Semanti XML UMTS
Videocasting Podcasting SVG Atom Web 2.0 Modularity
Wikis Simplicity Joy of Use AJAX The Long
Browser OpenID
Tail Affiliation CSS Web Standards Microformats
DataDriven OpenAPIs RSS Mobility Video Audio Blogs
Social Software Recommendation Folksonomy
http://en.wikipedia.org/wiki/File:Web_2.0_Map.svg

8. “ ”

9. • 2005 Prototyp Dojo UIZE
• 2006 jQuery YUI MooTools
• 2007 Ext
• 2008 QooXDoo Archetype
http://www.tripwiremagazine.com/tools/developer-toolbox/top-10-javascript-frameworks-by-google.html

10. • (DOM, Event)
• ( ... )
• Ajax
• RIA Widget ( , Treeview ... )
• Javascript (OOP Array.indexOf ...)

11. 2006/2/13 YUI beta(0.10.0)
dom, event, animation, dragdrop, connection
calendar, slider, treeview

12. 2007/2
dom, event, animation, dragdrop, connection,
browser history manager, datasource, element
calendar, slider, treeview, autocomplete, button,
container, datatable, logger, menu, tabview

13. 2008/2
dom, event, animation, dragdrop, connection,
browser history manager, datasource,
element, selector, get, json, resize, image cropper,
image loader, cookie,YUITest,YUILoader, profiler,
profilerViewer
calendar, slider, treeview, autocomplete, button,
container, datatable, logger, menu, tabview, color
picker, charts, RTE, layout manager, uploader

14. 2009/9/14 YUI 2.8.0
dom, event, animation, dragdrop, connection,
browser history manager, datasource,
element, selector, get, json, resize, image cropper,
image loader, cookie,YUITest,YUILoader, profiler,
profilerViewer, stylesheet, storge, swfstorge,
swf
calendar, slider, treeview, autocomplete, button,
container, datatable, logger, menu, tabview, color
picker, charts, RTE, layout manager,
uploader, paginator, progressbar, carousel

15. http://www.flickr.com/photos/bre/552152780/

16. Utilities: Widgets: Tools: jQuery Plugins
dom, event, YUITest,
calendar, slider,
animation, dragdrop, profiler,
treeview,
connection, browser profilerViewer,
history manager,
autocomplete,
logger jQuery UI
button, container,
datasource,
datatable, menu,
element, selector,
get, json, resize,
image cropper, image
tabview, color
picker, charts, RTE, jQuery 1.3.2 (56K)
layout manager,
loader,
cookie, stylesheet,
uploader, paginato
r, progressbar,
Animation (Effects)
storge, swfstorge,
carousel
swf Event (DOM Event, , ...)
YUI 2.8.0 (29K) DOM (selector, attributes,
YUI Loader traversing, Manipulation, css ...)
lang (object, date, arry, string, UA ...) lang (object, date, array, string, UA ...)

17. “ ”

18. “ ”
(Core)

19. “ ”
(Core)

20. “ ”
(Core)

21. “ ”
( ) ( ) ... ( )
(Core)

23. http://www.flickr.com/photos/hansandcarolyn/3102798232/

24. •
•
• JS/CSS Inline
•

25. “ ” “ ”
“ ” “ ”

26. “ ”
“ ”

27. Framework: A framework is a basic
conceptual structure used to solve
or address complex issues.
WikiPedia
( ,
.)
http://plog.longwin.com.tw/document-ebook/2009/12/04/what-is-framework-2009

28. YUI - YUI 3
• 2008/8/13 - YUI 3 PR 1
• 2008/12/9 - YUI 3 PR 2
• 2009/6/24 - YUI 3 Beta 1
• 2009/9/29 - YUI 3 GA

29. io-base
io-xdr
io-form
io-upload-iframe dd-ddm-base
io io-queue dd-ddm
dd-ddm-drop
dd-drag
dd-drop
dd-proxy
dd-constrain
dd-scroll
dd dd-plugin
dd-drop-plugin
anim-base
anim-color
anim-easing
anim-scroll
anim anim-xy
anim-curve
anim-node-plugin
!" #" $!" $#" %!" %#" &!" &#"

30. Plugin
Y.all('.fadein img').plug(Y.Plugin.NodeFX);
Y.all('.fadein img').item(0).fx.set('to', {opacity: 0}).run();
Y.one('.fadein').plug(Y.Plugin.Drag);

31. Extensions
Y.Overlay = Y.Base.build(
"overlay",
Y.Widget,
[Y.WidgetPosition, Y.WidgetStack,
Y.WidgetPositionExt, Y.WidgetStdMod]
);

32. http://yuilibrary.com/yuiconf2009/
http://www.flickr.com/photos/equanimity/4055275059/

33. “ ” “ ”
•
• YUI3
•
• YUI3

34. http://www.flickr.com/photos/lightning72/3973881470/

35. Demo: YUI3

36. YUI 3
• Base
• Widget
• Plugin

37. Demo:

38. Design
+
Development
||
D2

40. Q&A

41. :-)