Wes Todd 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.

The transition that we are starting right now is going to be the most important set of decisions that White Lion makes for the next 3-5 years. To help explore all of these decisions I have tried to document some of the things that I think are important. The point of this is as a starting block for discussion, I do not know all the answers to these questions, but I tried to come up with the best arguments I could to support my opinion. Hopefully you all have some thoughts!!

Customization vs. Following Suit

One thing I think we need to discuss is the benefits and drawbacks of customizing our framework environment. What I mean by this are things like changing the directory structure, writing non-standard bundles instead of using community provided bundles and choosing not to use the pre-defined functionality in favor of our custom blend.

Pros

Being able to fully understand the code

HTML

General

Tabs for indention.
XHTML style self closing tags (ex. <br />)

Form Elements

Use wrapper div as the standard container with a class of input-wrap.

	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){

	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); });
	}

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

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

	<html>
	<head>
	<style>
	nav li ul {
	display: none;
	}
	nav li.hover ul {
	display: block;
	}
	</style>

	SET @old_url = "http://oldside.com";
	SET @new_url = "http://newsite.com";
	SET @prefix = "wp_";

	SET @s1 = CONCAT("UPDATE ", @prefix, "options SET option_value = replace(option_value, '", @old_url, "', '", @new_url, "') WHERE option_name = 'home' OR option_name = 'siteurl';");
	PREPARE s1 FROM @s1;
	EXECUTE s1;

	SET @s2 = CONCAT("UPDATE ", @prefix, "posts SET guid = replace(guid, '", @old_url, "', '", @new_url, "');");
	PREPARE s2 FROM @s2;

	var LinkedList = function() {
	this._head = null;
	this._tail = null;
	this.length = 0;
	};
	LinkedList.Node = function(data) {
	return {
	data : data,
	next : null
	};

	// All of our icons
	$icons: (
	(exclaim, "\21"),
	(x, "\78"),
	(play, "\25b7"),
	(user, "\2603"),
	(search, "\2604"),
	(menu, "\2637"),
	(loading, "\2668"),
	(flag, "\2690"),