Tools For jQuery Application Architecture – The Printable Chart


Hey guys. Today I would like to add a new entry to my on-going series on Large Scale Application development with jQuery – printable tools for application architecture charts.

A lot of you replied back to posts in the series with additional tools you found useful and I thought it might be handy to create you a single chart that broke down some of my updated recommendations for tasks like structuring client-side MVC apps, templating, unit and BDD testing, debouncing and more.

For readers that might prefer something more list-like, I’ve also posted up a list version and linked up to the official sites for most of the recommendations on the list inside this post. 



If you haven’t had an opportunity to follow the series as yet, don’t worry. It’s purpose is to help you become aware of the tools and methodologies that can be employed when building jQuery applications that require a greater level of structure or complexity. You may find my first post on building large-scale jQuery apps worth reading or book on essential JavaScript design patterns if code architecture is what you’re more interested in.




Tools for jQuery Application Architecture – List Version

and that’s it!. If you’re currently building any large-scale applications using jQuery, please feel free to get in touch as I’m always looking for success stories that may prove useful to the rest of the community.

Remember that if you found the charts useful, you can easily share it with your friends and colleagues by clicking the ‘retweet’ button below. Until next time, good luck with your projects!

Last Updated: March 15th 2011.


    • Hey David – I remember looking at FuncUnit while I was evaluating what to include on the chart. Whilst it does offer a level of further QUnit automation through env.js, I wasn't all that comfortable slotting it into the 'unit testing' block given that it describes itself as a functional testing kit and thats it's main focus. Would you disagree?

      • I agree. I believe devs would find FuncUnit useful though since it simplifies testing the user interaction. Perhaps it doesn't belong in the section on unit testing, but I think it qualifies to be on the list somewhere.

        When we're on the subject; how about adding Amplify ( to the list? (request, store, pub/sub).

        Thanks for a great list, and please keep updating it. I will use it as a primary source when looking for recommended tools.

  1. is missing.

    It is an MVC with templating, validation, testing, binding and many other features built in.

    Check it out.

    • Hey Tubal! Thanks for sending over your pub/sub implementation. If you get a chance could you describe how your version might improve on Higgins original? Hopefully we'll be able to get pub/sub in 1.6. I added it as a suggestion during our roadmap meeting and I believe Ben Alman's going to be doing a little work on it if it gets greenlighted.

  2. Pingback: Fundamenty tworzenia aplikacji w JS « Wiadomości o technologiach IT

  3. Pingback: Tools for jQuery Application Architecture – The Printable Chart | Brent Sordyl's blog

  4. The fact that jQuery is so easy to use has led to an explosion of new sites (even very large projects) that use simple dhtml-ish effects as well as ajax and other stuff extensively. Now everbody needs "js-developers". What happens? Just find someone "who programs is jQuery" get started. The first couple of things work fine, but as things get more complex, that person can't handle it. We really need more developers who understand javascript much more thouroughly. BTW there are more and more of these people, and they will always find good work. But there are also very many "jQuery users", who are involved in projects way beyond their capabilities.

  5. Good evening, I want to know how to use MVC Framework with jQuery syntax with the quickest to learn.
    Depending on your testing what are your feelings? Your personal opinions on the subject ?

  6. Pingback: 30 Fantastic New jQuery Plugins-Speckyboy Design Magazine

  7. Pingback: 316i « Mindless Chatter

  8. Hey you people have to bump this up jQuery course up by voting. Right now it is tied with the Yeti course at a measly 10 points. What technology do you want to use with QuickBase – jQuery technology or Yeti technology?

  9. Pingback: Quelques plugs jquery « SpagMedia

  10. Pingback: Weekly Links– 2010_11 (50 Links for Web Devs & Geeks) :MS-Joe (Joe Stagner)

  11. Pingback: The World In Links [3/14-3/20] - Nicholas Kreidberg | Nicholas Kreidberg

  12. Pingback: 30 Fantastic New jQuery Plugins « Dragon Blog

  13. Pingback: Follia Digitale » Tools For jQuery Application Architecture – The Printable Chart

  14. Great stuff!

    It might be a good idea to add html5boilerplate somewhere. It's a huge time saver, and it integrates a bunch of the items above into a cohesive build process.

    • I've been thinking about that : ) The 'tools' branch of the chart might get a little bit of an overhaul with some improved sections and if so, I'll definitely include html5bp in there.

    • Nice! I haven't used lawnchair before but Brian does seem to have written a fairly clean implementation for storage. I'll check it out and consider it for inclusion.

  15. Is there something like underscore.js but with deep variable testing?  So I don't have to include my own utils with only this highly used piece of code:

         * Check if a deeply set property is set
         * @param strVar string representation of property path i.e.
         * @param context optional, defaults to window
         * @return boolean if set
        my.isset = function ( strVar, context ) {
            if (!context) {
                context = window;

            var namespaces = strVar.split(".");
            for (var i = 0; i < namespaces.length; i++) {
                if (context[namespaces[i]]) {
                    context = context[namespaces[i]];
                } else {
                    return false;
            return true

  16. Ariston ServisiAriston Servisi İstanbul geneline haftanın 7 günü uzman teknik servis personeli, TSE belgeli servis hizmet noktaları ve güleryüzlü hizmet anlayışı ile size bir telefon kadar yakın. 0212 444 1 156 numaralı çağrı merkezimizi arayabilir ve kapıda kredi kartıyla ödeme imkanından da faydalanabilirsiniz. Ariston Bakım Montaj Arıza Tamir Servisi. Satış sonrası teknik servis hizmetleri sunmaktadır. Ariston Beyaz Eşya Ankastre Servisi

  17. Pingback: The best 120+ Jquery plugins from around the internet

  18. Pingback: 30 jQuery Plugins |

  19. Pingback: w3easystep » Blog Archive » 30 Fantastic New jQuery Plugins

  20. Pingback: 专访HTML5 Boilerplate项目核心成员——石川 | Web前端开发工程师-成长之路

Leave a Reply

Required fields are marked *.