YUI 2                 YUI 3


         http://hikejun.com
         twitter: @kejunz



: http://hikejun.com/sharing/yui_ev...
-
http://hikejun.com
Twitter: @kejunz
1996/3 - Javascript 1.0
2000/11 - Javascript 1.5
2005   2009
2003   2009
2005
Javascript
Usability Economy Design
                         Standardization Remixability Convergence
                          Parti...
“ ”
• 2005 Prototyp Dojo UIZE
                    • 2006 jQuery YUI MooTools
                    • 2007 Ext
                  ...
•            (DOM, Event)

•                  (            ... )

• Ajax
• RIA   Widget (      , Treeview ... )

• Javascr...
2006/2/13 YUI beta(0.10.0)
dom, event, animation, dragdrop, connection


calendar, slider, treeview
2007/2
dom, event, animation, dragdrop, connection,
browser history manager, datasource, element

calendar, slider, treevi...
2008/2
dom, event, animation, dragdrop, connection,
browser history manager, datasource,
element, selector, get, json, res...
2009/9/14 YUI 2.8.0
dom, event, animation, dragdrop, connection,
browser history manager, datasource,
element, selector, g...
http://www.flickr.com/photos/bre/552152780/
Utilities:             Widgets:               Tools:                     jQuery Plugins
dom, event,                       ...
“ ”
“ ”




      (Core)
“ ”




      (Core)
“ ”




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




                (Core)
http://www.flickr.com/photos/hansandcarolyn/3102798232/
•
•
• JS/CSS   Inline
•
“ ” “       ”
“ ”     “   ”
“       ”




“   ”
Framework: A framework is a basic
         conceptual structure used to solve
         or address complex issues.
        ...
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 ...
io-base
                          io-xdr
                          io-form
                          io-upload-iframe     ...
Plugin
Y.all('.fadein img').plug(Y.Plugin.NodeFX);
Y.all('.fadein img').item(0).fx.set('to', {opacity: 0}).run();


Y.one(...
Extensions
Y.Overlay = Y.Base.build(
    "overlay",
    Y.Widget,
    [Y.WidgetPosition, Y.WidgetStack,
    Y.WidgetPositi...
http://yuilibrary.com/yuiconf2009/




http://www.flickr.com/photos/equanimity/4055275059/
“          ” “ ”

•
•   YUI3
•
•    YUI3
http://www.flickr.com/photos/lightning72/3973881470/
Demo:   YUI3
YUI 3

• Base
• Widget
• Plugin
Demo:
Design
    +

Development
     ||

    D2
Q&A
:-)
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
Upcoming SlideShare
Loading in …5
×

从YUI2到YUI3看前端的演变

7,030 views

Published on

第四届D2分享

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

No Downloads
Views
Total views
7,030
On SlideShare
0
From Embeds
0
Number of Embeds
3,017
Actions
Shares
0
Downloads
166
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. :-)

×