Loose Coupling with the pubsub Plugin
videos

Loose Coupling with the pubsub Plugin

on Oct 28th 2010 with 20 comments
Tutorial Details
  • Topic: JavaScript Loose Coupling
  • Format: Screencast
  • Length: 8 Minutes

I talked about pubsub as part of my presentation at the 2010 jQuery Conference in Boston earlier this month, and it seemed to be a topic that held a lot of interest for people. I didn’t have a lot of time to talk about it in my presentation, so I’ve put together a short screencast that goes into a bit more depth. Hope you like it!


Click on the HD button for a clearer video.
View the Source Code

You can refer to Rebecca’s website for more details.

About Rebecca Murphey

YayQuery“Rebecca has been using technology to deliver information, in one form or another, for more than a decade, with a career that started in print and transitioned to the web. Through it all, she has always been on the lookout for the smartest way to get a job done; these days that means harnessing HTML, CSS, and JavaScript to create web applications. she has worked with a wide range of web-related tools—Unix systems, PHP, MySQL, Apache, Django—but her geeky passion is building browser-centric, JavaScript-rich experiences that adhere to best practices and emphasize modular, reusable, maintainable code.”

She’s also the co-host of the popular jQuery podcast, YayQuery.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Rebecca has been using technology to deliver information, in one form or another, for more than a decade, with a career that started in print and transitioned to the web. Through it all, she has always been on the lookout for the smartest way to get a job done; these days that means harnessing HTML, CSS, and JavaScript to create web applications. she has worked with a wide range of web-related tools—Unix systems, PHP, MySQL, Apache, Django—but her geeky passion is building browser-centric, JavaScript-rich experiences that adhere to best practices and emphasize modular, reusable, maintainable code.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • EddyF

    Thanks for share

  • http://www.pixeldonor.com jeremy

    Great video, this is a very useful topic especially for people newer to javascript who are trying to create more meaningful application architectures.

    And I’d also like to point out an article published on Keetology that covers the same topic only for Mootools for anyone interested in the pubsub approach as implemented in another framework: http://bit.ly/cmctov

  • http://andrewburgess.ca Andrew Burgess

    Love that! It’s basically identical to the functionality Nicolas Zakas talks about in his Scalable JavaScript Applications talk. That’ll definitely be plugin I’ll get some good use from! Thanks, Rebecca!

  • http://poetro.hu/ Peter Galiba

    Using jQuery’s own event handling would work in this case too, although it would produce a larger overhead, but it doesn’t need to be attached to the DOM. Something like the following will also work:

    jQuery(function ($) {
    var myApplication = {};
    $myApplication = $(myApplication);

    $myApplication.bind(‘search’, function () {
    console.log(this, ‘has been searched’);
    });
    $myApplication.trigger(‘search’);
    });

    • EddyF

      offcourse! I knew there was a trigger function in jquery that did exactly same thing, Althought the pubsub is a cool plugin I believe runtime this(jquery way) would be a better approach as you dont bleed data reading new plugin-files. am i right? am i right?

  • http://www.ratdiary.com SpragueD

    Exactly what I was looking for after hearing your talk in Boston. Super!

  • http://www.ClearViewDesigners.com Jack Frost

    Looks like more of a client-side OOP approach by adding events. Good demo tho!

  • http://www.how-to-asp.net Ryan

    Great video, thanks for sharing!

  • http://brettic.us Bretticus

    Very elegant in its simplicity! Good work Rebecca. This is an eye-opener. What a great way to cascade through processes with complete decoupled relations. It’s the perfect model for Javascript where coupled equates to extra kilobytes!

  • http://tutorial-city.net/ Eduardo Matos

    It looks like the Observer Design Pattern applied to javascript, doesn’t it?

  • http://emdin.info/ Pavel Filippov

    Thanks for sharing!

    Looks like very promising technique. But here is the question — is loose coupling always a good thing? Is it make code easier to understand and support?

    For example, what should one do if he is looking for all things that happen after form submit? Should he look for all ‘/search/term’ occurrences in the codebase? In ‘old’ technique his code will look somewhat like

    form.submit( myFacade )
    … myFacade() {
    oneThing()
    anotherThing()
    }

    and other developer can easily understand, what exactly happens on form submit and in which order. Pub/sub model can obscure things, since there is no single entry point and everyone can subscribe to everything and one cannot really control it.

    What am I saying is this technique is great, but one should use it with caution in order to keep his code understandable and maintainable.

    • Barry

      “What am I saying is this technique is great, but one should use it with caution in order to keep his code understandable and maintainable.”

      It makes it more understandable when you are giving your module a logical name, and put a complete and describing comment above the module (definition).

      Like said before, you can use this when you think this is valuable for the project you are working on, there’s is not really a definition on when to use this…

      I prefer the way Andrew did the modulair tutorial.

      If anybody have more resources on modulair javascript, pls post them all here if you want to :)

  • http://www.stuff4you.biz Web Developer (Freelance)

    It seems like not enough women do podcasts like these. Keep it up.

  • http://gyratorytech.com GyratoryTech

    Just bookmarked this site. Useful information.

  • http://www.idesignit.co.il/ Elron

    What program you use to edit your files?

    • http://www.jeffrey-way.com Jeffrey Way

      She’s using Vim (I think MacVim).

  • Eli

    @Eduardo Yes, publisher subscriber another name for the Observer pattern. I wish they would use the phrase Observer to denote that this plugin actually follows the pattern convention already established by the gang of four.

  • http://freshcreative.uk.com Fresh

    Pretty cool stuff!

    Just tried recreating the same thing locally using your pubsub-demo.js source code from git and ‘http://query.yahooapis.com/v1/public/yql?format=json&callback=’ needs to be ‘http://query.yahooapis.com/v1/public/yql?format=json&callback=?’ (notice the ?) for it to work in Opera browser.

  • http://blog.monnet-usa.com Philippe Monnet

    Great video Rebecca! I was not familiar with this plugin so thanks for sharing.
    I personally use KnockoutJS a lot, which has a cool implementation of observables. See http://knockoutjs.com/documentation/observables.html.

    • http://blog.monnet-usa.com/ Philippe Monnet

      Btw this inpired me to create a tutorial series on “Creating Rich Interactive Web Apps With KnockOut.js”
      http://blog.monnet-usa.com/?p=354