require js + backbone, bower and grunt

17
Require.js With a Side of Backbone.js plus, Bower and Grunt by: twitter: github: joe fleming @w33ble w33ble

Upload: joe-fleming

Post on 19-May-2015

4.121 views

Category:

Documents


2 download

DESCRIPTION

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

TRANSCRIPT

Require.jsWith a Side of Backbone.js

plus, Bower and Grunt

by: twitter: github: joe fleming @w33ble w33ble

Hi, I'm Joe

Web developer (8 years & counting)PHP�& Node.js�Lead Dev @ ConvrrtWPCurrentContracting

Today's AgendaBower for Frontend LibsRequire.js with BackboneBuild process with GruntExamples or App from scratch?

CaveatsNode.jsWindows may not work

Warning: Advanced Content

ASK QUESTIONS!

Let's talk evolution

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>

ModulesCommonJS (formerly ServerJS)

Asynchronous Module Definition (AMD)

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

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

We're coders

So Let's Code!

Thanks!

Joe FlemingTwitter: @w33blegithub.com/w33bleslideshare.net/w33ble