Require js + backbone, bower and grunt

4,970 views

Published on

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,970
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Require js + backbone, bower and grunt

  1. 1. Require.jsWith a Side of Backbone.jsplus,BowerandGruntby: twitter: github:joefleming @w33ble w33ble
  2. 2. Hi, Im JoeWebdeveloper(8years&counting)PHP&Node.jsLeadDev@ConvrrtWPCurrentContracting
  3. 3. Todays AgendaBowerforFrontendLibsRequire.jswithBackboneBuildprocesswithGruntExamplesorAppfromscratch?
  4. 4. CaveatsNode.jsWindowsmaynotwork
  5. 5. Warning: Advanced ContentASK QUESTIONS!
  6. 6. Lets talk evolution
  7. 7. Dark days of DOM// DOM manipulationdocument.getElementById(myElement);// AJAXvar xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
  8. 8. Wrapper LibrariesCircamid-2000sDojo,Prototype,MooTools,jQuery,etc// DOM manipulation$(#myElement);// AJAX$.ajax(/* code here */);
  9. 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. 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. 11. ModulesCommonJS(formerlyServerJS)AsynchronousModuleDefinition(AMD)
  12. 12. MV*Backbone,Ember,js,Angular,Knockout,etc
  13. 13. Module Patternvar someObject = { msg: Hello World };(function($, Obj, undefined) {// Internally access jQuery as $alert("Using jQuery verson " + $().jquery);// Internally access someOtherObject as Objalert("Object says: " + Obj.msg);})(jQuery, someObject);
  14. 14. AMD patternAsynchronouslyloads/js/classes/UserClass.jsandmakesthatmoduleavailableasUser*AssumingabasePathof./js// Require bootstraprequire([classes/UserClass], function(User) {var Joe = new User(Joe);alert(New user created: + Joe.getName());});
  15. 15. User module// User module, js/classes/UserClass.jsdefine(function() {function User(name) {this.name = name;}User.prototype.getName = function() {return this.name;}return User;});JSFiddle
  16. 16. WerecodersSo Lets Code!
  17. 17. Thanks!JoeFlemingTwitter:@w33blegithub.com/w33bleslideshare.net/w33ble

×