• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Require js + backbone, bower and grunt
 

Require js + backbone, bower and grunt

on

  • 4,087 views

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

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

Statistics

Views

Total Views
4,087
Views on SlideShare
4,087
Embed Views
0

Actions

Likes
1
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Require js + backbone, bower and grunt Require js + backbone, bower and grunt Presentation Transcript

    • Require.jsWith a Side of Backbone.jsplus,BowerandGruntby: twitter: github:joefleming @w33ble w33ble
    • Hi, Im JoeWebdeveloper(8years&counting)PHP&Node.jsLeadDev@ConvrrtWPCurrentContracting
    • Todays AgendaBowerforFrontendLibsRequire.jswithBackboneBuildprocesswithGruntExamplesorAppfromscratch?
    • CaveatsNode.jsWindowsmaynotwork
    • Warning: Advanced ContentASK QUESTIONS!
    • Lets talk evolution
    • 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");}
    • Wrapper LibrariesCircamid-2000sDojo,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(formerlyServerJS)AsynchronousModuleDefinition(AMD)
    • MV*Backbone,Ember,js,Angular,Knockout,etc
    • 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);
    • 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());});
    • 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
    • WerecodersSo Lets Code!
    • Thanks!JoeFlemingTwitter:@w33blegithub.com/w33bleslideshare.net/w33ble