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 ...
IN A WORLD:
(Read this in the movie-trailer-guy smoky-voice)

  Where changing the dom doesn’t break your app
  Where you ...
IN A WORLD:
(Read this in the movie-trailer-guy smoky-voice)

  Where changing the dom doesn’t break your app
  Where you ...
IN A WORLD:
(Read this in the movie-trailer-guy smoky-voice)

  Where changing the dom doesn’t break your app
  Where you ...
Let’s Arbitrarily Pick Four
Things, kk?

 Inheritance Model
 Configurable Mixin Options
 Dom to Object Bridge
 Dependency M...
Inheritance Model
Pick what you like, I really really don’t care which



  Native / Pseudo-Classical (<-- Crock’s word no...
Native / PseudoClassical
Native / PseudoClassical
 Weird, I know

 Blame Java (Brendan Eich is blameless (ok maybe not but still...))

 JavaScript ...
Classical Inheritance
Classical Inheritance
 If you’ve ever taken a programming course, you already
 know this (AKA a good starting point)

 Has...
Prototypal Inheritance
Prototypal Inheritance
Prototypal Inheritance


 Papa Crockford likes it and I kinda like him
 Fits into the language the best
 jQuery.extend mea...
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 interact...
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
             ...
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 serve...
Dependency Management
RequireJS

It takes some configuration. Get over it.
It’s actually faster than just including script tags, since
it’s async...
RequireJS




 Wrap a module with its dependencies and
RequireJS will ensure those dependencies are
                   loa...
RequireJS

This is great during development, but loading
everything individually during production might cause
some slowdo...
LabJS
LabJS is not for dependency management in the
strictest terms, but it is a lighter weight alternative to
RequireJS t...
In the end

 You have clearly defined modules.
 You have easy bridges between your dom and your
 objects, but they are loos...
Fin.
    Alex Sexton                                         BFFS4EVAR
    AlexSexton[at]gmail
    @slexaxton
    http://a...
How To Manage Large jQuery Apps
Upcoming SlideShare
Loading in...5
×

How To Manage Large jQuery Apps

32,787

Published on

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.

Published in: Technology
13 Comments
100 Likes
Statistics
Notes
  • 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 ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • very good
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Tried to download this and its in .key format? what kind of program reads that? would be nice to be in pdf :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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 :-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
32,787
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
783
Comments
13
Likes
100
Embeds 0
No embeds

No notes for slide








































  • How To Manage Large jQuery Apps

    1. 1. How To Manage Large Applications with jQuery or whatever Alex Sexton @slexaxton Bay Area jQuery Conference 2010 BAjQCON
    2. 2. WHY? Because I’m tired of stuff like this
    3. 3. WHY!?
    4. 4. WHY!?!!11one And you’re probably tired of maintaining it.
    5. 5. Wouldn’t this be nice? Start thinking about our sites as Apps instead of a pile of scripts.
    6. 6. 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.
    7. 7. 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.
    8. 8. 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.
    9. 9. 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.
    10. 10. Let’s Arbitrarily Pick Four Things, kk? Inheritance Model Configurable Mixin Options Dom to Object Bridge Dependency Management
    11. 11. Inheritance Model Pick what you like, I really really don’t care which Native / Pseudo-Classical (<-- Crock’s word not mine) Classical Prototypal Inheritance
    12. 12. Native / PseudoClassical
    13. 13. 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.
    14. 14. Classical Inheritance
    15. 15. 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!
    16. 16. Prototypal Inheritance
    17. 17. Prototypal Inheritance
    18. 18. 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
    19. 19. Quote from Crocky “It doesn't matter what an object's lineage is, what matters is the quality of its contents”
    20. 20. KK, I get Inheritance, sup next?
    21. 21. KK, I get Inheritance, sup next? Yeah right, but ok, we’ll move on.
    22. 22. Configurable Mixin Options or a fancy name for Jamming Two Objects together
    23. 23. Always do this.
    24. 24. Trust me. It works better than Find in Files -> “#BADA55”
    25. 25. Let’s get a little more advanced. The DOM to Object Bridge (yes, this is a list)
    26. 26. 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)
    27. 27. Step 1: Create Your Object
    28. 28. Step 2: Create A Bridge
    29. 29. Step 3: Marvel at how much more modular you just got. More importantly, everything is configurable from a single place.
    30. 30. AAAND if you somehow end up with the DOM element, and you need to execute a plugin function:
    31. 31. OK, so now I’m modular, but I have 18 files loading, what would Steve Souders think?! Dependency Management FTMFW
    32. 32. 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...)
    33. 33. Dependency Management
    34. 34. 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.
    35. 35. RequireJS Wrap a module with its dependencies and RequireJS will ensure those dependencies are loaded.
    36. 36. 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.
    37. 37. 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.
    38. 38. 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
    39. 39. 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!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×