This document discusses the integration of Require.js with Backbone.js, Bower, and Grunt for front-end development. It covers various concepts such as DOM manipulation, AJAX requests, and module patterns in JavaScript, emphasizing the importance of loading one version of libraries to avoid conflicts. Additionally, it provides examples of code snippets and encourages coding discussions and questions.

1. Require.js
With a Side of Backbone.js
plus,BowerandGrunt
by: twitter: github:joefleming @w33ble w33ble

2. Hi, I'm Joe
Webdeveloper(8years&counting)
PHP&Node.js
LeadDev@Convrrt
WPCurrent
Contracting

3. Today's Agenda
BowerforFrontendLibs
Require.jswithBackbone
BuildprocesswithGrunt
ExamplesorAppfromscratch?

4. Caveats
Node.js
Windowsmaynotwork

5. Warning: Advanced Content
ASK QUESTIONS!

6. Let's talk evolution

7. Dark days of DOM
// DOM manipulation
document.getElementById('myElement');
// AJAX
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

8. Wrapper Libraries
Circamid-2000's
Dojo,Prototype,MooTools,jQuery,etc
// DOM manipulation
$('#myElement');
// AJAX
$.ajax(/* code here */);

9. There Can be Only One!
// FAIL
<script src="js/jquery.js"></script>
<script src="js/mootools.js"></script>
<script src="js/prototype.js"></script>

10. And Only One Version
// FAIL
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery-1.8.3.js"></script>

11. Modules
CommonJS(formerlyServerJS)
AsynchronousModuleDefinition(AMD)

12. MV*
Backbone,Ember,js,Angular,Knockout,etc

13. Module Pattern
var someObject = { msg: 'Hello World' };
(function($, Obj, undefined) {
// Internally access jQuery as $
alert("Using jQuery verson " + $().jquery);
// Internally access someOtherObject as Obj
alert("Object says: " + Obj.msg);
})(jQuery, someObject);

14. AMD pattern
Asynchronouslyloads/js/classes/UserClass.js
andmakesthatmoduleavailableasUser
*AssumingabasePathof./js
// Require bootstrap
require(['classes/UserClass'], function(User) {
var Joe = new User('Joe');
alert('New user created: ' + Joe.getName());
});

15. User module
// User module, js/classes/UserClass.js
define(function() {
function User(name) {
this.name = name;
}
User.prototype.getName = function() {
return this.name;
}
return User;
});
JSFiddle

16. We'recoders
So Let's Code!

17. Thanks!
JoeFleming
Twitter:@w33ble
github.com/w33ble
slideshare.net/w33ble