building yui 3 custom modules
DESCRIPTION
Learn how to leverage the YUI 3.x infrastructure to create custom code that can be loaded easily and efficiently onto any page. Also discover how these mashups can combine YUI widgets and utilities with your own code and how to reuse code between different YUI instances. Caridy is a Senior Frontend Engineer and JavaScript Nerd at Yahoo! and an active YUI contributor. He's also the creator of the Bubbling Library YUI Extension.TRANSCRIPT
![Page 1: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/1.jpg)
Building YUI 3 Custom Modules
Caridy Patino Frontend Engineer at Yahoo!
YUI Contributor
Bubbling Library Creator
![Page 2: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/2.jpg)
Overview
- YUI 3 and Modules
- Using Custom Modules in YUI 3
- Extending and Building Custom Modules
- Supporting Legacy Code
- Best Practices / Techniques
![Page 3: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/3.jpg)
What is a module in YUI 3?
![Page 4: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/4.jpg)
YUI 3 Modules
![Page 5: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/5.jpg)
Using a module
YUI().use(‘node’, function (Y) {
Y.one (‘div.status’).setContent (‘ready!’);
});
![Page 6: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/6.jpg)
Using multiple modules
YUI().use(‘node’,‘anim’,function(Y) {
Y.one (‘div.status’).setContent (‘ready!’);
new Y.Anim({ node: '#demo', to: {opacity: 0} });
});
![Page 7: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/7.jpg)
Sandboxing modules
var Y = new YUI();Y.use(‘node’, ‘anim’, function (Y) {
Y.one (‘div.status’).setContent (‘ready!’);
new Y.Anim({ node: '#demo', to: {opacity: 0} });
});
![Page 8: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/8.jpg)
Sandboxing modules
( new YUI ).use(‘node’, ‘anim’, function (Y) {
Y.one (‘div.status’).setContent (‘ready!’);
new Y.Anim({ node: '#demo', to: {opacity: 0} });
});
![Page 9: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/9.jpg)
Sandboxing modules
![Page 10: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/10.jpg)
Different sets of modules
YUI 3 Modules
![Page 11: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/11.jpg)
Different sets of modules
YUI 3 Modules
Community modules
gallery-*
![Page 12: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/12.jpg)
Different sets of modules
YUI 3 Modules
Community modules
gallery-*
Project modules project-*
![Page 13: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/13.jpg)
Community modules
Time Picker
Accordion / Node Accordion
YQL
![Page 14: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/14.jpg)
Project modules
![Page 15: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/15.jpg)
How to use Custom Modules in YUI 3?
![Page 16: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/16.jpg)
Custom Module Registration
- By seed (YUI Loader) YUI().use …
- By inclusion register then YUI().use …
- By configuration YUI( /* config */ ).use …
![Page 17: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/17.jpg)
Registration by seed
<script src=”http://yui.yahooapis.../yui-min.js”></script>
<script>YUI().use (‘node’, ‘anim’, function (Y) {
new Y.Anim({ node: '#demo', to: {opacity: 0} });
Y.one (‘div.status’).setContent (‘ready!’);
});</script>
![Page 18: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/18.jpg)
Registration by inclusion
<script src=”http://yui.yahooapis.../yui-min.js”></script>
<script src=” http://yui.yahooapi.../build/gallery-yql/gallery-yql.js”></script>
<script>
YUI().use (‘gallery-yql’, function(Y) {
new Y.yql('select * from github.user.info where (id=”caridy")', function(r) { r.query; // The result });
});</script>
![Page 19: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/19.jpg)
Registration by configuration
<script src=”http://yui.yahooapis.../yui-min.js”></script><script>YUI({ modules: { 'gallery-yql': { fullpath: 'http://yui.yahooapi.../build/gallery-yql/gallery-yql.js', requires: ["get","event-custom"] } }}).use (‘gallery-yql’, function(Y) { new Y.yql('select * from github.user.info where (id=”caridy")', function(r) { r.query; // The result });});</script>
![Page 20: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/20.jpg)
Organizing configuration
- Global object called “YUI_config” (YAHOO_config in YUI 2.x)
- Multiple config objectsYUI( c1, c2, c3, .., c5 ).use
![Page 21: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/21.jpg)
Organizing configuration (cont.)
YUI_config = { modules: {
‘foo’: { fullpath: ‘/js/foo.js’, requires: [‘node’] },‘bar’: { fullpath: ‘/js/bar.js’, requires: [‘anim’, ‘foo’] }
}};
YUI().use (‘foo’, function (Y) { /* … */});
YUI( MY_YUI_config, { /* c2 */ } ).use (‘bar’, ‘c2-mod’, function (Y) { /* … */});
![Page 22: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/22.jpg)
How to build a Custom Modules?
![Page 23: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/23.jpg)
Defining a module
YUI.add(‘foo’, function (Y) {
// Add the code for your module here. // Here Y is the YUI instance this module // was added to.
}, ‘0.0.1’, { requires: [‘node’] });
![Page 24: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/24.jpg)
Different types of implementations
Utilities Y.oneY.ioY.youtube.play
![Page 25: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/25.jpg)
Different types of implementations
Utilities Classes
Y.AnimY.App.Box
![Page 26: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/26.jpg)
Different types of implementations
Utilities Classes
Plugins
Y.Plugin.NodeAccordion
![Page 27: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/27.jpg)
Different types of implementations
Utilities Classes
Plugins
Mashups &
Legacy
![Page 28: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/28.jpg)
Utilities
YUI.add(‘gallery-youtube’, function (Y) {
Y.youtube = { play: function (node, vid) { /* … */
} };
}, ‘0.0.1’, { requires: [‘node’] });
![Page 29: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/29.jpg)
Classes
![Page 30: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/30.jpg)
Classes (cont.)
YUI.add(‘project-counter’, function (Y) {
function Counter ( config ) {Counter.superclass.constructor.apply(this, arguments);
} Counter.NAME = "counter"; // used as prefix for events Counter.ATTRS = { timestamp: { /* config */ } };
Y.extend(Counter, Y.Base, {initializer : function( cfg ) { /* */ },destructor : function() { /* */ }
});
Y.Counter = Counter; // injecting the new class into the sandbox
}, ‘0.0.1’, { requires: [‘base’, ‘node’] });
![Page 31: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/31.jpg)
Classes (cont.)
YUI().use(’project-counter', function (Y) {
var counter = new Y.Counter({ timestamp: ‘123467890’
});
});
![Page 32: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/32.jpg)
How to use and build plugins in YUI 3?
![Page 33: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/33.jpg)
Plugins: YUI Node
YUI().use('anim', ’gallery-node-accordion', function (Y) {
var node = Y.get("#myaccordion");node.plug( Y.Plugin.NodeAccordion, {
anim: Y.Easing.backIn }); });
![Page 34: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/34.jpg)
Plugins (cont.)
var counter = new Y.Counter({ timestamp: ‘123467890’
});counter.plug(Y.Plugin.AnimCounter, {
effect: Y.Easing.backIn });
![Page 35: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/35.jpg)
Plugins (cont.)
YUI.add('gallery-node-accordion', function(Y) { function NodeAccordion (config) { NodeAccordion.superclass.constructor.apply(this, arguments); } NodeAccordion.NS = "NodeAccordion” NodeAccordion.ATTRS = {}; Y.extend(NodeAccordion, Y.Plugin.Base, {
initializer : function( cfg ) { /* */ },destructor : function() { /* */ }
}); Y.namespace('Plugin'); Y.Plugin.NodeAccordion = NodeAccordion;
}, ’0.0.1' ,{requires:["plugin"]});
![Page 36: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/36.jpg)
How to work with mashups and legacy code in YUI 3?
![Page 37: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/37.jpg)
Mashups
- Using multiple modules
- Include external dependencies (swfobj.js)
- Enhance the DOM structure
- Defining some listeners
![Page 38: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/38.jpg)
Mashups
YUI().use (‘event’, ‘gallery-node-accordion’, ‘project-counter’, function (Y) {
/* mashup these modules to enhance the LHS of a page */
});
![Page 39: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/39.jpg)
Mashups (cont.)
YUI().use (‘project-layout-lhs’, function (Y) {
Y.lhs.doit ({page: ‘products’
});
});
![Page 40: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/40.jpg)
Legacy
- YUI 2.x Tabview- Custom Survey System
![Page 41: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/41.jpg)
Legacy (cont.)
Why to wrap the code?
- Benefit from YUI 3 lazy loading process
- Support incremental migration
- Unique repository per project
![Page 42: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/42.jpg)
Legacy (cont.)
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis…/build/tabview/assets/skins/sam/tabview.css”><script type="text/javascript" src="http://yui.yahooapis…/build/utilities/utilities.js"></script><script type="text/javascript" src=“http://yui.yahooapis…/build/tabview/tabview-min.js"></script>
<script type="text/javascript"> YAHOO.util.Event.onDOMReady(function() {
var t = new YAHOO.widget.TabView("demo");
/* mashup these modules to initialize the tabview and handle the surveys */
}); </script>
![Page 43: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/43.jpg)
Legacy (cont.)
YUI().use (‘node’, ‘yui2-tabview’, function (Y) {
Y.on("domready", function() { var t = new YAHOO.widget.TabView("demo");
/* mashup these modules to initialize the tabview and handle the surveys */
}); });
![Page 44: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/44.jpg)
Legacy (cont.)
YUI().use (‘node’, ‘yui2-tabview’, ‘project-legacy-survey’, function (Y) {
// and now, survey is a YUI 3 Custom Module
});
![Page 45: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/45.jpg)
Recommendations
- Check “Scalable JavaScript Application Architecture” presentation by Nicholas Zakas
- Do a little bit of analysis and design for your modules
- Decide ahead what type of implementation to use
- Consider plugins for advanced functionalities
- Organize your web app as a module repository
![Page 46: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/46.jpg)
Conclusions
- Granularity is good for web applications
- Apps based on modules are easy to debug and test
- Try and share code thru YUI 3 Gallery
- Legacy code can be driven thru Custom Modules
![Page 47: Building YUI 3 Custom Modules](https://reader037.vdocument.in/reader037/viewer/2022102922/548d498cb4795940158b46be/html5/thumbnails/47.jpg)
Thanks!
Caridy Patinohttp://caridy.name/http://github.com/caridyhttp://twitter.com/caridy