从YUI2到YUI3看前端的演变

6,811 views
6,712 views

Published on

第四届D2分享

0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,811
On SlideShare
0
From Embeds
0
Number of Embeds
3,023
Actions
Shares
0
Downloads
164
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

从YUI2到YUI3看前端的演变

  1. 1. YUI 2 YUI 3 http://hikejun.com twitter: @kejunz : http://hikejun.com/sharing/yui_evolve.zip
  2. 2. - http://hikejun.com Twitter: @kejunz
  3. 3. 1996/3 - Javascript 1.0 2000/11 - Javascript 1.5
  4. 4. 2005 2009
  5. 5. 2003 2009
  6. 6. 2005 Javascript
  7. 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. 8. “ ”
  9. 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. 10. • (DOM, Event) • ( ... ) • Ajax • RIA Widget ( , Treeview ... ) • Javascript (OOP Array.indexOf ...)
  11. 11. 2006/2/13 YUI beta(0.10.0) dom, event, animation, dragdrop, connection calendar, slider, treeview
  12. 12. 2007/2 dom, event, animation, dragdrop, connection, browser history manager, datasource, element calendar, slider, treeview, autocomplete, button, container, datatable, logger, menu, tabview
  13. 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. 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. 15. http://www.flickr.com/photos/bre/552152780/
  16. 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. 17. “ ”
  18. 18. “ ” (Core)
  19. 19. “ ” (Core)
  20. 20. “ ” (Core)
  21. 21. “ ” ( ) ( ) ... ( ) (Core)
  22. 22. http://www.flickr.com/photos/hansandcarolyn/3102798232/
  23. 23. • • • JS/CSS Inline •
  24. 24. “ ” “ ” “ ” “ ”
  25. 25. “ ” “ ”
  26. 26. 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
  27. 27. 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
  28. 28. 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 !" #" $!" $#" %!" %#" &!" &#"
  29. 29. 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);
  30. 30. Extensions Y.Overlay = Y.Base.build( "overlay", Y.Widget, [Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionExt, Y.WidgetStdMod] );
  31. 31. http://yuilibrary.com/yuiconf2009/ http://www.flickr.com/photos/equanimity/4055275059/
  32. 32. “ ” “ ” • • YUI3 • • YUI3
  33. 33. http://www.flickr.com/photos/lightning72/3973881470/
  34. 34. Demo: YUI3
  35. 35. YUI 3 • Base • Widget • Plugin
  36. 36. Demo:
  37. 37. Design + Development || D2
  38. 38. Q&A
  39. 39. :-)

×