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.

1. How To Manage Large
Applications with jQuery or
whatever
Alex Sexton
@slexaxton
Bay Area jQuery Conference 2010 BAjQCON

2. WHY?
Because I’m tired of stuff like this

3. WHY!?

4. WHY!?!!11one
And you’re probably tired of maintaining it.

5. Wouldn’t this be nice?
Start thinking about our sites as Apps instead of a pile
of scripts.

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. 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. 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. 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. Let’s Arbitrarily Pick Four
Things, kk?
Inheritance Model
Configurable Mixin Options
Dom to Object Bridge
Dependency Management

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. Native / PseudoClassical

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. Classical Inheritance

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. Prototypal Inheritance

17. Prototypal Inheritance

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. Quote from Crocky
“It doesn't matter what an
object's lineage is, what
matters is the quality of its
contents”

20. KK, I get Inheritance, sup next?

21. KK, I get Inheritance, sup next?
Yeah right, but ok, we’ll move on.

22. Configurable Mixin Options
or a fancy name for Jamming
Two Objects together

23. Always do this.

24. Trust me.
It works better than Find in Files -> “#BADA55”

26. Let’s get a little more
advanced.
The DOM to Object Bridge (yes, this is a list)

27. 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)

28. Step 1: Create Your Object

29. Step 2: Create A Bridge

30. Step 3: Marvel at how much
more modular you just got.
More importantly, everything is configurable from a
single place.

31. AAAND if you somehow end up with the DOM
element, and you need to execute a plugin function:

32. OK, so now I’m modular, but
I have 18 files loading, what
would Steve Souders think?!
Dependency Management FTMFW

33. 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...)

34. Dependency Management

35. 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.

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

37. 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.

38. 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.

39. 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

40. 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!