• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating custom modules using YUI3
 

Creating custom modules using YUI3

on

  • 6,063 views

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.

Statistics

Views

Total Views
6,063
Views on SlideShare
6,000
Embed Views
63

Actions

Likes
12
Downloads
103
Comments
0

6 Embeds 63

http://wiki.ued.taobao.net 35
http://www.slideshare.net 24
http://health.medicbd.com 1
http://twitter.com 1
http://www.twylah.com 1
http://www.docseek.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • In YUI 3, the new global is YUI <br /> <br /> YUI is a function, not just an object bag ala YAHOO. It returns an instance, your sandbox. <br /> <br /> The library API is added to the YUI instance, not YUI. <br /> <br /> Facilitates having multiple sandboxes on a page w/o collision. <br />
  • <br />
  • - Custom modules are made available to YUI instances by registering themselves via YUI.add() <br /> <br /> - As with Y.use(), YUI.add() provides an applied module pattern <br /> <br /> - This gives you a truly private space to define vars and functions local to your module <br /> <br /> - Code defined inside add() is held by the YUI infrastructure to execute at the proper time <br /> <br /> - Module code is not executed until a YUI instance requests it via Y.use(&apos;my-module&apos;, function (Y) {...}); but it is executed at some point after its required modules and before the use callback. <br /> <br />
  • - Custom modules are made available to YUI instances by registering themselves via YUI.add() <br /> <br /> - As with Y.use(), YUI.add() provides an applied module pattern <br /> <br /> - This gives you a truly private space to define vars and functions local to your module <br /> <br /> - Code defined inside add() is held by the YUI infrastructure to execute at the proper time <br /> <br /> - Module code is not executed until a YUI instance requests it via Y.use(&apos;my-module&apos;, function (Y) {...}); but it is executed at some point after its required modules and before the use callback. <br /> <br />
  • - Custom modules are made available to YUI instances by registering themselves via YUI.add() <br /> <br /> - As with Y.use(), YUI.add() provides an applied module pattern <br /> <br /> - This gives you a truly private space to define vars and functions local to your module <br /> <br /> - Code defined inside add() is held by the YUI infrastructure to execute at the proper time <br /> <br /> - Module code is not executed until a YUI instance requests it via Y.use(&apos;my-module&apos;, function (Y) {...}); but it is executed at some point after its required modules and before the use callback. <br /> <br />
  • - Custom modules are made available to YUI instances by registering themselves via YUI.add() <br /> <br /> - As with Y.use(), YUI.add() provides an applied module pattern <br /> <br /> - This gives you a truly private space to define vars and functions local to your module <br /> <br /> - Code defined inside add() is held by the YUI infrastructure to execute at the proper time <br /> <br /> - Module code is not executed until a YUI instance requests it via Y.use(&apos;my-module&apos;, function (Y) {...}); but it is executed at some point after its required modules and before the use callback. <br /> <br />
  • <br />
  • - &apos;version&apos; has nothing to do with the YUI version you require <br /> <br /> - &apos;version&apos; allows you to define version information for your component <br /> <br /> - &apos;requires&apos; defines the dependancies for your component <br />
  • - &apos;version&apos; has nothing to do with the YUI version you require <br /> <br /> - &apos;version&apos; allows you to define version information for your component <br /> <br /> - &apos;requires&apos; defines the dependancies for your component <br />
  • - &apos;version&apos; has nothing to do with the YUI version you require <br /> <br /> - &apos;version&apos; allows you to define version information for your component <br /> <br /> - &apos;requires&apos; defines the dependancies for your component <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Creating custom modules using YUI3 Creating custom modules using YUI3 Presentation Transcript

  • YUI3 - Creating Custom Modules Gonzalo Cordero Yahoo! Front End Engineer JSCONF 2010
  • YUI() JSCONF 2010
  • <script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"> </script> JSCONF 2010
  • YUI Add JSCONF 2010
  • YUI Add YUI.add('foo', function (Y) { JSCONF 2010
  • YUI Add YUI.add('foo', function (Y) { //All your properties go in here JSCONF 2010
  • YUI Add YUI.add('foo', function (Y) { //All your properties go in here Y.foo = "foo"; JSCONF 2010
  • YUI Add YUI.add('foo', function (Y) { //All your properties go in here Y.foo = "foo"; }); JSCONF 2010
  • Namespacing YUI.add('foo', function (Y) { Y.namespace("foo.bar"); Y.foo.bar= { init : function () { //init code } }; }); JSCONF 2010
  • YUI.add() - Version and requirements JSCONF 2010
  • YUI.add() - Version and requirements YUI.add('foo', function (Y) { JSCONF 2010
  • YUI.add() - Version and requirements YUI.add('foo', function (Y) { Y.foo = "foo"; JSCONF 2010
  • YUI.add() - Version and requirements YUI.add('foo', function (Y) { Y.foo = "foo"; },'0.0.1’, { requires: ['node'] }); JSCONF 2010
  • Augmenting your Module - YUI Base JSCONF 2010
  • Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. JSCONF 2010
  • Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property JSCONF 2010
  • Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property ‣ Attrs property JSCONF 2010
  • Augmenting your Module - YUI Base ‣ Base provides a standard template for creating modules with consistent API. ‣ NAME property ‣ Attrs property ‣ Custom events JSCONF 2010
  • 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
  • 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
  • YUI Base: Attribute JSCONF 2010
  • YUI Base: Attribute ‣ Consistent API and documentation - Blue prints JSCONF 2010
  • YUI Base: Attribute ‣ Consistent API and documentation - Blue prints ‣ Built in Setters and Getters JSCONF 2010
  • YUI Base: Attribute ‣ Consistent API and documentation - Blue prints ‣ Built in Setters and Getters ‣ NameSpacing JSCONF 2010
  • YUI Base: Attribute ‣ Consistent API and documentation - Blue prints ‣ Built in Setters and Getters ‣ NameSpacing http://developer.yahoo.com/yui/3/attribute/ JSCONF 2010
  • 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
  • YUI Base - Events JSCONF 2010
  • YUI Base - Events ‣ Custom events JSCONF 2010
  • YUI Base - Events ‣ Custom events ‣ Bubbling JSCONF 2010
  • YUI Base - Events ‣ Custom events ‣ Bubbling ‣ Event Broadcasting JSCONF 2010
  • YUI Base - Events ‣ Custom events ‣ Bubbling ‣ Event Broadcasting http://developer.yahoo.com/yui/3/base/ JSCONF 2010
  • 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
  • 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
  • Loading Strategies - By Configuration YUI({ modules: { 'foo': { fullpath: 'foo.js', requires: ['node'] } }).use('foo', function (Y) { //foo ready to use }); JSCONF 2010
  • Loading strategies Or... JSCONF 2010
  • Introducing The YUI Gallery YUICONF 2009
  • I can haz YUI Gallery Image Title JSCONF 2010
  • Introducing YUI Gallery JSCONF 2010
  • Introducing YUI Gallery ‣ Instant access to hundreds of “first-class” modules. JSCONF 2010
  • Introducing YUI Gallery ‣ Instant access to hundreds of “first-class” modules. ‣ From developer to developer. JSCONF 2010
  • 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
  • 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
  • JSCONF 2010
  • 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
  • Contributing to the YUI Gallery JSCONF 2010
  • Benefits JSCONF 2010
  • Benefits ‣ Your code in our CDN! JSCONF 2010
  • Benefits ‣ Your code in our CDN! ‣ Your module live within one week JSCONF 2010
  • Benefits ‣ Your code in our CDN! ‣ Your module live within one week ‣ Visibility JSCONF 2010
  • Benefits ‣ Your code in our CDN! ‣ Your module live within one week ‣ Visibility ‣ Easy access within your YUI().use statament. JSCONF 2010
  • 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
  • How to contribute JSCONF 2010
  • How to contribute ‣ 1 - Create your module JSCONF 2010
  • How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account JSCONF 2010
  • How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account ‣ 3- Fork YUI3 on github JSCONF 2010
  • How to contribute ‣ 1 - Create your module ‣ 2 - Create a YUI Library account ‣ 3- Fork YUI3 on github ‣ 4- Submit your module JSCONF 2010
  • 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
  • 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
  • YUI3 - Custom Modules Gonzalo Cordero yuilibrary: gonzalocordero github: goonieiam twitter: @goonieiam JSCONF 2009