Slides from my "Require.js with a side of Backbone.js, plus Bower and Grunt", given at Phoenix Javascript Meetup on Jun. 4th, 2013 at UAT

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