Organizing Code with JavascriptMVC

Organizing Code with
JavaScriptMVC
git clone git://github.com/tdreyno/jquery-demo.git

Thomas Reynolds

Sunday, October 17, 2010

Who am I?


Who am I?
• JavascriptMVC Core Committer

• jQuery Plugin Developer

• @tdreyno

• github.com/tdreyno

• awardwinningfjords.com


Getting to Know You


Getting to Know You

• Traditional Website Developers

• Web Application Developers

• Mobile Web Developers


Organizing Code


Common Problems


One BIG File


$(function(){

// make external links open in new window
$('a[rel="external"]').attr('target','_blank');

if ($("body").attr('id') == 'homepage'){
bindHomepage();
} else if ($("body").hasClass('lessons_index') || $("body").hasClass('lessons_list')) {
bindLessonsList();
} else if ($("body").hasClass('documents_detail')) {
if (weird === 0){
showDetail();
}
weird++;
} else if ($("body").hasClass('lessons_detail')) {
if (weird === 0){
showDetail();
}
weird++;

// look for requests to launch the activity editor
var edit_matches = window.location.search.match(/[?&]edit_activity=(d+)&type=([^=?&]+)/)
if (edit_matches) {
var edit_activity_id = edit_matches[1];
var edit_activity_type = edit_matches[2];
launchCreatorModal({
id: edit_activity_id,
type: edit_activity_type,
mode: 'edit'
});
}

} else if ($("body").attr('id')=='my_classroom'){
bindMyClassroom();
} else if ($("body").hasClass('templates_index')){
bindTemplates();
}

bindCreatorLinks();

// This can cause an error in Chrome, but the problem is already patched (03/2010)
// and awaiting a release.
window.onbeforeunload = handleOnBeforeUnload;
window.onunload = handleOnUnload;

if (window.location.search.match(/[?&]from_activity=1/)) {
$('#back_to_activity a').pulse();
}

bindSearchToggle();

// Load the "Star This" code
// Should be inlined using something like Sprockets in the future
$.getScript("/js/stars-and-add-to-buttons.js");

// Handle resources page toggles
$("p.more a.morelink, ul.more a.morelink, a.arrow").click(function(e) {
e.preventDefault();
var parentElem = $(this).parents(".openRow, .closedRow");
parentElem[0].className = parentElem.is(".openRow") ? "closedRow" : "openRow";
});

if (document.location.hash.length) {
$("a[name=" + document.location.hash.replace(/#/, "") + "]").parents(".closedRow").find(".arrow").click();
Sunday, October 17, 2010 }

One BIG File

• 800+ Lines

• Difficult to read

• No Documentation

• No Test Cases

• Not DRY


The Solution?

Break into Maintainable
Chunks of Code


Problems with
Multiple Files
• Does everything go into one folder?

• What if something is needed in two different
places?

• Communication

• Loading speed

• Loading order


JavascriptMVC Provides

Dependency
Management


StealJS
• Asynchronously Loading

• Provides a structure for organizing ﬁles

• Cleans, Combines & Compresses

• Bundles Presentational CSS

• Supports CoffeeScript & Less.js


StealJS Example
steal.plugins("jquery/controller",
"jquery/event/drag",
"jquery/dom/within")
.then(function($) {
// Configure JavascriptMVC plugins
})
.resources("jquerytools.tabs",
"jquery.ui.position",
"jquerytools.scrollable")
.then(function($) {
// Configure jQuery plugins
})
.controllers("tile",
"large_zoom",
"medium_zoom",
"small_zoom",
"control",
"image")
.then(function($) {
// All dependencies are satisfied
})


Plugin
• Basic unit of organization
• Simply, a folder.
• Initialized by a .js ﬁle named the same as
the app.
• For example: my_plugin/my_plugin.js
• Can include other plugins

Resources
• A folder named “resources/” in your plugin

• Contains raw Javascript ﬁles, often a jQuery plugin

• jQuery UI

• jQuery Tools

• Modernizr

• Et cetera


Controller

• Could be called several things:

• View Controller

• Widget

• $.fn on Steroids


Controller
• Controls a DOM element

• Uses templates to create & manipulate
the DOM

• Manages state

• Uses PubSub (OpenAjax) to communicate

• Responds to events


Example Site


Example Site
• Homepage
• A slideshow
• Tabs
• Custom Autocomplete Search
• Contact Page
• Form with Validator
• “Success” lightbox
• Custom Autocomplete Search


Getting Started
• Download zip ﬁle from GitHub
• http://github.com/jupiterjs/framework/
downloads
• Unzip
• Install gem
• gem install javascriptmvc --pre
• jmvc-init jqconf-demo


Fresh JavascriptMVC
Application


Homepage “App”


Homepage HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>homepage</title>
</head>
<body>
<h1>Thanks for stealing StealJS!</h1>
<p>Don't worry, it's open source. It's only
stealing if you don't do something awesome with it.</p>
<div id='content'></div>

<script type='text/javascript'
src='../steal/steal.js?homepage'></script>
</body>
</html>


Homepage Javascript
steal( 'resources/example' ) // Loads 'resources/example.js'
.css( 'homepage' ) // Loads 'homepage.css'
.plugins(
'steal/less',
'steal/coffee' ) // Loads 'steal/less/less.js' and
// 'steal/coffee/coffee.js'

.then(function(){ // Adds a function to be called back
// once all prior files have been
// loaded and run
steal.coffee('resources/example') // Loads 'resources/example.coffee'
.less('resources/example'); // Loads 'resources/example.less'
});


Resources
(jQuery Plugins)


homepage/homepage.js
steal.plugins("jquery")
.resources("slider", "tabs")
.then(function($) {

$(document).ready(function() {
$("#slider").slider();
$("#tabs").tabs();
});

});


Contact Page “App”


Contact Page
.resources("validator", "lightbox")
.then(function() {

$("form").validator();

$("form").submit(function() {
$.lightbox();
});

});


Autocomplete Search
(Plugin)


TR.SearchControl
Plugin


But Wait!?


FuncUnit
• Test-Driven Development:

• Results well thought-out code

• Inspires trust in your users

• Documents logic

• Provides an automated means of making
sure everything still works


TR.SearchControl
FuncUnit
module("TR.SearchControl", {
setup: function() {
$("form#search").tr_search_control();
}
})

test("Autocomplete", function(){
// Type into text box
// Extra results should appear
})

test("Submit", function(){
// Clicking submit or hitting enter
// Should submit the form
})


TR.SearchControl
FuncUnit


Search Controller
steal.plugins("jquery/controller")
.resources("autocomplete")
.then(function($) {

$.Controller.extend("TR.SearchControl", { }, {
init: function() {
this.element.autocomplete();
},

"input:text change": function() {
// Autocomplete lookup
},

"submit": function() {
// Ajax form submit
}
});

$("form#search").tr_search_control();
});

});

homepage/homepage.js
.resources("slider", "tabs")
.plugins("tr/search_control")
.then(function($) {

$("#slider").slider();
$("#tabs").tabs();
});

});


