How to write UI Components

How to write UI Components Mahdi Pedramrazi

UI Components •  SEO Friendly UI Components
•  Non SEO Friendly UI Components

SEO Friendly UI Components •  Html ( Markup
) and Styles are loaded before the page load. •  Document get loaded •  JS Queries the Dom •  JS iniIalizes the Component

SEO Friendly UI Components Demo: Change the color
of your element dynamically. <body> <div class=“colorify”>I’m White</div> <script> $(“.colorify”).colorify(); </script> </body>

Non SEO Friendly UI Components •  Styles gets loaded
in the head •  Document get loaded •  JS iniIalizes the new Component •  JS Queries the Dom and renders the Component in the Dom.

Non SEO Friendly UI Components <body> <div class=“carousel”>
</div> <script> Var carousel = new Carousel(); $(“.carousel”).html( carousel.render() ); </script> </body>

Tips For SEO Friendly Comps: One or many Dom
elements •  IniIalize component for one or many Dom elements <div class=“el-‐one”></div> <div class=“el-‐two”></div> – $(“.el-‐one, .el-‐two”).colorize();

Passing Parameters •  Passing opIonal conﬁguraIon parameters to
your component $(“.el”).colorize({ color: “red”, callback: funcIon(){ } });

Enable Methods for your API
Enable Methods by querying the DOM $(DOM).component(method_name, params, callbackFunc); $(“.el-‐one, .el-‐two”).colorize(“changeColor”,”red”, funcIon(){ // Code goes here });

Default Se`ngs $.fn.colorize = funcIon(opIons){ // OpIons override
the default se`ngs. OpIons = $.extend({}, opIons, $.fn.colorize.se`ngs); }; $.fn.colorize.se`ngs = { color: “red” };

Using Data Abributes <div class=“colorize” data-‐colorize-‐color=“orange”> I
want to be Orange. Plzz… </div> <div class=“colorize”> What is my color ?! </div> <script> $(“.colorize”).colorize({ color: “green” }); $.fn.colorize.se`ngs = { color: “purple”; }; </script>

Avoid Conflict Use noConflict() to avoid conflict.
//old $.fn.carousel = funcIon(){}; //new (newly created component ) $.fn.carousel = funcIon(){}; $.fn.carousel.noConflict(); // falling back to the old One. $(“.el”).carousel();

No Conﬂict ImplementaIon (funcIon($){ //private Scope;
var old = $.fn.carousel; $.fn.carousel = funcIon(){ // code goes here. }; $.fn.carousel.noConﬂict = funcIon(){ $.fn.carousel = old; return this; } })(jQuery);

Adding Dynamic HTML $(document).ready(funcIon(){ $(“.el”).lazyload();
// element is added aier. So the lazyload will not get iniIated. $(“body”).append(“<div class=“el” />); $(“.el”).lazdylaod(); });

Using EvenIfy Introducing “html_fire” “appendTo_fire”
“append_fire” “prependTo_fire” “prepend_fire” $(document).on(“create”, funcIon(event, method, el){ $(el).find(“img[data-‐comp=lazyload]”).lazyload(); }); $(“body”).appendTo_fire( createImage() );

WriIng a rock solid UI Comp it’s Easy

Libraries, Helper Tools •  jQuery UI – 25Kb Uncompressed
-‐ 12Kb compressed. Learning curve, more than 30Kb library. •  Ext JS -‐ •  YUI •  Dojo.

jQuery Energize is a javascript component built on top of
jQuery library to easily create smart extensible UI Components ( 0.7 Kb ) •  Support Data abribute to override conﬁg parameters •  Easily expose public methods for you components •  Avoiding overwriIng exisIng components by using noConﬂict •  SupporIng JavaScript OOP principles by using Prototypes •  More importantly provides code consistency, simplicity and faster execuIon for wriIng UI Components.

$.Colorize

Thank You jQuery Energize -‐ hbp://pedramphp.github.io/jquery-‐energize/
[email protected]

How to write UI Components

How to write UI Components

mahdi pedramrazi

More Decks by mahdi pedramrazi

Other Decks in Programming

Featured

Transcript