Creating custom modules using YUI3

5,386 views

Published on

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
5,386
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
106
Comments
0
Likes
12
Embeds 0
No embeds

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








































  • Creating custom modules using YUI3

    1. 1. YUI3 - Creating Custom Modules Gonzalo Cordero Yahoo! Front End Engineer JSCONF 2010
    2. 2. YUI() JSCONF 2010
    3. 3. <script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"> </script> JSCONF 2010
    4. 4. YUI Add JSCONF 2010
    5. 5. YUI Add YUI.add('foo', function (Y) { JSCONF 2010
    6. 6. YUI Add YUI.add('foo', function (Y) { //All your properties go in here JSCONF 2010
    7. 7. YUI Add YUI.add('foo', function (Y) { //All your properties go in here Y.foo = "foo"; JSCONF 2010
    8. 8. YUI Add YUI.add('foo', function (Y) { //All your properties go in here Y.foo = "foo"; }); JSCONF 2010
    9. 9. Namespacing YUI.add('foo', function (Y) { Y.namespace("foo.bar"); Y.foo.bar= { init : function () { //init code } }; }); JSCONF 2010
    10. 10. YUI.add() - Version and requirements JSCONF 2010
    11. 11. YUI.add() - Version and requirements YUI.add('foo', function (Y) { JSCONF 2010
    12. 12. YUI.add() - Version and requirements YUI.add('foo', function (Y) { Y.foo = "foo"; JSCONF 2010
    13. 13. YUI.add() - Version and requirements YUI.add('foo', function (Y) { Y.foo = "foo"; },'0.0.1’, { requires: ['node'] }); JSCONF 2010
    14. 14. Augmenting your Module - YUI Base JSCONF 2010
    15. 15. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. JSCONF 2010
    16. 16. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property JSCONF 2010
    17. 17. Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property ‣ Attrs property JSCONF 2010
    18. 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. 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. 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. 21. YUI Base: Attribute JSCONF 2010
    22. 22. YUI Base: Attribute ‣ Consistent API and documentation - Blue prints JSCONF 2010
    23. 23. YUI Base: Attribute ‣ Consistent API and documentation - Blue prints ‣ Built in Setters and Getters JSCONF 2010
    24. 24. YUI Base: Attribute ‣ Consistent API and documentation - Blue prints ‣ Built in Setters and Getters ‣ NameSpacing JSCONF 2010
    25. 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. 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. 27. YUI Base - Events JSCONF 2010
    28. 28. YUI Base - Events ‣ Custom events JSCONF 2010
    29. 29. YUI Base - Events ‣ Custom events ‣ Bubbling JSCONF 2010
    30. 30. YUI Base - Events ‣ Custom events ‣ Bubbling ‣ Event Broadcasting JSCONF 2010
    31. 31. YUI Base - Events ‣ Custom events ‣ Bubbling ‣ Event Broadcasting http://developer.yahoo.com/yui/3/base/ JSCONF 2010
    32. 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. 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. 34. Loading Strategies - By Configuration YUI({ modules: { 'foo': { fullpath: 'foo.js', requires: ['node'] } }).use('foo', function (Y) { //foo ready to use }); JSCONF 2010
    35. 35. Loading strategies Or... JSCONF 2010
    36. 36. Introducing The YUI Gallery YUICONF 2009
    37. 37. I can haz YUI Gallery Image Title JSCONF 2010
    38. 38. Introducing YUI Gallery JSCONF 2010
    39. 39. Introducing YUI Gallery ‣ Instant access to hundreds of “first-class” modules. JSCONF 2010
    40. 40. Introducing YUI Gallery ‣ Instant access to hundreds of “first-class” modules. ‣ From developer to developer. JSCONF 2010
    41. 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. 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. 43. JSCONF 2010
    44. 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. 45. Contributing to the YUI Gallery JSCONF 2010
    46. 46. Benefits JSCONF 2010
    47. 47. Benefits ‣ Your code in our CDN! JSCONF 2010
    48. 48. Benefits ‣ Your code in our CDN! ‣ Your module live within one week JSCONF 2010
    49. 49. Benefits ‣ Your code in our CDN! ‣ Your module live within one week ‣ Visibility JSCONF 2010
    50. 50. Benefits ‣ Your code in our CDN! ‣ Your module live within one week ‣ Visibility ‣ Easy access within your YUI().use statament. JSCONF 2010
    51. 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. 52. How to contribute JSCONF 2010
    53. 53. How to contribute ‣ 1 - Create your module JSCONF 2010
    54. 54. How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account JSCONF 2010
    55. 55. How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account ‣ 3- Fork YUI3 on github JSCONF 2010
    56. 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. 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. 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. 59. YUI3 - Custom Modules Gonzalo Cordero yuilibrary: gonzalocordero github: goonieiam twitter: @goonieiam JSCONF 2009

    ×