1. Introduce You to Flight.js
2. Guidance for Proper Usage
3. Try to Live Code Something
4. Overview of Front-end Stack
5. Answer Any Questions You Have

1. Can open Terminal.app
2. Written some JavaScript / jQuery
3. Good with Computers
   
   

 define([ 'cookie', 'jquery' ],function( cookie, $ ){

//
// Usage:
// 
// var user = require( 'user' );
// user().done(function( userData ){
//   if( userData ){
//     alert( userData.first_name );
//   }
// });
//

var defer,
    userEndPoint = 'something/something.php';

return function(){

    if( defer ){

        return defer;

    } else if( !cookie( 'user[preferredUsername]' ) ){

        //Provide a consistent API from the module
        // This will result in undefined being passed to callback
        return $.Deferred().resolve();

    } else {

        // Ajax call protected by existance of the cookie variable
        defer = $.ajax( userEndPoint, {
            dataType: 'json',
            xhrFields:{
                withCredentials: true
            }
        });

        return defer;
    }

};

});

define( function() {

// usage: 'singluar'.pluralize(2, 'plural');
if (!String.prototype.pluralize) {
    String.prototype.pluralize = function (/*Int*/ count, /*String?*/ plural) {
        var text = this, lastIdx;

        if (count !== 1) {
            if (plural) return plural; // String

            lastIdx = text.length - 1;
            switch (text[lastIdx]) {
            case 'x':
            case 'h':
            case 's':
                text += 'es';
                break;
            case 'y':
                text = text.substring(0, lastIdx) + 'ies';
                break;
            default:
                text += 's';
                break;
            }
        }

        return text.toString(); //String
    };
}

} );

// ...
domReady = function() {
  var $doc = $(document);
      $doc.on('click.selectOffer', '.offer', select);
      $doc.find('.popup_logo').on('click', close);
  
  var $chosen = $doc.find('.offer_list').eq(0).find('.offer').addClass('selected_coupon');
  $doc.on('click', '.title a, .discount a, .merchant-out-link', send2Back);

  // Filter on the selected coupon type
  if ($chosen.hasClass('coupon')) {
    if($chosen.data('freeShipping')) {
      $('#filter_freeship').click();
    } else {
      $('#filter_codes').click();
    }
  } else if ($chosen.hasClass('sale')) {
    if($chosen.data('freeShipping')) {
      $('#filter_freeship').click();
    } else {
      $('#filter_sales').click();
    }
  } else if ($chosen.hasClass('printable')) {
    $('#filter_printables').click();
  }
},
// ...

 define(['flight/lib/component'], function (component){

  // The trailing 'UI' is a convention
  // when using flight to signify that
  // this component will be dealing with
  // the DOM in some way.
  function myComponentUI () {

    // Each component has attributes that may be specified when it
    // is initialized. The attributes here will be set by default.
    this.attributes({
      greeting: 'Hello'
    });

    // This will be called when the component is initialized
    this.after('initialize', function () {

      // Bind a handler to the 'greet' event at the document level
      this.on( document, 'greet', this.sendGreeting );
    });

    // This method acts as an event handler for the greeting
    this.sendGreeting = function sendGreeting (ev, who) {
      alert( this.attr.greeting + ', ' + who );
    });
  };

  // Tell flight to build a component from our prototype method
  // This prevents other components from directly referencing this one
  return component( myComponentUI );
});

define([
  'jquery',
  'components/my-component-ui.js'
], function (
  $,
  myComponentUI
) {

  // The component will be initialized when it is attached to a root context
  //
  // Keep in mind that a separate component will be attached to each DOM node
  // that matches our selector.
  myComponentUI.attachTo('.greeting-root-context');

  // Now we can send an event to greet err'body
  $(document).trigger('greet', ['everyone']);

});

define(function () {

  // Its just a function!
  function withDivDetection () {

    // Grants +1 DIV-finding 
    this.isADiv = function isADiv (element) {
      return element.tagName === 'DIV';
    };

  }

  return withDivDetection;

});

define([
  'flight/lib/component',
  'mixins/with-div-detection'
], function (
  component,
  withDivDetection
){

  function selfDestructiveComponentUI () {
    
    this.after('initialize', function () {

      // Use the mixin to check the component root node
      if (this.isADiv( this.node )) {
        console.log('Ka-boom!!');

        // Unbinds the component
        // and removes it.
        this.teardown();
      }

    });
    
  }

  return component(
    withDivDetection,
    selfDestructiveComponentUI
  );

});

// somewhere within a flight component ...
  
  this.meFirst = function meFirst () {
    alert('I\'m first!');
  };

  this.meSecond = function meSecond () {
    alert('I\'m second');
  };


  this.before('meSecond', this.meFirst);

// ... (carry on)

// somewhere within a flight component ...
  
  this.meFirst = function meFirst () {
    alert('I\'m first!');
  };

  this.meSecond = function meSecond () {
    alert('I\'m second');
  };


  this.after('meFirst', this.meSecond);

// ... (carry on)

// somewhere within a flight mixin ... 
  this.isCrazy = function isCrazy () {
    return true;
  };

  this.callMe = function callMe () {
    alert('Here\'s my number: ' + this.attr.number);
  };


  this.around('callMe', function (callMeMaybe) {    if (this.attr.iJustMetYou && this.isCrazy()) {      callMeMaybe();    }  });

// ... (carry on)

• Great for drying up nested method calls
• Avoid for things that should be tightly coupled
• In general, use sparingly
  

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    // Task configuration.
    jshint: {
      options: {
        jshintrc: '.jshintrc',
      },
      gruntfile: {
        src: 'Gruntfile.js'
      },
      lib_test: {
        src: ['lib/**/*.js']
      }
    },
    watch: {
      gruntfile: {
        files: '<%= jshint.gruntfile.src %>',
        tasks: ['jshint:gruntfile']
      }
    }
  });

  // These plugins provide necessary tasks.
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Default task.
  grunt.registerTask('default', ['jshint']);

};