Javascript Framework

====================== The SecondFunnel project makes use of two JavaScript frameworks for the front-end javascript; Backbone JS and Marionette JS. Using these two frameworks we're able to seperate our concerns into three areas; modules, models and the DOM.

BackboneJS

More details on BackboneJS can be found here: BackboneJs

To get a quick introduction to how BackboneJS works and how to use it, we recommend looking over the annotated source of the Todo List Application, which can be found here: Annotated Source.

MarionetteJS

Marionette JS builds on top of BackboneJS to eliminate redundancy in application development (e.g. rendering). More details on it can be found here: MarionetteJS Before you get started with MarionetteJS, it's recommended that you at least look at the BackboneJS application example.
Once you've done that, we recommend looking over this tutorial for a quick introduction to MarionetteJS and a bit about the differences between it and Backbone: A simple Backbone.Marionette tutorial

SecondFunnel Backbone.Marionette Application

The SecondFunnel Backbone.Marionette Application is called SecondFunnel. All the modules, models, and views are contained in the application. The application starts when you call SecondFunnel.start(..) and pass it a list of options (usually PAGES_INFO or TEST_PAGE_DATA). This helps it construct the necessary modules and start creating the views and models.

###Modules ####intentRank (SecondFunnel.intentRank)

• Description: The intentRank module manages the interaction between the front-end and the intentrank/content-graph service. The module is used to get a set of data (formatted in json) from the service.
• Methods
  • getResults: Called with a set of options, a callback and any additional arguments to pass to the callback. E.g. options = {'type': "campaign"}.
  • changeCategory: Called with a campaign id to switch to, used to change the campaign that results will be picked from.

####layoutEngine (SecondFunnel.layoutEngine)

• Description: The layoutEngine is a blackbox for the grid layout library we use (currently Masonry). It's used to layout tiles in an infinite scroll fashion.
• Methods
  • call: Used to all a method for the layoutEngine to process. The method passed is a string, one of append, insert, layout, reload, stamp, unstamp, or clear. Any additional arguments to pass to these methods should be passed alongside. With the exception of layout, reload, and clear, all these methods accept a DOM element or array of DOM elements as the first parameter and with the exception of stamp, unstamp, and layout, they accept a callback as the third parameter.
  • clear: Clears all the elements in the layoutEngine instance and refreshes the instance.

####tracker (SecondFunnel.tracker)

• Description: The tracker module is used to track how a user interacts with a landing page; record their actions, interests, etc. as to better provide the user with a customized experience.
• Methods
  • registerEvent: Registers an event in the tracker.
  • setSocialShareVars: Sets the variables for social sharing.
  • clearTimeOut: Clears the tracker timeout.
  • registerTwitterListeners: Binds listeners to twitter social button interaction/action.
  • notABounce: Marks the visitor as not a bounce.
  • videoStateChange: Listens to video interactions.
  • changeCampaign: Listens for a change in the campaign (category).

####observable (SecondFunnel.observable)

• Description: A module of transient utilities.
• Methods
  • mobile: Returns true if user is on a mobile device.
  • touch: Returns true if touch is enabled.
  • isAniPad: Returns true if user is using an iPad.

####utils (SecondFunnel.utils)

• Description: A module of utilities.
• Methods
  • safeString: Accepts a string as the first argument and returns a valid safe string.

###Models There is only one main model used in the SecondFunnel application; a Tile. A Tile is a collection of data corresponding to a product, product image or external content image, and products related to that product. It extends from Backbone's Model object.

###Views Views are used to create the DOM representation of a model or to display a collection of views.

View	SubViews	Description
FeaturedAreaView	-	The page's featured image.
TileView	VideoTileView	Used to display an image and/or video.
SocialButtons	-	Used to display a collection of social buttons.
SocialButtonView	FacebookSocialButton, TwitterSocialButton, ShareSocialButton	Used to display an individual social button.
SharePopup	-	Displays a popup that allows the user to select a source to share.
CategoryView	-	Latches onto a category selector to allow that item to switch categores.
CategorySelector	-	Finds all the catgories on the page and makes them into CategoryViews.
PreviewContent	-	The preview (popup) content.
PreviewWindow	-	Displays the window for tile previews and loads in the PreviewContent.
TapIndicator	-	Displays a tap indicator on mobile devices.
Discovery	-	The main area where TileViews are rendered and displayed in.