#hammerjs

UPDATE: Some of you have asked how this might work as a jQuery plugin so I created a set of HTML, CSS and Javascript files to illustrate this.  While they aren't referenced here, they are available in the github repository linked below.

If you have ever worked on a mid-sized to large-sized site that had heavy dependencies on a front-end framework like Bootstrap or Foundation, chances are likely you had multiple instances of widgets being implemented all over the codebase.  In some cases, if the development team that implemented these widgets was small, the development structure could be standardized.  However, with many teams going full stack these days, the chance for the same widget to be implemented in two different ways, sometimes with different auxiliary frameworks, by two or more different developers becomes much greater.  A solution that I would like to propose is something I call my Abstraction Builder (essentially metaprogramming).

The main concept to my Abstraction Builder is this: abstract the HTML to a point where it's as minimal as possible and allow a Javascript builder object to do the manual development, including implementing any auxiliary frameworks as needed, such as for specific use case event listeners.

Consider the Bootstrap 2.3.2 carousel widget.  Just the basic HTML, without ANY content, looks something like this:

<div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>

It's easy to see how this can get complicated and messy fast with anything more than a simple image carousel and thus gives a huge window of opportunity for multiple developers to implement the carousel as they see fit (sometimes even incorrectly).  However, this can all be avoided with a Javascript builder (NOTE: the necessary links to github and codepen will also be explicitly listed at the end).  

Let's take a look at what a developer would need to implement if they used my paradigm.  First, the Javascript:

document.addEventListener("DOMContentLoaded", function(e) { var smartCarousel = new SmartCarousel({ 'carouselId' : 'mySmartCarouselID', 'showIndicators' : true, 'showControls' : true, 'intervalDelay' : 1000 }); });

I have an object which is newed up and takes as a parameter an object of configurations.  As you can see these configurations include things like whether or not to show the indicators (small dots at the top), whether or not to show the control arrow and the amount of milliseconds in the interval delay.  Next, the HTML:

<div id="mySmartCarouselID"> <div><img src="img/slide1.png" /></div> <div><img src="img/slide2.png" /></div> <div><img src="img/slide3.png" /></div> <div><img src="img/slide4.png" /></div> <div><img src="img/slide5.png" /></div> </div>

That's it!  Everything else is being controlled by the CSS, the framework (in this case Bootsrap) and the builder.  The HTML stays, nice, clean and concise and the SmartCarousel object takes care of the rest.  One little nicety you'll notice if you check out the github is that the builder "sniffs" the page for Hammer.js, the multi-touch gesture framework I've chosen to use.  If it's present, then touch events are added, if not, those events are not added.

Please note the syntax used in the Javascript SmartCarousel.js file.  I've tried to adhere to raw Javascript as much as possible so that this example is portable for anyone who wishes to use it.  Given that Bootstrap Javascript is a jQuery plugin, I was forced to use jQuery in a few places.  However, the example is not about using Bootstrap or jQuery but about what you can do with this paradigm.  Additionally, while I chose to use Hammer.js, you are by no means limited to this framework.  Again, the purpose was to show what can be done, not what should be done.

I hope you found this helpful. If you have any additional questions (given that I'm writing this with two hours sleep over the past two days), please let me know. I'll be glad to update and answer accordingly.

LINKS

jQuery: http://www.jquery.com/

Bootstrap: http://www.getbootstrap.com/

Foundation: http://foundation.zurb.com/

HammerJS: http://eightmedia.github.io/hammer.js/

REPOSITORY & CODEPEN

Github: https://github.com/mTorbin/frameworkWidgetBuilder

Versions used:

Hammer.js v1.0.5 (jQuery version) Ember v1.0.0 RC 1

No conflict. These guys play well together. I'm using hammer.js in the jquery plugin version since jQuery is required by ember and gives extra support for old IE's.

Learning some BackBone.js today -- theoretically should be applicable to both BBDev and stuff at work. The auto updates on data changes is what got back looking at the library. At work we are trying to figure out how to keep client side apps via Javascript updated and synced with other devices running the same app.

I've never honestly worked with any libraries since I found JQuery -- well I worked a little with HammerJS but it was only brief (awesome library btw). So this should be interesting.

So far I've learned:

(function ($) { window.AppView = Backbone.View.extend({ el: $("body"), events: { "click #add-friend": "showPrompt", }, showPrompt: function () { var friend_name = prompt("Who is your friend?"); } }); var appview = new AppView; })(jQuery);

Using this as a starting point: http://thomasdavis.github.com/2011/02/01/backbone-introduction.html

Good links for future reference: