JavaScript Design Patterns

In this meetup we will introduce different design patterns along with an example or two in how these patterns can be applied in real life.

Join or login to comment.

  • Nathaniel L.

    *Finally* done... :-)

    http://code.nathanielklee.com/presentations/design_patterns.html

    Let me know if you have any problems with this. I've only tested in the latest versions of Safari, Chrome and Firefox on the Mac... I'm going to guess that this doesn't work on Internet Explorer... sorry, Windows folks!

    1 · August 27, 2012

  • A former member
    A former member

    No problem! It will be most welcome when it's available.

    August 24, 2012

  • Nathaniel L.

    Hi all,

    I just wanted to give you a little update on where I am with getting the presentation material out to the group.

    I'm afraid I'm going to have to ask you to be just a little bit more patient. I greatly overestimated the time I would have this week what with two other meetups and preparation for my younger son's 3rd birthday party tomorrow so I am not yet finished.

    I think what I have so far is looking pretty snazzy (mainly because I swiped a design from a cool site I saw) but the content's not all in there yet. I think I should have something ready to post up by Sunday evening or Monday evening latest. Hopefully, it will be worth it for you.

    Thanks again for coming out to hear me speak this past Monday, and thank you for your continued patience.

    Cheers,

    Nathaniel

    August 24, 2012

  • Nathaniel L.

    There are a lot of design patterns in JavaScript. I don't think a single meetup is anywhere near long enough to be able to do each one that we cover justice especially if we're looking at real world examples, fielding questions, etc.

    July 8, 2012

    • Milan A.

      Good prediction ;)

      August 23, 2012

    • Nathaniel L.

      I moonlight as a psychic detective.

      August 24, 2012

  • Vietnhi P.

    Great meetup - I am googling and youtubing to follow up on design patterns as they apply to all computer languages and as they specifically apply to Java, Javascript, python and ruby - Lots to do :)

    August 21, 2012

  • Nathaniel L.

    Thank you to everyone for not jeering and heckling me too much during my first attempt at a presentation. Hopefully at least some of you got a little bit of useful information out of my discussion about design patterns.

    I wish I could have touched upon a little bit more about each of the patterns, but I will try to post some more useful examples of the patterns I covered if anyone is interested.

    I will get some version of the sample code I showed during the presentation in a more digestible format sometime this week as well (sorry for the fugly HTML pages but I was really more concerned about making the code big enough for everyone to read on the screen). Thanks again, everyone!

    Cheers,

    Nathaniel

    August 20, 2012

    • Sean C.

      Thanks again for the presentation. I was honestly hoping to hear more about the observer, pub/sub patterns since those seem to be the most obscure patterns compared to the first couple but I guess since everyone was at different levels, that wasn't possible! Nonetheless, it was a good presentation and I liked the JSON version of your profile and gender stereotyping. I thought it added a little humor and seemed to be more engaging in that it kept everyone listening. I'll be waiting on your next presentation!

      August 21, 2012

    • Nathaniel L.

      I was hoping to present a little bit more about the Observer and Publish/Subscribe patterns so we're both in the same boat, I guess. :-) Have you read my blog post about that pattern? It's generally the same information that I presented, but it's probably a bit easier to digest since the code will be in a more readable format right in front of you instead of on a giant wall in a horizontally scrolling window. I'm in the early stages of a blog post that introduces the Model-View-Controller pattern (the next one I would have covered had I had the time), and the Active Model variation of that pattern certainly makes use of the Observer pattern. That probably would have been a good example for you. Who knows? If Milan decides to have another round of Design Patterns or even an MVC/MVP/MVVM/MV* focused presentation maybe we can touch upon that a little more... Thanks for coming out!

      August 21, 2012

  • Nathaniel L.

    I decided to take it upon myself to figure out how to implement something a bit closer to the traditional Singleton Design Pattern in JavaScript after mulling over the one audience member's mention that he had come across a technique that utilized the arguments.callee property.

    I added a new blog post to http://www.examplejs.com discussing this.

    BTW -- That's my blog that literally nobody reads which touches upon some of the design patterns I covered in my presentation as well as some other JavaScript related subjects so this message serves a dual purpose.

    August 21, 2012

    • Nathaniel L.

      @Dmitry Thanks! I'm glad you enjoyed that. I had a few chuckles when writing it, but I just want to take a moment to *REITERATE* that I'm *NOT* advocating anything that all with that example!! :-) I actually use that in my blog post on the Observer pattern which sets it up a little better than I did in the presentation, haha.

      August 21, 2012

    • Dmitry L.

      Really enjoyed presentation and reading your blog (everyday I get something new to know:)) keep the hard work and sorry my hypercorrection. Thank you once again!

      August 21, 2012

  • Ian R.

    Great presentation, well documented and thought out. Examples were fitting and easy to understand. Hope I'm not being biased because I work with him ;)

    August 21, 2012

  • Nathaniel L.

    One thing I didn't mention last night was that a key benefit of learning design patterns beyond just having these tools under your belt is that they help you stop and really think about how you're designing your code. It's very easy to just tack onto a pile of spaghetti code sitting in the global namespace -- I've been guilty of that in the past -- but once you start incorporating these patterns into your process you really start to look at how your code has been organized and to think about ways you could improve the efficiency, reusability and maintainability so you're not shooting yourself in the foot for a future date.

    August 21, 2012

  • joel m.

    great presentation, Nathaniel

    August 21, 2012

    • Nathaniel L.

      @Joel Thanks a lot! I'm glad you enjoyed it. Hopefully, you got some useful information out of it. Were there any patterns in particular that you may have left the meetup interested in exploring further? I utilize all of the patterns I presented *A LOT* in my work. I think you'll also find that combining the patterns becomes common practice once you get into more complex applications. By that I mean that it shouldn't be unusual to have an MVC set up where each of the Ms, Vs and Cs are Module Singletons that communicate via Observer or Publish/Subscribe and expose an API in a Facade. Like Christopher Alexander said you customize and fine tune your actual production code based on your individual needs... these are really just a useful set of tools to have at your disposal.

      August 21, 2012

  • Milan A.

    Here is a singleton pattern you can use that I concocted. I showed it to some people and Ron asked to share it, so here it is:

    function Class(name) {
    var self = this;
    this.method = function () {
    console.log(this.name) };
    this.name = name;
    Class = function () {
    return self; };
    return this;
    } var objectA = new Class("Joe”),
    objectB = new Class(”Jane");
    console.log(objectA.name);
    console.log(objectB.name);

    This is a lightweight (and thus simplified) way of doing it; you would still need to handle the prototype, constructor, etc... but I will leave that up to you.

    I implement this pattern sometimes when I want to freeze my getters (to ensure data integrity), as such:

    function getName() {}
    function setName(name)
    { getName = function()
    { return name;
    };
    }

    As you can see, same concept, different application. Yes yes performance hit but hey, just another tool in your toolbox.

    August 21, 2012

    • Nathaniel L.

      @Milan Thanks for sharing that. I've used this pattern before, which if I recall correctly was coined "The Lazy Function Definition" pattern by the person who wrote the blog where I read about it, many times. It's useful for when you want to do some initialization the first time the function is executed but not on any subsequent invocation. I just never thought about returning an internal reference to this through closure to set up the Singleton behavior. That's AWESOME although again I'd probably just stick with object literals and IIFEs for unique objects in practice over this or the one I described in my blog post just because it seems to be more in the "spirit" of the language. ALTHOUGH... this one puts closures to good use so it definitely has a lot of JavaScript "flavor," too...

      August 21, 2012

  • Megan B.

    Brilliant. I'm really, really happy I made this one. Thanks, Nathaniel & Milan!

    August 21, 2012

  • Angela W.

    yes, do provide a link to your blog! can't make it tonight, but will check back in.

    August 20, 2012

  • Nathaniel L.

    I'll keep the group apprised... I should have something up and ready to view within the next few days. Cheers!

    August 20, 2012

  • Andre S.

    Will there be food?

    August 20, 2012

  • Nathaniel L.

    Instead of using PowerPoint or Keynote slides, I just put together a series of HTML pages that cover some bullet points as well as display JavaScript code. They're pretty ugly -- I feel bad since I also do some design work -- but I had to decide between having content or having pretty pages. :-) In any case, I'll get *something* up for people to see if they'd like. Plus, I have a personal blog that literally nobody reads that I can share with anyone who's interested. Cheers!

    August 20, 2012

  • H. R.

    can't make it. have a fever..not feeling well. Is there going be slides posted from the lecture later on??

    August 20, 2012

  • Felipe

    Do I need to bring my laptop?

    August 20, 2012

  • Evan S.

    I feel like I'm shooting myself in the foot, but seeing as I was going to go in order to network and pass out my card for anyone interested in new opportunities...it doesn't feel right. This seems like a coveted meetup and I don't want to deny a JavaScript poet access so I can shake some hands. Anyone second that?

    August 20, 2012

    • Kyle L.

      It doesn't look like anyone is wait listed

      August 20, 2012

  • Will F.

    @Milan: do you have a list of patterns you'll be going over?

    August 20, 2012

    • Milan A.

      Nathaniel will be our speaker today. He will have some nice things to present!

      August 20, 2012

  • Milan A.

    Note to recruiters: It is okay to come out and casually network, but recruiters are not welcome to come and pass out business cards. If you are interested in using this group to broadcast your services, your firm needs to become a sponsor (e.g. host events). Please get in touch with me for more details.

    August 20, 2012

  • Nathaniel L.

    I can't speak for Milan, but I intend to cover just some basic patterns:

    * Singleton
    * Module (Crockford version)
    * Revealing Module
    * Facade
    * Observer
    * Publish/Subscribe
    * and if I'm not a nervous wreck a glance at Model-View-Controller (maybe looking at the difference between Passive Model and Active Model)... *IF* I'm not shaking in my boots, unable to speak by that time :-)

    August 20, 2012

  • Milan A.

    @All if there are any other people who want to present patterns simply come with your material and we can add you to the roster on-the-fly. At this point we have Nathaniel and myself who will run the presentation - but others are welcome to join in.

    August 20, 2012

  • A former member
    A former member

    I've already asked about this before and gotten no answer, but I figured I'd try again. I'd like to present my educational card-game web-app called "Eleusis". It's a (nearly) single-page multi-player JavaScript end-to-end web-app, implemented with Node.js and JQuery. It's source is on GitHub (see link within app). It might not work well in IE yet, doesn't work well in Safari, but works well in FireFox and Chrome, so far as I've seen: http://bit.ly/KmItbG

    August 20, 2012

    • Milan A.

      Hi Larry,

      August 20, 2012

    • Milan A.

      @Larry, I think this would be a great presentation for our jQuery group at http://www.jqnyc.com­. Sorry for having missed your earlier message. I will message you personally so we can coordinate. (HardCoreJS meetup is intended to focus solely on core JavaScript implementations using no libraries/frameworks - thus jqNYC being more appropriate). Thanks for stepping up to the plate to present!

      August 20, 2012

  • Nathaniel L.

    Hi Larry! I'm sorry to hear that nobody has been responding to you. I personally didn't realize that you had posted anything to the group. It's all up to Milan, although I'd chime in that my presentation on some introductory design patterns is not going to take up anywhere near this whole session from my guesstimates. Plus, I may just be all nerves and speak way too fast. :-)

    August 20, 2012

  • H. R.

    great meet up

    August 17, 2012

  • Florian M.

    Funny,

    August 2, 2012

  • Nathaniel L.

    @Damion: I suppose that *does* make sense although Milan's call for volunteers to present implied to me that there would be specific design patterns covered.

    July 9, 2012

  • Damion M.

    @Nathaniel Lee: I think the goal is to use this meetup to provide a broad high-level introduction to the topic. Maybe in future meetups we can cover specific patterns in-depth based on feedback generated by this one.

    July 9, 2012

  • Milan A.

    Also, if anyone wants to be a presenter in this event as well, please let me know so we can incorporate your presentation :)

    June 8, 2012

Our Sponsors

People in this
Meetup are also in:

Imagine having a community behind you

Get started Learn more
Rafaël

We just grab a coffee and speak French. Some people have been coming every week for months... it creates a kind of warmth to the group.

Rafaël, started French Conversation Group

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy