Your SlideShare is downloading. ×
  • Like
Building YUI 3 Custom Modules
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building YUI 3 Custom Modules

  • 15,677 views
Published

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 …

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.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
15,677
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
212
Comments
0
Likes
25

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
  • This talk will cover how to use YUI 3.x infrastructure to create individual pieces of code that can be injected in any page to carry on a certain functionality. Also how these mashups can combine YUI widgets and utilities with 3rd party codes and how to reuse them between different YUI instances.
  • I will talk about modules as the basic structures in YUI 3 Modules that are not part of YUI 3.0 How to Use and extend modules Organization and granularity: From global to granular approaches (Wordpress, Drupal, to Y! Front Page, Y! Mail, Gmail, Mint.com, etc) And finally, we will see how to bring legacy code into a YUI 3 implementation, including yui 2 stuff
  • Let’s start from the very beginning: Every piece of code, in yui 3, is a module, just like in yui 2 All the code in yui 3 was designed with the sandboxing capabilities in mind A module represent an individual piece of software that can work alone, or in conjunction with other modules. - YUI 3.0 was shipped with a limited set of modules
  • As you can see, modules can represent a widget: something that you will see in the page, like an overlay. Or just a low level utility to parse an string, like json utility. - Let’s see how we can use these built-in modules in a page
  • First of all, to use a module, we need a YUI instance, we call it sandbox. “ use” is the basic method to inject modules into a sandbox. RED elements represent a reference to the sandbox object “ use” includes the requirements in the page (in this case, just “node”) and then it calls the callback function
  • In this example we have 2 different modules playing together in the same sandbox
  • The origin of the new syntax in yui 3.x, and how sandbox works
  • similar feature, different syntax
  • you can call “use” at anytime. In this case the second callback receive a reference to a sandbox. Y2 === Y.
  • Now, what about those modules that are not part of YUI 3.0? Those modules that we will like to use in the daily basics Or those specific modules that we will like to have for one particular project
  • Now that we have the brand new YUI 3 Gallery, we will have custom modules created by YUI Contributors
  • And Finally, those modules that you will create for your app, for an specific project or just a piece of code that you will use in your daily basics.
  • Few example of modules from the gallery: YQL wrapper Time Picker Collapsible and Expandable elements
  • Few more examples of project and legacy modules: YUI 2.x tabview Survey widget
  • The module registration process represents the action of adding module’s metadata to YUI 3 Loader. It needs to know: what is the name of the module? where is located? what are the dependencies (requirements)? and few more settings at the module level
  • There are 3 different ways to register a module in yui 3. - By Seed - By Inclusion - By Configuration Let’s see each of them in details:
  • - Just keep an eye on the performance with this approach
  • - Recommended implementation
  • - You can organize your repository of modules at the top. - YUI_config is not ready yet, it will be ready in 3.1 - In the meantime, you can use MY_YUI_config object to pass it thru all the YUI instances in your page
  • Let’s focus on the implementation part and how we can extend the sandbox object
  • Let’s go deeper in these different types of implementations
  • Before going into the classes definitions, I will like to cover a set of utilities provided by YUI 3 to facilitate the creation of new classes.
  • Continuing with the counter example, this module can be build using a class implementation, defining the prototype for that class as a new member for the current sandbox.
  • Using the counter class
  • Plugin Definition
  • project-layout-lhs is a Custom Module to wrap a mashup implementation based on the previous example this new module can be now easily re-used thru a project/site/app It can also support specific configurations
  • Legacy code is a big pain, specially for FE, and YUI 3 is not an exception. As you know YUI 2 and YUI 3 can play nicely in the same page, but who should control who? And what about the code that we wrote on top of YUI 2.x? Or any other JS code? In this slide you can see a muckup using YUI 2.x tabview, and also a custom survey system How can we bring this to YUI 3?
  • Again, there are two ways to handle this: - Building a sandbox to wrap the legacy code, to delegate the loading process of all JS files to YUI 3 - The second option is to build a Custom Module to wrap the legacy code, and using this new module in your pages.
  • - Building a sandbox to wrap the legacy code, to delegate the loading process of all JS files to YUI 3
  • - The second option is to build a Custom Module to wrap the legacy code, and using this new module in your pages.