All Done Coding,
Time to Optimize


Building & Compression
• Packages
• 0.js - Shared between all apps
(jQuery, JavascriptMVC componetns, etc)
• homepage/production.js
Unique to Homepage
• contacts/contact.js
Unique to Contact
• Google Closure Compiler
• Dojo Shrinksafe also available



./steal/js steal/buildjs homepage contact


Production HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>homepage</title>
</head>
<body>
<h1>Thanks for stealing StealJS!</h1>
<p>Don't worry, it's open source. It's only stealing if you
don't do something awesome with it.</p>
<div id='content'></div>

<script type='text/javascript'
src='../steal/steal.js?homepage,production'>
</script>
</body>
</html>


Summary
• Organize code into apps & plugins

• Always Test Your Code

• Use consistent naming and organization

• Create sharable modules (Github)

• Optimize!


JavascriptMVC Provides
Models (JSON API wrappers)

Views (EJS, Micro, Jaml)

Controllers (Event system, data binding)

Functional testing (FuncUnit, qunit, selenium)

Dependency management (Optimization)

My Plugins

JavascriptMVC convenience gem

• gem install javascriptmvc --pre

• jmvc-init newproject

• jmvc-gen newapp


My Plugins
• steal.plugins("ss/state_machine")
http://github.com/secondstory/secondstoryjs-
statemachine

• steal.plugins("ss/router")
http://github.com/secondstory/secondstoryjs-router

• steal.plugins("tr/views/mustache")
http://github.com/tdreyno/mustache-javascriptmvc

• steal.plugins("tr/controller/pure")
http://github.com/tdreyno/javascriptmvc-pure


Thank you
• Questions?

• http://v3.javascriptmvc.com/index.html

• @tdreyno

• awardwinningfjords.com

• github.com/secondstory

• github.com/tdreyno

• http://github.com/tdreyno/jquery-demo


Organizing Code with JavascriptMVC

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Organizing Code with JavascriptMVC (20)

Recently uploaded (20)

Organizing Code with JavascriptMVC