Recommended
More Related Content
Similar to Creating custom modules using YUI3
Similar to Creating custom modules using YUI3 (20)
Recently uploaded
Recently uploaded (20)
Creating custom modules using YUI3
- 1. YUI3 - Creating Custom Modules Gonzalo Cordero Yahoo! Front End Engineer JSCONF 2010
- 5. YUI Add YUI.add('foo', function (Y) { JSCONF 2010
- 6. YUI Add YUI.add('foo', function (Y) { //All your properties go in here JSCONF 2010
- 7. YUI Add YUI.add('foo', function (Y) { //All your properties go in here Y.foo = "foo"; JSCONF 2010
- 8. YUI Add YUI.add('foo', function (Y) { //All your properties go in here Y.foo = "foo"; }); JSCONF 2010
- 9. Namespacing YUI.add('foo', function (Y) { Y.namespace("foo.bar"); Y.foo.bar= { init : function () { //init code } }; }); JSCONF 2010
- 10. YUI.add() - Version and requirements JSCONF 2010
- 11. YUI.add() - Version and requirements YUI.add('foo', function (Y) { JSCONF 2010
- 12. YUI.add() - Version and requirements YUI.add('foo', function (Y) { Y.foo = "foo"; JSCONF 2010
- 13. YUI.add() - Version and requirements YUI.add('foo', function (Y) { Y.foo = "foo"; },'0.0.1’, { requires: ['node'] }); JSCONF 2010
- 14. Augmenting your Module - YUI Base JSCONF 2010
- 15. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. JSCONF 2010
- 16. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property JSCONF 2010
- 17. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property ‣ Attrs property JSCONF 2010
- 18. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property ‣ Attrs property ‣ Custom events JSCONF 2010
- 19. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property ‣ Attrs property ‣ Custom events ‣ Initialization methods JSCONF 2010
- 20. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property ‣ Attrs property ‣ Custom events ‣ Initialization methods ‣ Destroy methods JSCONF 2010
- 21. YUI Base: Attribute JSCONF 2010
- 22. YUI Base: Attribute ‣ Consistent API and documentation - Blue prints JSCONF 2010
- 23. YUI Base: Attribute ‣ Consistent API and documentation - Blue prints ‣ Built in Setters and Getters JSCONF 2010
- 24. YUI Base: Attribute ‣ Consistent API and documentation - Blue prints ‣ Built in Setters and Getters ‣ NameSpacing JSCONF 2010
- 25. YUI Base: Attribute ‣ Consistent API and documentation - Blue prints ‣ Built in Setters and Getters ‣ NameSpacing http://developer.yahoo.com/yui/3/attribute/ JSCONF 2010
- 26. YUI Base : Attribute YUI.add('foo', function (Y) { function MyClass(config) { //Invoke Base constructor, passing through arguments MyClass.superclass.constructor.apply(this, arguments); } MyClass.NAME = “myName”; MyClass.ATTRS = { someAttribute: {}, someOther : {} } Y.extend(MyClass, Y.Base, { // Prototype methods for your new class }); }); JSCONF 2010
- 27. YUI Base - Events JSCONF 2010
- 28. YUI Base - Events ‣ Custom events JSCONF 2010
- 29. YUI Base - Events ‣ Custom events ‣ Bubbling JSCONF 2010
- 30. YUI Base - Events ‣ Custom events ‣ Bubbling ‣ Event Broadcasting JSCONF 2010
- 31. YUI Base - Events ‣ Custom events ‣ Bubbling ‣ Event Broadcasting http://developer.yahoo.com/yui/3/base/ JSCONF 2010
- 32. YUI Base YUI.add('foo', function (Y) { Goonie.prototype.neverSayDie = { this.fire(“neverSayDie”); } var myGoonie = new Goonie(); myGoonie.on(“neverSayDie”, function(e) { //Actually listening for (“Goonie:neverSayDie”); alert(“Hey you guys!!”); }); }); JSCONF 2010
- 33. Loading Strategies - By Inclusion YUI.add('today', function (Y) { Y.today = new Date(); },0.0.1,{requires[‘node’]}); YUI.use('today', function (Y) { Y.one('#when').setContent( Y.today ); }); JSCONF 2010
- 34. Loading Strategies - By Configuration YUI({ modules: { 'foo': { fullpath: 'foo.js', requires: ['node'] } }).use('foo', function (Y) { //foo ready to use }); JSCONF 2010
- 35. Loading strategies Or... JSCONF 2010
- 36. Introducing The YUI Gallery YUICONF 2009
- 37. I can haz YUI Gallery Image Title JSCONF 2010
- 38. Introducing YUI Gallery JSCONF 2010
- 39. Introducing YUI Gallery ‣ Instant access to hundreds of “first-class” modules. JSCONF 2010
- 40. Introducing YUI Gallery ‣ Instant access to hundreds of “first-class” modules. ‣ From developer to developer. JSCONF 2010
- 41. Introducing YUI Gallery ‣ Instant access to hundreds of “first-class” modules. ‣ From developer to developer. ‣ Simply by add them into your YUI.use() statement. JSCONF 2010
- 42. Introducing YUI Gallery ‣ Instant access to hundreds of “first-class” modules. ‣ From developer to developer. ‣ Simply by add them into your YUI.use() statement. ‣ Some examples: YQL module, Accordion, Twitter status display, etc. JSCONF 2010
- 43. JSCONF 2010
- 44. Demo: YQL + DD + Flickr YUI({gallery: 'gallery-2010.01.27-20'}).use("anim", "dd","gallery-yql", function (Y) { //On DropHit var flickrq = new Y.yql('select * from flickr.photos.search where (text = "'+tags+'")'); flickrq.on(‘query’,function(response) { //Load Photos }); }); JSCONF 2010
- 45. Contributing to the YUI Gallery JSCONF 2010
- 47. Benefits ‣ Your code in our CDN! JSCONF 2010
- 48. Benefits ‣ Your code in our CDN! ‣ Your module live within one week JSCONF 2010
- 49. Benefits ‣ Your code in our CDN! ‣ Your module live within one week ‣ Visibility JSCONF 2010
- 50. Benefits ‣ Your code in our CDN! ‣ Your module live within one week ‣ Visibility ‣ Easy access within your YUI().use statament. JSCONF 2010
- 51. Benefits ‣ Your code in our CDN! ‣ Your module live within one week ‣ Visibility ‣ Easy access within your YUI().use statament. ‣ Contributing and being part of the JS community. JSCONF 2010
- 52. How to contribute JSCONF 2010
- 53. How to contribute ‣ 1 - Create your module JSCONF 2010
- 54. How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account JSCONF 2010
- 55. How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account ‣ 3- Fork YUI3 on github JSCONF 2010
- 56. How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account ‣ 3- Fork YUI3 on github ‣ 4- Submit your module JSCONF 2010
- 57. How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account ‣ 3- Fork YUI3 on github ‣ 4- Submit your module ‣ 5- Get approved - Your code now live on Yahoo! CDN servers. JSCONF 2010
- 58. How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account ‣ 3- Fork YUI3 on github ‣ 4- Submit your module ‣ 5- Get approved - Your code now live on Yahoo! CDN servers. http://yuilibrary.com/gallery/ JSCONF 2010
- 59. YUI3 - Custom Modules Gonzalo Cordero yuilibrary: gonzalocordero github: goonieiam twitter: @goonieiam JSCONF 2009
Editor's Notes
- In YUI 3, the new global is YUI YUI is a function, not just an object bag ala YAHOO. It returns an instance, your sandbox. The library API is added to the YUI instance, not YUI. Facilitates having multiple sandboxes on a page w/o collision.
- - Custom modules are made available to YUI instances by registering themselves via YUI.add() - As with Y.use(), YUI.add() provides an applied module pattern - This gives you a truly private space to define vars and functions local to your module - Code defined inside add() is held by the YUI infrastructure to execute at the proper time - Module code is not executed until a YUI instance requests it via Y.use('my-module', function (Y) {...}); but it is executed at some point after its required modules and before the use callback.
- - Custom modules are made available to YUI instances by registering themselves via YUI.add() - As with Y.use(), YUI.add() provides an applied module pattern - This gives you a truly private space to define vars and functions local to your module - Code defined inside add() is held by the YUI infrastructure to execute at the proper time - Module code is not executed until a YUI instance requests it via Y.use('my-module', function (Y) {...}); but it is executed at some point after its required modules and before the use callback.
- - Custom modules are made available to YUI instances by registering themselves via YUI.add() - As with Y.use(), YUI.add() provides an applied module pattern - This gives you a truly private space to define vars and functions local to your module - Code defined inside add() is held by the YUI infrastructure to execute at the proper time - Module code is not executed until a YUI instance requests it via Y.use('my-module', function (Y) {...}); but it is executed at some point after its required modules and before the use callback.
- - Custom modules are made available to YUI instances by registering themselves via YUI.add() - As with Y.use(), YUI.add() provides an applied module pattern - This gives you a truly private space to define vars and functions local to your module - Code defined inside add() is held by the YUI infrastructure to execute at the proper time - Module code is not executed until a YUI instance requests it via Y.use('my-module', function (Y) {...}); but it is executed at some point after its required modules and before the use callback.
- - 'version' has nothing to do with the YUI version you require - 'version' allows you to define version information for your component - 'requires' defines the dependancies for your component
- - 'version' has nothing to do with the YUI version you require - 'version' allows you to define version information for your component - 'requires' defines the dependancies for your component
- - 'version' has nothing to do with the YUI version you require - 'version' allows you to define version information for your component - 'requires' defines the dependancies for your component