jupiterjs

(function(){
	var getObject = function(name){
		var parts = name.split('.'),
			current = window,
			part;
		while(part = parts.shift()){
			current = current[part];
		}
		return current;
	},

jupiterjs

you can steal all your scripts:

steal.plugins('foo/bar','abc')

then run the build app:

steal buildjs mypage.html

It finds all scripts, minifies, combines them into 1.

jupiterjs

Goal

Train people on a complete stack outside of jQuery

Highlevel concepts

• Dependency Management
• Documentation
• Error Reporting
• Organization

jupiterjs

// The GOAL =========================

// 1. define a model 
$.Model("Todo",{
  findOne : function(params, success, error){
     //some deferred gets returned here
  }
},{
  helperMethod : function(){ ... }
})

jupiterjs

Introduction

JavaScriptMVC is an open-source jQuery-based JavaScript framework. It is nearly a comprehensive (holistic) front-end development framework; packaging utilities for:

• testing
• dependency management
• error reporting
• package management
• code cleaning
• custom events

jupiterjs

steal.plugins('jquery').then(function(){
	
	var animationNum = 0,
		//Animation events implies animations right?
		suportsAnimations = !!window.WebKitAnimationEvent;
	
	//gets teh last stylesheet or creates one
	var getLastStyleSheet = function(){
		if(!document.styleSheets.length){
			var style = document.createElement('style');

jupiterjs

Event Oriented Architectures

When building JavaScript widgets, they should communicate with "outside" code similar to how native elements, especially form elements work. For example:

The anchor element.

Default Event: window.location = el.href Prevent Default : $(el).click(function(ev){ev.preventDefault()})

jupiterjs

// a helper for retrieving JSON data from localStorage
var localStore = function(name, cb, self){
	var data = $.evalJSON( window.localStorage[name] || (window.localStorage[name] = "{}") ),
		res = cb.call(self, data);
	if(res !== false){
		window.localStorage[name] = $.toJSON(data);
	}
};

// A todo model for CRUDing todos.

jupiterjs

/*
 Tie lets you cross-bind form elements and controllers with models.  
 This means that by changing a model attribute, you it will
         automatically update controllers or form elements.
 This also means that if a 'change' event happens on the
         element, it will automatically update the model attribute.

 Lets see an example:
 */

jupiterjs

//- CONTROLLER -

$.Controller("Tabs",{
  "li click" : function(){

  }
})

// will automatically create a jQuery plugin like: