permalink

6

Slides: Building Decoupled Large-Scale Applications With JavaScript And jQuery

Hey guys. Here are the slides for a talk I gave at jQuery Conf (Europe), where I presented a number of effective design patterns for scaling and decoupling your JavaScript (and jQuery) powered web apps. If you've watched my videos on scaling applications, you might be interested in some of the new demos that were included in this version.

Summary

As a JavaScript developer (or a heavy jQuery user) it's important to remember that you can take advantage of flexible patterns like Pub/Sub (with or without a Mediator) for decoupling your application to make logical modules in your codebase more maintainable and more easily reusable.

You can also benefit from patterns that can be found in libraries like jQuery (such as the Facade) to implement all kinds of fun concepts like limited public APIs or application-level security. Later in the talk I show how a Mediator can also be used to gain greater control over modules, like being able to start, stop and restart them to enable building applications that can 'fix' breakages.

Remember that with the architecture for larger apps that I cover, you're free to use as few or as many of the patterns mentioned.

Resources

For those looking for the demo application shown near the end of the talk, the source to it can be found here: https://github.com/addyosmani/largescale-demo.

Links to articles I've written related to this talk can be found in the further reading section. You might also be interested in catching up on some of these patterns . Also, a gist I posted with a few different ways to implement Pub/Sub with jQuery can be found at https://gist.github.com/1321768 and simple Mediator pattern implementations can be found here: https://gist.github.com/1794823

Videos

The conference organizers were kind enough to record all of the sessions and (for anyone interested), I'll update this post with a link to the videos as soon as they're available. 

6 Comments

Leave a Reply

Required fields are marked *.