The jQuery community has provided thousands of useful plugins which can be stitched together to create exceptional websites. However, organizing those plugins, tracking their upstream changes and managing dependencies can become a nightmare with a system to help you manage. JavascriptMVC, and specifically its new version 3 release, provides a framework for organizing outside code, integrating it into your workflow and compressing down to a single output javascript file. This talk will focus on taking external plugins such as jQuery Tools, jQuery UI and other popular plugins and creating a workflow for building larger applications from these components. I will show how to use the JavascriptMVC “getter” and “pluginify” scripts to pull external resources. With JavascriptMVC 3, css and javascript can be packaged together creating truly convenient widgets. I will also demonstrate how often-used pieces of functionality can be abstracted into plugins and shared with the general community via Github.
11. $(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 }
12. One BIG File
• 800+ Lines
• Difficult to read
• No Documentation
• No Test Cases
• Not DRY
Sunday, October 17, 2010
13. The Solution?
Break into Maintainable
Chunks of Code
Sunday, October 17, 2010
14. Problems with
Multiple Files
• Does everything go into one folder?
• What if something is needed in two different
places?
• Communication
• Loading speed
• Loading order
Sunday, October 17, 2010
18. Plugin
• Basic unit of organization
• Simply, a folder.
• Initialized by a .js file named the same as
the app.
• For example: my_plugin/my_plugin.js
• Can include other plugins
Sunday, October 17, 2010
19. Resources
• A folder named “resources/” in your plugin
• Contains raw Javascript files, often a jQuery plugin
• jQuery UI
• jQuery Tools
• Modernizr
• Et cetera
Sunday, October 17, 2010
20. Controller
• Could be called several things:
• View Controller
• Widget
• $.fn on Steroids
Sunday, October 17, 2010
21. Controller
• Controls a DOM element
• Uses templates to create & manipulate
the DOM
• Manages state
• Uses PubSub (OpenAjax) to communicate
• Responds to events
Sunday, October 17, 2010
29. 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>
Sunday, October 17, 2010
30. 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'
});
Sunday, October 17, 2010
31. Resources
(jQuery Plugins)
Sunday, October 17, 2010
39. 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
Sunday, October 17, 2010
40. 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
})
Sunday, October 17, 2010
47. 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
Sunday, October 17, 2010
48. Building & Compression
./steal/js steal/buildjs homepage contact
Sunday, October 17, 2010
50. 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>
Sunday, October 17, 2010
52. Summary
• Organize code into apps & plugins
• Always Test Your Code
• Use consistent naming and organization
• Create sharable modules (Github)
• Optimize!
Sunday, October 17, 2010
53. JavascriptMVC Provides
Models (JSON API wrappers)
Views (EJS, Micro, Jaml)
Controllers (Event system, data binding)
Functional testing (FuncUnit, qunit, selenium)
Dependency management (Optimization)
Sunday, October 17, 2010