Transcript

  • 1. Building YUI 3 Custom Modules Caridy Patino Frontend Engineer at Yahoo! YUI Contributor Bubbling Library Creator
  • 2. Overview
    • YUI 3 and Modules
    • Using Custom Modules in YUI 3
    • Extending and Building Custom Modules
    • Supporting Legacy Code
    • Best Practices / Techniques
  • 3. What is a module in YUI 3?
  • 4. YUI 3 Modules
  • 5. Using a module
    • YUI() .use(‘ node ’, function ( Y ) {
    • Y .one (‘div.status’).setContent (‘ready!’);
    • });
  • 6. Using multiple modules
    • YUI() .use(‘ node ’,‘ anim ’,function( Y ) {
    • Y .one (‘div.status’).setContent (‘ready!’);
    • new Y .Anim({ node: '#demo', to: {opacity: 0} });
    • });
  • 7. 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} });
    • });
  • 8. Sandboxing modules
    • ( new YUI ) .use (‘ node ’, ‘ anim ’, function ( Y ) {
    • Y .one (‘div.status’).setContent (‘ready!’);
    • new Y .Anim({ node: '#demo', to: {opacity: 0} });
    • });
  • 9. Sandboxing modules
  • 10. Different sets of modules YUI 3 Modules
  • 11. Different sets of modules YUI 3 Modules Community modules gallery-*
  • 12. Different sets of modules YUI 3 Modules Community modules gallery-* Project modules project-*
  • 13. Community modules Time Picker Accordion / Node Accordion YQL
  • 14. Project modules
  • 15. How to use Custom Modules in YUI 3?
  • 16. Custom Module Registration
    • By seed (YUI Loader)
    • YUI() .use …
    • By inclusion
    • register then YUI() .use …
    • By configuration YUI( /* config */ ) .use …
  • 17. 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>
  • 18. 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&quot;)', function(r) {
    • r.query; // The result
    • });
    • });
    • </script>
  • 19. 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: [&quot; get &quot;,&quot; event-custom &quot;]
    • }
    • }
    • }) .use (‘ gallery-yql ’, function(Y) {
    • new Y .yql('select * from github.user.info where (id=”caridy&quot;)', function(r) {
    • r.query; // The result
    • });
    • });
    • </script>
  • 20. Organizing configuration
    • Global object called “YUI_config” ( YAHOO_config in YUI 2.x)
    • Multiple config objects
      • YUI( c1 , c2 , c3 , .., c5 ) .use
  • 21. 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 ) {
    • /* … */
    • });
  • 22. How to build a Custom Modules?
  • 23. 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 ’] });
  • 24. Different types of implementations Utilities Y .one Y .io Y .youtube.play
  • 25. Different types of implementations Utilities Y .Anim Y .App.Box Classes
  • 26. Different types of implementations Utilities Plugins Y .Plugin.NodeAccordion Classes
  • 27. Different types of implementations Utilities Plugins Mashups & Legacy Classes
  • 28. Utilities
    • YUI .add(‘ gallery-youtube ’, function ( Y ) {
    • Y .youtube = {
    • play: function (node, vid) {
    • /* … */
    • }
    • };
    • }, ‘ 0.0.1 ’, { requires: [‘ node ’] });
  • 29. Classes
  • 30. Classes (cont.)
    • YUI .add(‘ project-counter ’, function ( Y ) {
    • function Counter ( config ) {
    • Counter .superclass.constructor.apply(this, arguments);
    • }
    • Counter . NAME = &quot;counter&quot;; // 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 ’] });
  • 31. Classes (cont.)
    • YUI() .use(’ project-counter ', function ( Y ) {
    • var counter = new Y .Counter( {
    • timestamp: ‘123467890’
    • } );
    • });
  • 32. How to use and build plugins in YUI 3?
  • 33. Plugins: YUI Node
    • YUI() .use(' anim ', ’ gallery-node-accordion ', function ( Y ) {
    • var node = Y .get(&quot;#myaccordion&quot;);
    • node . plug ( Y .Plugin.NodeAccordion , {
    • anim: Y .Easing.backIn
    • });
    • });
  • 34. Plugins (cont.)
    • var counter = new Y .Counter( {
    • timestamp: ‘123467890’
    • } );
    • counter.plug( Y .Plugin. AnimCounter , {
    • effect: Y .Easing.backIn
    • });
  • 35. Plugins (cont.)
    • YUI .add(' gallery-node-accordion ', function( Y ) {
    • function NodeAccordion (config) {
    • NodeAccordion .superclass.constructor.apply(this, arguments);
    • }
    • NodeAccordion . NS = &quot;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:[ &quot;plugin&quot; ]});
  • 36. How to work with mashups and legacy code in YUI 3?
  • 37. Mashups
    • Using multiple modules
    • Include external dependencies ( swfobj.js )
    • Enhance the DOM structure
    • Defining some listeners
  • 38. Mashups
    • YUI() .use (‘ event ’,
    • ‘ gallery-node-accordion ’,
    • ‘ project-counter ’, function ( Y ) {
    • /* mashup these modules to enhance
    • the LHS of a page */
    • });
  • 39. Mashups (cont.)
    • YUI() .use (‘ project-layout -lhs ’, function ( Y ) {
    • Y .lhs.doit ({
    • page: ‘products’
    • });
    • });
  • 40. Legacy - YUI 2.x Tabview - Custom Survey System
  • 41. Legacy (cont.)
    • Why to wrap the code?
    • Benefit from YUI 3 lazy loading process
    • Support incremental migration
    • Unique repository per project
  • 42. Legacy (cont.)
    • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://yui.yahooapis…/build/tabview/assets/skins/sam/tabview.css”>
    • <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis…/build/utilities/utilities.js&quot;></script>
    • <script type=&quot;text/javascript&quot; src=“http://yui.yahooapis…/build/tabview/tabview-min.js&quot;></script>
    • <script type=&quot;text/javascript&quot;>
    • YAHOO.util.Event.onDOMReady(function() {
    • var t = new YAHOO.widget.TabView(&quot;demo&quot;);
    • /* mashup these modules to initialize
    • the tabview and handle the surveys */
    • });
    • </script>
  • 43. Legacy (cont.)
    • YUI() .use (‘ node ’,
    • ‘ yui2-tabview ’, function ( Y ) {
    • Y.on(&quot;domready&quot;, function() {
    • var t = new YAHOO.widget.TabView(&quot;demo&quot;);
    • /* mashup these modules to initialize
    • the tabview and handle the surveys */
    • });
    • });
  • 44. Legacy (cont.)
    • YUI() .use (‘ node ’,
    • ‘ yui2-tabview ’,
    • ‘ project-legacy-survey ’, function ( Y ) {
    • // and now, survey is a YUI 3 Custom Module
    • });
  • 45. 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
  • 46. 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
  • 47. Thanks! Caridy Patino http://caridy.name/ http://github.com/caridy http://twitter.com/caridy