Your SlideShare is downloading. ×
Creating custom modules using YUI3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Creating custom modules using YUI3

4,941
views

Published on

Presentation on how to create custom modules using YUI3 and how to submit them to the YUI Gallery.

Presentation on how to create custom modules using YUI3 and how to submit them to the YUI Gallery.

Published in: Technology

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

No Downloads
Views
Total Views
4,941
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
103
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

  • 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








































  • Transcript

    • 1. YUI3 - Creating Custom Modules Gonzalo Cordero Yahoo! Front End Engineer JSCONF 2010
    • 2. YUI() JSCONF 2010
    • 3. <script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"> </script> JSCONF 2010
    • 4. YUI Add 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
    • 46. Benefits 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

    ×