Skip to content

Instantly share code, notes, and snippets.

@jupiterjs
jupiterjs / JavaScriptMVC.md
Created May 24, 2011 16:58 — forked from moschel/JavaScriptMVC.md
JavaScriptMVC Overview

The following is a VERY rough draft of an article I am working on for Alex MacCaw's @maccman's Book. It is very rough, but even now a worthwhile read. Suggestions / comments are very welcome! Please help me :-)

Introduction

JavaScriptMVC (JMVC) is an open-source jQuery-based JavaScript framework. It is nearly a comprehensive (holistic) front-end development framework, packaging utilities for testing, dependency management, documentation, and a host of useful jQuery plugins.

Yet every part of JavaScriptMVC can be used without every other part, making the library lightweight. Its Class, Model, View, and Controller combined are only 7k minified and compressed, yet even they can be used independently. JavaScriptMVC's independence lets you start small and scale to meet the challenges of the most complex applications on the web.

This chapter covers only JavaScriptMVC's $.Class, $.Model, $.View, and $.Controller. The following describes each component:

@jupiterjs
jupiterjs / $.View.md
Created May 27, 2011 21:24
$.View for Alex MacCaw's Book

$.View - Client Side Templates

JavaScriptMVC's views are really just client side templates. Client side templates take data and return a string. Typically, the strings are HTML intended to be inserted into the DOM.

$.View is a templating interface that takes care of complexities using templates:

  • Convenient and uniform syntax
  • Template loading from html elements or external files
  • Synchronous or asynchronous template loading
  • Template preloading
@jupiterjs
jupiterjs / $.Controller.md
Created May 27, 2011 21:21
$.Controller for Alex MacCaw's Book

TODOS:

  • show .models() method and hookup

$.Controller - jQuery plugin factory

JavaScriptMVC's controllers are many things. They are a jQuery plugin factory. They can be used as a traditional view, making pagination widgets and grid controls. Or, they can be used as a traditional controller, initializing and controllers and hooking them up to models. Mostly, controller's are a really great way of organizing your application's code.

Controllers provide a number of handy features such as:

@jupiterjs
jupiterjs / Tabs demo
Created June 28, 2011 13:28
tabs.js
steal.plugins('jquery').then(function($){
var getPanel = function(li){
var href = $(li).find("a").attr("href");
return $(href);
}
$.fn.tabs = function(){
this.find("li")
@jupiterjs
jupiterjs / JavaScriptMVC.md
Created March 12, 2011 05:43
JavaScriptMVC Overview

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
jupiterjs / jquerytab.html
Created July 18, 2011 23:23
exercise.html
<html>
<body>
<ul id='tabs'>
<li><a href='#starcraft'>Starcraft</a></li>
<li><a href='#rua'>Robot Unicorn Attack</a></li>
<li><a href='#fallout'>Fallout</a></li>
</ul>
<div id='starcraft'>Info about starcraft</div>
<div id='rua'>Info about Robot unicorn attack</div>
<div id='fallout'>Info about Fallout</div>
@jupiterjs
jupiterjs / TemplatedEventBinding.md
Created July 5, 2011 04:50
Templated Event Binding

Templated Event Binding

Forgetting to unbind event handlers is the easiest way to create memory leaks. This is an extremely common problem that typically requires a lot of boilerplate unbinding to solve. JavaScriptMVC 3.1's $.Controller now supports templated event binding, making it event easier to create widgets that clean themselves automatically.

Automatic Cleaning

Before we discuss the problem of unbinding event handlers, how jQuery addresses it, and how $.Controller makes it almost impossible to write leaking code, it's worth reviewing part of what makes a perfect plugin (widget).

A perfect widget is many things, extendable, deterministic, etc. But critically for this article, no matter how you use it, it is memory leak free.

@jupiterjs
jupiterjs / JavaScriptMVC Getting Started Again.md
Created June 17, 2011 03:08
A new Getting Started Guide

Welcome to the getting started guide! This getting started guide walks you through creating a simple cookbook app that uses all core parts of JavaScriptMVC. It's purpose is to give you a high level overview of JavaScriptMVC's functionality.

Breakdown

JavaScriptMVC is divided into 4 independent sub projects:

jQueryMX - jQuery MVC and other extensions. StealJS - Dependency Managment and build tool system.

@jupiterjs
jupiterjs / problems.md
Created June 8, 2011 06:06
Problems JavaScriptMVC Solves

Class

Tricky problems with prototypal inheritance.

Animal = function(){
  this.offspring = [];
};

Dog = function(){}

Dog.prototype = new Animal()

@jupiterjs
jupiterjs / FuncUnit.md
Created May 28, 2011 02:47
FuncUnit article

FuncUnit

Testing is an often overlooked part of front end development. Most functional testing solutions are hard to set up, expensive, use a difficult (non JavaScript) API, are too hard to debug, and are don't accurately simulate events. FuncUnit, JavaScriptMVC's testing solution, is designed to solve all these problems. No setup, firebug debugging, a jQuery-like API, and the most accurate possible event simulation make FuncUnit a comprehensive testing solution.

Overview

FuncUnit is a collection of several components:

  • jQuery - for querying elements and testing their conditions
  • QUnit - jQuery's unit test framework for setting up tests