How To Manage Large jQuery Apps
Upcoming SlideShare
Loading in...5
×
 

How To Manage Large jQuery Apps

on

  • 32,906 views

Get off the DOM and check out a few ways of writing jQuery applications that stand up to a full development cycle. jQuery's API is fantastic, but hinging your entire large application on that API can ...

Get off the DOM and check out a few ways of writing jQuery applications that stand up to a full development cycle. jQuery's API is fantastic, but hinging your entire large application on that API can be more harmful than helpful. Instead, learn how to use the features in jQuery and vanilla javascript to build an application structure that is both modular and manageable. A lot of features you already know and love, plus a little object-oriented JavaScript, can go a long way in making your JavaScript maintainable.

Statistics

Views

Total Views
32,906
Views on SlideShare
30,091
Embed Views
2,815

Actions

Likes
98
Downloads
759
Comments
13

23 Embeds 2,815

http://blog.mklog.fr 1386
http://speakerrate.com 885
http://www.dooriented.com 332
http://www.slideshare.net 113
http://onwebdev.blogspot.com 25
http://localhost 18
https://twitter.com 17
http://webcache.googleusercontent.com 8
http://www.linkedin.com 8
http://192.168.6.52 3
https://www.linkedin.com 3
http://translate.googleusercontent.com 3
http://us-w1.rockmelt.com 2
http://static.slidesharecdn.com 2
http://feeds.feedburner.com 2
https://cloudup.com 1
http://onwebdev.blogspot.com.es 1
http://localhost:3000 1
http://pinterest.com 1
http://blog.gabrieleromanato.com 1
http://migueldev.com 1
http://paper.li 1
http://apache-wicket.1842946.n4.nabble.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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

110 of 13 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hello,
    u suggest loading js modules something like this:
    var test = Object.create(myPlugin);
    test.init({color:'#101CA7'});
    test.doit('hello');

    how would you load ready jQuery Plugins such as $('#carousel').rcarousel ?
    Are you sure you want to
    Your message goes here
    Processing…
  • very good
    Are you sure you want to
    Your message goes here
    Processing…
  • Tried to download this and its in .key format? what kind of program reads that? would be nice to be in pdf :)
    Are you sure you want to
    Your message goes here
    Processing…
  • Looks like you've found a good solution to your problem. It's true, jQuery's terse awesomeness tends to get in the way of some of the scalable patterns, and there's not a ton of super-pretty solutions.

    Your solution looked fine, but you may have also been able to get around the problem with the $.proxy method that was introduced in jQuery 1.4 - it will let you change the context of your handlers back to what you want. It may be an uglier move though, as there's a lot of wrapping functions involved.
    Are you sure you want to
    Your message goes here
    Processing…
  • Ended up figuring it out. In the inheritedFacet code, we have a create method that is called when the widget is created. We attach live events to the elements in the widgets (checkboxes, radios) in the create event. The key is to forward along the context using the eventData parameter of live. Something like this:

    var inheritedFacet = $.extend(true, {}, baseFacet, {
    options: {
    //Here is an extra option in the subclass, for good measure
    option3: ’rules!’
    },
    create: function() {
    $().live('click', {self: this}, this.onClick);
    },
    onClick: function(evt) {
    var self = evt.data.self; //ZOMG! Now we've got the object's context
    alert(self.options.option1); //Use self to access the object
    }
    });

    jQuery FTMFW :-)
    Are you sure you want to
    Your message goes here
    Processing…

110 of 13

Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

