permalink

50

Tools For jQuery Application Architecture – The Printable Chart

Read Later submit to reddit

 

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.

50 Comments

    • Addy March 9, 2011 at 12:22 am Reply

      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?

      • David March 11, 2011 at 4:14 pm Reply

        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 (amplifyjs.com) 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.

  6. florin March 7, 2011 at 10:02 am Reply

    angularjs.org is missing.

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

    Check it out.

    • Addy March 9, 2011 at 12:24 am Reply

      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.

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

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

  13. localtimezone March 12, 2011 at 3:22 am Reply

    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.

  14. gtraxx March 15, 2011 at 5:37 pm Reply

    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 ?

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

  16. Pingback: 316i « Mindless Chatter

  17. exchangerates March 17, 2011 at 2:16 am Reply

    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?

  19. Pingback: Quelques plugs jquery « SpagMedia

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

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

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

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

  25. @spinron March 25, 2011 at 11:47 pm Reply

    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.

    • Addy March 26, 2011 at 12:10 am Reply

      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.

    • Addy March 31, 2011 at 10:26 am Reply

      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.

  31. Aaron June 3, 2011 at 12:51 pm Reply

    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. foo.bar.something.id
         * @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
            
        };

  32. Ariston servisi June 8, 2011 at 8:51 am Reply

    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

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

  38. Pingback: 30 jQuery Plugins | prosoxi.com

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

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

Leave a Reply

Required fields are marked *.

*