从YUI2到YUI3看前端的演变

从YUI2到YUI3看前端的演变

Transcript

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. http://en.wikipedia.org/wiki/File:Web_2.0_Map.svg 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 Browser OpenID Wikis Simplicity Joy of Use AJAX The Long Tail Affiliation CSS Web Standards Microformats DataDriven OpenAPIs RSS Mobility Video Audio Blogs Social Software Recommendation Folksonomy
8. “९”ൈսটਢ
9. • 2005 PrototypaDojoaUIZE • 2006 jQueryaYUIaMooTools • 2007 Ext • 2008 QooXDooaArchetype http://www.tripwiremagazine.com/tools/developer-toolbox/top-10-javascript-frameworks-by-google.html
10. • ᛍফఖ࡙ಸྟ (DOM, Event) • گᄖࢌ޺ބ׮෿ིݔ (຀ሄa׮߂ ... ) • AjaxႋႨ • RIA॥ࡱčWidgetĎ(ರ৥, Treeview ... ) • ঔᅚJavascript (OOPaArray.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. lang (object, date, array, string, UA ...) DOM (selector, attributes, traversing, Manipulation, css ...) Event (DOM Event, ห൹൙ࡱ, ሱקၬ൙ࡱ...) Animation (Effects) jQuery 1.3.2 (56K) jQuery UI jQuery Plugins lang (object, date, arry, string, UA ...) YUI Loader YUI 2.8.0 (29K) Utilities: dom, event, animation, dragdrop, connection, browser history manager, datasource, element, selector, get, json, resize, image cropper, image loader, cookie, stylesheet, storge, swfstorge, swf Widgets: calendar, slider, treeview, autocomplete, button, container, datatable, menu, tabview, color picker, charts, RTE, layout manager, uploader, paginato r, progressbar, carousel Tools: YUITest, profiler, profilerViewer, logger ഡ࠹҂๝đଢѓ၂ᇁ
17. “९”ڄ۬षؿ
18. ࠎЧۿି९(Core) “९”ڄ۬षؿ
19. ࠎЧۿି९(Core) ঔᅚۿି९ “९”ڄ۬षؿ
20. ࠎЧۿି९(Core) ঔᅚۿି९ ႋႨ֥ނྏ९ “९”ڄ۬षؿ
21. ࠎЧۿି९(Core) ঔᅚۿି९ ႋႨ֥ނྏ९ ቆࡱ (ଆॶ) ቆࡱ (ଆॶ) ቆࡱ (ଆॶ) ... “९”ڄ۬षؿ
23. http://www.flickr.com/photos/hansandcarolyn/3102798232/
24. • ؟ದླྀቔ • Էྍླ౰ᄀটᄀ؟ • JS/CSS໓ࡱaInlineս઒֥ܵ৘໙ี • ॖӻ࿃ྟषؿ ྍൈ௹֥หׄ
25. “९”ཟ“ॿࡏ”ဆэ “९”ڄ۬षؿཟ“ॿࡏ”ڄ۬ဆэ
26. “ॿࡏ”֥ࢳ൤ æࡹᇽ۽ӱᇏđႮਃaᇸ֩৳ࢲطӮ֥ࢲܒb çбნ൙໾֥ቆᆮaࢲܒb “९”֥ࢳ൤ ᇻթת༆֥ٜ໬ࠇֹٚb
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 dd anim io-base io-xdr io-form io-upload-iframe io-queue dd-ddm-base dd-ddm dd-ddm-drop dd-drag dd-drop dd-proxy dd-constrain dd-scroll dd-plugin dd-drop-plugin anim-base anim-color anim-easing anim-scroll 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. Y.Overlay = Y.Base.build( "overlay", Y.Widget, [Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionExt, Y.WidgetStdMod] ); Extensions
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. • Base • Widget • Plugin YUI 3֥ቆࡱॿࡏ
37. Demo: ሱקၬቆࡱ
38. ݺ֥ഡ࠹౺׮࠯ඌԷྍ Design + ݺ֥࠯ඌູഡ࠹ิ܂໭ཋམའ Development || D2
40. Q&A
41. ྆྆ :-)