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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Organizing Code with JavascriptMVC

Similar to Organizing Code with JavascriptMVC (20)

Recently uploaded

Recently uploaded (20)

Organizing Code with JavascriptMVC