9 ms·

Essential JavaScript Design Patterns For Beginners

336 points by mfalcon 15y ago

bzalasky 15y ago
The revealing module pattern is one of my favorites for writing jQuery plugins. This is a great reference for front-end developers once they've gotten good enough to be dangerous with JavaScript. I stumbled across this a while ago after writing my first non-trivial mobile web app from scratch with JavaScript, and it made everything click.
- kylebrown 15y ago
  I got the same 'click' recently, from reading about js design patterns (the oreilly book in particular), while working on a non-trivial html5 app. Ive been conscious of my tendency to write spaghetti code for a while, but didnt have any concrete guidelines on how to level up (just general advice like 'read good code' and 'fork github projects'). I had the sudden realization that using and recognizing design patterns was exactly what I was missing to get over the beginner-intermediate hump in the learning curve. I'd heard of design patterns before, but they'd come across as a rather lofty concept. After a second and third look, I realized its immediately practical boilerplate stuff that one can copy/paste (and even more importantly, recognize in 3rd-party plugins and frameworks). Design patterns should follow after reading a 'cookbook'. Its just a name for techniques beyond your basic for/while loops (which could be thought of as the simplest of design patterns). Pub/Sub can be viewed as a simple form of the observer pattern, and MVC is a more elaborate form (notice that in the article's TOC, MVC comes right after Observer). I've lost a lot of time banging my head on MVC too soon. For some reason, the introductory articles on MVC I was finding made scant mention of design patterns. Great to see more material discussing the concepts together lately.
oinksoft 15y ago
This is a good, if long-winded document. At over 100 pages, it will take a dedicated reader to sift the gold. As other patterns covered display aspects of DRY-ness with JavaScript, let's take a look at how to write DRY code using jQuery. Note that where jQuery is used, you can easily substitute selections using vanilla JavaScript because jQuery is just JavaScript at an abstracted level. That is jibberish, and it shows in the code examples: Using an ES5 shim is best-practice these days, so that you can use Array.prototype.forEach and not jQuery.each (with its weird argument order), amongst other things that are commonplace in modern JavaScript code. Yet the auther defers to jQuery throughout. As jQuery is accepted as one of the best options for DOM-manipulation and selection, we'll be using it for our DOM-related examples. More likely that the document is filled with jQuery because the author is heavily involved with the jQuery project, no?
- tomku 15y ago
  That is jibberish, and it shows in the code examples: Using an ES5 shim is best-practice these days, so that you can use Array.prototype.forEach and not jQuery.each (with its weird argument order), amongst other things that are commonplace in modern JavaScript code. Yet the auther defers to jQuery throughout. Could you expand on this a little bit, particularly the "other things that are commonplace in modern JavaScript code"? As someone who's just getting into heavy client-side JS, it still feels like the whole world is very jQuery-centric. In particular, material targeted at beginners (such as this article) tends to lean heavily on jQuery for anything more complex than really basic core language stuff. I'd be very interested in alternatives, if only to broaden my horizons.
  - oinksoft 15y ago
    "Modern JavaScript code", like I was saying, uses an ES5 shim and functions like Array's forEach, map, some, every, Functions' bind, etc. I just didn't want it to sound like I thought the only thing ES5 provides is forEach. Regarding your other question, jQuery/JavaScript is a false dichotomy. jQuery's just another DOM library with a few utility functions.
    - jQueryIsAwesome 15y ago
      He is trying to explain patters and how to use it in real world solutions; that means cross-browsers solutions that do not rely on ES5.
      - oinksoft 15y ago
        jQueryIsAwesome, you must not know what an ES5 shim is. It is a cross-browser solution. https://github.com/kriskowal/es5-shim https://github.com/kriskowal/es5-shim Especially when you note that JavaScript is not just run in browsers these days, and that most server-side deployments do implement ES5 features, it makes very little sense for modern tutorials to avoid ES5 features unless they are trying to demonstrate drop-in snippets with no library dependencies. It seems clear that the author is not shy about including other libraries with his code.
yread 15y ago
Wow and I thought I knew Javascript
raju 15y ago
One book that I found to be really good was 'JavaScript Patterns' by Stoyan Stefanov. Great book, though I am not sure how much this article overlaps with the book. [http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752 http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp...]
- cshenoy 15y ago
  Definitely recommend Stefanov's JavaScript Patterns. I'd suggest reading both concurrently since JavaScript Patterns covers best practices with JS as a whole while Essential JS is focused almost exclusively on design patterns.
goredho 15y ago
Dunno, seems to be a regurgitation of GoF patterns along with some JS-specific ones. I'd rather see a link to the GoF patterns, with a concentration on the JS-specific ones. Shouldn't articles be DRY as well?
- genezeta 15y ago
  In fact, I would rather see someone forgetting about GoF, focusing on the problems that do exist in this different environment (Javascript) and coming up with solutions to those, thus formulating patterns that are really relevant in the context of Javascript. Because, you know, the pattern is not the solution, but the sum of problem + context + solution.
deleted 15y ago
[deleted]
karterk 15y ago
There is a better way to do the mixins in JS. See this awesome post by Angus Croll: http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/ http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-loo... `this` in JS generally incurs a lot of wrath, but this is one cool hack with `this`.
TheRevoltingX 15y ago
Freaking amazing, I've been utilizing MVC heavily to develop HTML5 games. Mainly borrowing ideas from Android and iPhone development with their layout engines and staying out of the way as much as possible.
danso 15y ago
On just length alone, if this is the beginner's version, would love to see the intermediate/advanced versions ;) I like the references to Backbone.js and other modern frameworks...the explanation of Backbone's router vs Spine's controller was particularly helpful, mostly because I know Backbone's router is not a controller but hadn't taken the time to see how Spine does it. I thought the introduction...everything before the actual examples/cases, was a little too long-winded for me. It was interesting to read as an experienced programmer, but I can't imagine a beginner trudging through all of that without seeing a simplified use case to break up the long narrative text. If the audience for this book is beginners, why go into such great detail about the philosophy of patterns (including a discussion of antipatterns) when most beginners are at the level where they probably don't know much OOP or even things like closures? Otherwise, another fantastic addition to the open-source bookshelf.
hebejebelus 15y ago
I think you can shave off the "for beginners" from the title. It's really worth the read no matter your skill level. There are so many interesting and different ways to use JavaScript that I think almost everyone can gain something from this. Really enjoying it so far :)
tmanderson 15y ago
To be specific, jQuery is a utility library with a large set of DOM utilities. Sizzle is actually the DOM workhorse. As for the article: it's a valuable resource. Especially for those that believe jQuery is JavaScript. It's a goodie.
nedludd 15y ago
Wow, this will be hard for a beginner to process. Unless that beginner has a week to read it, and has a good background in programming languages and design patterns. And then he probably won't need to read this.

336 points by mfalcon 15y ago

The revealing module pattern is one of my favorites for writing jQuery plugins. This is a great reference for front-end developers once they've gotten good enough to be dangerous with JavaScript. I stumbled across this a while ago after writing my first non-trivial mobile web app from scratch with JavaScript, and it made everything click.

kylebrown 15y ago
I got the same 'click' recently, from reading about js design patterns (the oreilly book in particular), while working on a non-trivial html5 app. Ive been conscious of my tendency to write spaghetti code for a while, but didnt have any concrete guidelines on how to level up (just general advice like 'read good code' and 'fork github projects'). I had the sudden realization that using and recognizing design patterns was exactly what I was missing to get over the beginner-intermediate hump in the learning curve. I'd heard of design patterns before, but they'd come across as a rather lofty concept. After a second and third look, I realized its immediately practical boilerplate stuff that one can copy/paste (and even more importantly, recognize in 3rd-party plugins and frameworks). Design patterns should follow after reading a 'cookbook'. Its just a name for techniques beyond your basic for/while loops (which could be thought of as the simplest of design patterns). Pub/Sub can be viewed as a simple form of the observer pattern, and MVC is a more elaborate form (notice that in the article's TOC, MVC comes right after Observer). I've lost a lot of time banging my head on MVC too soon. For some reason, the introductory articles on MVC I was finding made scant mention of design patterns. Great to see more material discussing the concepts together lately.

oinksoft 15y ago

This is a good, if long-winded document. At over 100 pages, it will take a dedicated reader to sift the gold. As other patterns covered display aspects of DRY-ness with JavaScript, let's take a look at how to write DRY code using jQuery. Note that where jQuery is used, you can easily substitute selections using vanilla JavaScript because jQuery is just JavaScript at an abstracted level. That is jibberish, and it shows in the code examples: Using an ES5 shim is best-practice these days, so that you can use Array.prototype.forEach and not jQuery.each (with its weird argument order), amongst other things that are commonplace in modern JavaScript code. Yet the auther defers to jQuery throughout. As jQuery is accepted as one of the best options for DOM-manipulation and selection, we'll be using it for our DOM-related examples. More likely that the document is filled with jQuery because the author is heavily involved with the jQuery project, no?

tomku 15y ago
That is jibberish, and it shows in the code examples: Using an ES5 shim is best-practice these days, so that you can use Array.prototype.forEach and not jQuery.each (with its weird argument order), amongst other things that are commonplace in modern JavaScript code. Yet the auther defers to jQuery throughout. Could you expand on this a little bit, particularly the "other things that are commonplace in modern JavaScript code"? As someone who's just getting into heavy client-side JS, it still feels like the whole world is very jQuery-centric. In particular, material targeted at beginners (such as this article) tends to lean heavily on jQuery for anything more complex than really basic core language stuff. I'd be very interested in alternatives, if only to broaden my horizons.
- oinksoft 15y ago
  "Modern JavaScript code", like I was saying, uses an ES5 shim and functions like Array's forEach, map, some, every, Functions' bind, etc. I just didn't want it to sound like I thought the only thing ES5 provides is forEach. Regarding your other question, jQuery/JavaScript is a false dichotomy. jQuery's just another DOM library with a few utility functions.
  - jQueryIsAwesome 15y ago
    He is trying to explain patters and how to use it in real world solutions; that means cross-browsers solutions that do not rely on ES5.
    - oinksoft 15y ago
      jQueryIsAwesome, you must not know what an ES5 shim is. It is a cross-browser solution. https://github.com/kriskowal/es5-shim https://github.com/kriskowal/es5-shim Especially when you note that JavaScript is not just run in browsers these days, and that most server-side deployments do implement ES5 features, it makes very little sense for modern tutorials to avoid ES5 features unless they are trying to demonstrate drop-in snippets with no library dependencies. It seems clear that the author is not shy about including other libraries with his code.

yread 15y ago

Wow and I thought I knew Javascript

raju 15y ago

One book that I found to be really good was 'JavaScript Patterns' by Stoyan Stefanov. Great book, though I am not sure how much this article overlaps with the book. [http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752 http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp...]

cshenoy 15y ago
Definitely recommend Stefanov's JavaScript Patterns. I'd suggest reading both concurrently since JavaScript Patterns covers best practices with JS as a whole while Essential JS is focused almost exclusively on design patterns.

goredho 15y ago

Dunno, seems to be a regurgitation of GoF patterns along with some JS-specific ones. I'd rather see a link to the GoF patterns, with a concentration on the JS-specific ones. Shouldn't articles be DRY as well?

genezeta 15y ago
In fact, I would rather see someone forgetting about GoF, focusing on the problems that do exist in this different environment (Javascript) and coming up with solutions to those, thus formulating patterns that are really relevant in the context of Javascript. Because, you know, the pattern is not the solution, but the sum of problem + context + solution.

deleted 15y ago

[deleted]

karterk 15y ago

There is a better way to do the mixins in JS. See this awesome post by Angus Croll: http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/ http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-loo... `this` in JS generally incurs a lot of wrath, but this is one cool hack with `this`.

TheRevoltingX 15y ago

Freaking amazing, I've been utilizing MVC heavily to develop HTML5 games. Mainly borrowing ideas from Android and iPhone development with their layout engines and staying out of the way as much as possible.

danso 15y ago

On just length alone, if this is the beginner's version, would love to see the intermediate/advanced versions ;) I like the references to Backbone.js and other modern frameworks...the explanation of Backbone's router vs Spine's controller was particularly helpful, mostly because I know Backbone's router is not a controller but hadn't taken the time to see how Spine does it. I thought the introduction...everything before the actual examples/cases, was a little too long-winded for me. It was interesting to read as an experienced programmer, but I can't imagine a beginner trudging through all of that without seeing a simplified use case to break up the long narrative text. If the audience for this book is beginners, why go into such great detail about the philosophy of patterns (including a discussion of antipatterns) when most beginners are at the level where they probably don't know much OOP or even things like closures? Otherwise, another fantastic addition to the open-source bookshelf.

hebejebelus 15y ago

I think you can shave off the "for beginners" from the title. It's really worth the read no matter your skill level. There are so many interesting and different ways to use JavaScript that I think almost everyone can gain something from this. Really enjoying it so far :)

tmanderson 15y ago

To be specific, jQuery is a utility library with a large set of DOM utilities. Sizzle is actually the DOM workhorse. As for the article: it's a valuable resource. Especially for those that believe jQuery is JavaScript. It's a goodie.

nedludd 15y ago

Wow, this will be hard for a beginner to process. Unless that beginner has a week to read it, and has a good background in programming languages and design patterns. And then he probably won't need to read this.