Date post: | 14-Dec-2014 |
Category: |
Technology |
Upload: | caridy-patino |
View: | 15,616 times |
Download: | 1 times |
Building YUI 3 Custom Modules
Caridy Patino Frontend Engineer at Yahoo!
YUI Contributor
Bubbling Library Creator
Overview
- YUI 3 and Modules
- Using Custom Modules in YUI 3
- Extending and Building Custom Modules
- Supporting Legacy Code
- Best Practices / Techniques
What is a module in YUI 3?
YUI 3 Modules
Using a module
YUI().use(‘node’, function (Y) {
Y.one (‘div.status’).setContent (‘ready!’);
});
Using multiple modules
YUI().use(‘node’,‘anim’,function(Y) {
Y.one (‘div.status’).setContent (‘ready!’);
new Y.Anim({ node: '#demo', to: {opacity: 0} });
});
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} });
});
Sandboxing modules
( new YUI ).use(‘node’, ‘anim’, function (Y) {
Y.one (‘div.status’).setContent (‘ready!’);
new Y.Anim({ node: '#demo', to: {opacity: 0} });
});
Sandboxing modules
Different sets of modules
YUI 3 Modules
Different sets of modules
YUI 3 Modules
Community modules
gallery-*
Different sets of modules
YUI 3 Modules
Community modules
gallery-*
Project modules project-*
Community modules
Time Picker
Accordion / Node Accordion
YQL
Project modules
How to use Custom Modules in YUI 3?
Custom Module Registration
- By seed (YUI Loader) YUI().use …
- By inclusion register then YUI().use …
- By configuration YUI( /* config */ ).use …
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>
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>
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>
Organizing configuration
- Global object called “YUI_config” (YAHOO_config in YUI 2.x)
- Multiple config objectsYUI( c1, c2, c3, .., c5 ).use
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) { /* … */});
How to build a Custom Modules?
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’] });
Different types of implementations
Utilities Y.oneY.ioY.youtube.play
Different types of implementations
Utilities Classes
Y.AnimY.App.Box
Different types of implementations
Utilities Classes
Plugins
Y.Plugin.NodeAccordion
Different types of implementations
Utilities Classes
Plugins
Mashups &
Legacy
Utilities
YUI.add(‘gallery-youtube’, function (Y) {
Y.youtube = { play: function (node, vid) { /* … */
} };
}, ‘0.0.1’, { requires: [‘node’] });
Classes
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’] });
Classes (cont.)
YUI().use(’project-counter', function (Y) {
var counter = new Y.Counter({ timestamp: ‘123467890’
});
});
How to use and build plugins in YUI 3?
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 }); });
Plugins (cont.)
var counter = new Y.Counter({ timestamp: ‘123467890’
});counter.plug(Y.Plugin.AnimCounter, {
effect: Y.Easing.backIn });
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"]});
How to work with mashups and legacy code in YUI 3?
Mashups
- Using multiple modules
- Include external dependencies (swfobj.js)
- Enhance the DOM structure
- Defining some listeners
Mashups
YUI().use (‘event’, ‘gallery-node-accordion’, ‘project-counter’, function (Y) {
/* mashup these modules to enhance the LHS of a page */
});
Mashups (cont.)
YUI().use (‘project-layout-lhs’, function (Y) {
Y.lhs.doit ({page: ‘products’
});
});
Legacy
- YUI 2.x Tabview- Custom Survey System
Legacy (cont.)
Why to wrap the code?
- Benefit from YUI 3 lazy loading process
- Support incremental migration
- Unique repository per project
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>
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 */
}); });
Legacy (cont.)
YUI().use (‘node’, ‘yui2-tabview’, ‘project-legacy-survey’, function (Y) {
// and now, survey is a YUI 3 Custom Module
});
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
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
Thanks!
Caridy Patinohttp://caridy.name/http://github.com/caridyhttp://twitter.com/caridy