How To Manage Large jQuery Apps How To Manage Large jQuery Apps Presentation Transcript

  • How To Manage Large Applications with jQuery or whatever Alex Sexton @slexaxton Bay Area jQuery Conference 2010 BAjQCON
  • WHY? Because I’m tired of stuff like this
  • WHY!?
  • WHY!?!!11one And you’re probably tired of maintaining it.
  • Wouldn’t this be nice? Start thinking about our sites as Apps instead of a pile of scripts.
  • IN A WORLD: (Read this in the movie-trailer-guy smoky-voice) Where changing the dom doesn’t break your app Where you can re-use portions of your code (OMG) Where your files are separated based on tasks, but aren’t loaded by the hundreds at the top of your page Where you look at your code, and you understand what it does.
  • IN A WORLD: (Read this in the movie-trailer-guy smoky-voice) Where changing the dom doesn’t break your app Where you can re-use portions of your code (OMG) Where your files are separated based on tasks, but aren’t loaded by the hundreds at the top of your page Where you look at your code, and you understand what it does.
  • IN A WORLD: (Read this in the movie-trailer-guy smoky-voice) Where changing the dom doesn’t break your app Where you can re-use portions of your code (OMG) Where your files are separated based on tasks, but aren’t loaded by the hundreds at the top of your page Where you look at your code, and you understand what it does.
  • IN A WORLD: (Read this in the movie-trailer-guy smoky-voice) Where changing the dom doesn’t break your app Where you can re-use portions of your code (OMG) Where your files are separated based on tasks, but aren’t loaded by the hundreds at the top of your page Where you look at your code, and you understand what it does.
  • Let’s Arbitrarily Pick Four Things, kk? Inheritance Model Configurable Mixin Options Dom to Object Bridge Dependency Management
  • Inheritance Model Pick what you like, I really really don’t care which Native / Pseudo-Classical (<-- Crock’s word not mine) Classical Prototypal Inheritance
  • Native / PseudoClassical
  • Native / PseudoClassical Weird, I know Blame Java (Brendan Eich is blameless (ok maybe not but still...)) JavaScript (ECMA) is a Functional language with Imperative/Classical syntax (Specifically like if Java took advantage of Scheme) Important to grok, and easy once you get the hang of it, even if you never use it / hate it.
  • Classical Inheritance
  • Classical Inheritance If you’ve ever taken a programming course, you already know this (AKA a good starting point) Has some overhead since it isn’t native Not really the JavaScriptiest way to do it, but who cares? There’s a bunch-o-options: Simple Inheritance, Mootools Classes, LowPro, Base2, and MOAR!
  • Prototypal Inheritance
  • Prototypal Inheritance
  • Prototypal Inheritance Papa Crockford likes it and I kinda like him Fits into the language the best jQuery.extend means easy Multiple Inheritance! Not always complex enough, forealz
  • Quote from Crocky “It doesn't matter what an object's lineage is, what matters is the quality of its contents”
  • KK, I get Inheritance, sup next?
  • KK, I get Inheritance, sup next? Yeah right, but ok, we’ll move on.
  • Configurable Mixin Options or a fancy name for Jamming Two Objects together
  • Always do this.
  • Trust me. It works better than Find in Files -> “#BADA55”
  • Let’s get a little more advanced. The DOM to Object Bridge (yes, this is a list)
  • DOM <-> Object If you start with a DOM Element, easily get back to its related Object in your App (good for user interaction) Describe your site in Objects, but still have an easy link to it’s displayed DOM element (good for automatic things)
  • Step 1: Create Your Object
  • Step 2: Create A Bridge
  • Step 3: Marvel at how much more modular you just got. More importantly, everything is configurable from a single place.
  • AAAND if you somehow end up with the DOM element, and you need to execute a plugin function:
  • OK, so now I’m modular, but I have 18 files loading, what would Steve Souders think?! Dependency Management FTMFW
  • Dependency Management Javascript doesn’t do this by default like many languages (include, require, etc) Can be done serverside or clientside these days Smart people already did all the hard work (Pretty much just James Burke, but that must mean he’s really good at it though...)
  • Dependency Management
  • RequireJS It takes some configuration. Get over it. It’s actually faster than just including script tags, since it’s asynchronous by default. yay steve! Takes a few instructions and only loads what’s necessary when it’s necessary.
  • RequireJS Wrap a module with its dependencies and RequireJS will ensure those dependencies are loaded.
  • RequireJS This is great during development, but loading everything individually during production might cause some slowdown. You can run a server-side build based on your RequireJS dependency tree and get exactly what you need combined and minified.
  • LabJS LabJS is not for dependency management in the strictest terms, but it is a lighter weight alternative to RequireJS that helps you load everything in the highest performing manner possible. Here, you tell LabJS what modules need to finish executing before being executing the next ones.
  • In the end You have clearly defined modules. You have easy bridges between your dom and your objects, but they are loosely coupled. You load your app as a single call, and the dependencies are figured out. Your page’s performance increases as well as your sanity level
  • Fin. Alex Sexton BFFS4EVAR AlexSexton[at]gmail @slexaxton http://alexsexton.com/ http://yayquery.com/ http://alexsexton.com/inheritance/demo Special Thanks to: Mike & Pierson Taylor, Paul Irish, Rebecca Murphey, Adam J Sontag, John Resig, James Burke, Kyle Simpson, Crock, Eich and everyone who watches yayQuery!