wesleytodd

#!/usr/bin/env bash

#
# Inspired by:
#   https://github.com/visionmedia/n/blob/master/bin/n
#   http://stackoverflow.com/a/8597411
#

# Detect Platform
if [[ "$OSTYPE" == "linux-gnu" ]]; then

wesleytodd

// Export for Angular
if (angular) {
	angular.module('vube.video', [])
		.factory([function() {
			return VideoSingle;
		}]);
}

wesleytodd

(function() {

wesleytodd

var mockVideo = {
	title: 'My Awesome Video',
	public_id: 'abc123',
	media: {
		_links: {
			thumbnail: {
				template: 'http://frame.thestaticvube.com/snap/{width}x{height}/{public_id}.jpg;t={timestamp}'
			},
			video: {
				template: 'http://video.thestaticvube.com/video/{resolution_id}/{public_id}.mp4'

wesleytodd

Callbacks are great

function myDataGetterThingy(done) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyStateChange === 4) {
      try {
        var res = JSON.parse(xhr.responseText);

wesleytodd

var pubId = 'the starting value';
var render = function() {
	// The right sidebar
	var rightSidebar = module.exports = React.render((
		<RightSidebar showCloseButton={false}>

			<SidebarSection title="Register Complete" ref="register-complete">
				<IframeComponent src={"/embed/" + pubId }/>
			</SidebarSection>
		</RightSidebar>

wesleytodd

var Template = (function(){
    return function(t){
        if(!(this instanceof Template)){
            return new Template(t);
        }else{
            var me = this;
            me.template = t;
            return function(data, container){
                var out = me.template;
                for(var key in data){

wesleytodd

wl.ready(function() {
	// Backbone setup within scope
	var Image = Backbone.Model.extend({
		defaults: {
			'file_tn': 'undefined',
			'file_lg': 'undefined'
		},
		initialize: function() {
			this.on('all', function(e) { wl.log('Image event: ' + this.get('file_tn') + ': ' + e); });
		}

wesleytodd

The White Lion Javascript Library

Important Architecture Choices

• Modularity: All portions should be stand alone, utilizing the module pattern and dependency injection.
• Separation Of Concerns(SOC): Using templates and configuration options we need to keep DOM manipulation, HTML, and CSS to a minimum inside the hard-coded JS.
• Configurability: Nothing can be mandatory, no more "hi-jacking" events or forcing features. All modules and plugins need to be configurable on a site by site basis with logical defaults.
• Asset Lazy-Loading: Minimize the up-front footprint on page load, relying on loading assets and modules in a way that increases responsiveness.
• Easy Interface: The interface needs to be easy to use and well documented so that new hires can quickly come up to speed with the available features and best practices.

wesleytodd

WL.ready(['plugin1.js','plugin2.js'], function(plugin1, plugin2){
    plugin1();
});

WL.ready(function(){
    // just maps to jQuery.ready()
});