Require js + backbone, bower and grunt
-
Upload
joe-fleming -
Category
Documents
-
view
4.120 -
download
2
description
Transcript of Require js + backbone, bower and grunt
Require.jsWith a Side of Backbone.js
plus, Bower and Grunt
by: twitter: github: joe fleming @w33ble w33ble
Today's AgendaBower for Frontend LibsRequire.js with BackboneBuild process with GruntExamples or App from scratch?
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"); }
Wrapper LibrariesCirca mid-2000's
Dojo, Prototype, MooTools, jQuery, etc
// DOM manipulation $('#myElement'); // AJAX $.ajax(/* code here */);
There Can be Only One! // FAIL <script src="js/jquery.js"></script> <script src="js/mootools.js"></script> <script src="js/prototype.js"></script>
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>
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);
AMD pattern
Asynchronously loads /js/classes/UserClass.jsand makes that module available as User
* Assuming a basePath of ./js
// Require bootstrap require(['classes/UserClass'], function(User) { var Joe = new User('Joe'); alert('New user created: ' + Joe.getName()); });
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