Tags

,

 

Sometimes having to include AngularJS library just to create a simple lightweight component seems overkill; specially if we can leverage defacto jQuery library, or  even leverage whatever the global window and DOM offer for Ajax transmission, and Bootstrap.js, which is by the way included in the page when we are using bootstrap for page layout rendering engine.  An added benefit when using bootstrap JS to develop new components is the flexibility to either extend or encapsulate existing bootstrap components.

The basic skeleton when defining a bootstrap component is as follow:

//Define a JS class (object definition) representing your component using JavaScript semantic.

var ComponentClassName = function(args….){

this.var1 = ‘’ //represent an instance variable accessible from instance methods

this.$var2 = someControl // here the convention is to prefix the variable name with the $ sign when it references UI elements

this.meth = function(){} // not the recommend of creating methods

}

ComponentClassName.prototype.meth = function(){  //is the recommended approach in creating shared instance/static methods. Either way ‘this’ argument is to the arguments list. should be null if called without an object.

var tst = this.var1 // here this.var1 refers to the component instance variable

}

 

 

After Defining my component class, I need to extend jQuery fn variable ($.fn) to enable DOM elements referenced via jQuery to become ComponentClassName. There is also a well defined approach for enabling this behavior visible inside bootstrap js source code.  this also makes my component available to other library that may be interested in manually instantiating an instance of it.



// MediaView PLUGIN DEFINITION
 // =================== this is how html element get extended

 var old = $.fn.mediaview

 $.fn.mediaview = function(option){
     var $this = $(this)
     var data = $this.data('wrsft.mediaview') // namespace: wrsft, type: mediaview
     //only add option to the options structure if it is an object
     var options = $.extend({}, MediaView.DEFAULTS, $this.data(), typeof option == 'object' && option)


     if(!data) $this.data('wrsft.mediaview', (data = new MediaView(this, options)))

     if(typeof option == 'string') data[option](options.path)
 }



 $.fn.mediaview.Constructor = MediaView




 


There is also a boiler plate code that all component must include. in here the componentclassname is all lowercase




 // MediaView NO-CONFLICT
 // =================== common boiler plate code

 $.fn.componentclassname .noConflict = function(){
     $.fn.componentclassname = old
     return this
 }






 //MediaView DATA API
 //===================

/* $document.on("", "", function(e){

     e.preventDefault()
 })*/




 


as an example, the picture below reflect a media manager used to browse and create directories residing on the server and uploading files to the server.


bootstrap


Using Typescript instead of plain JavaScript will make our code more efficient, better structured and much more maintainable.  However, when going the typescript route, which I highly recommend, will require declaring a few interfaces to address missing types or extend existing types to fit the current scenario.  I will not be surprised if whatever code I have implement the pattern above using plain js, leaks memory. specially those named anonymous functions residing within other hoisted host. any way, typescript takes care of all these issues internally.

ONE REQUEST IF I MAY, WOULD BE HAVING BETTER TYPED DEFINITIONS FOR BOOTSTRAP JS AND HOPEFULLY THAT WOULD BE THE CASE FOR THE UP AND COMING BOOTSTRAP 4.


Beside, Learning Typescript now will make U future proof to most of the new innovation coming to the C# language whether it is destructuring, interpolation, returning tuples etc…