
Essential JavaScript Design Patterns For Beginners - mfalcon
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#writingdesignpatterns
======
oinksoft
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
_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
"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
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
jQueryIsAwesome, you must not know what an ES5 shim is. It _is_ a cross-
browser solution.

<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.

~~~
prodigal_erik
> In many cases, this means that these shims cause many ES5 methods to
> silently fail.

Considering you don't even get the opportunity to detect the problem and turn
off the failing progressive enhancement in favor of the non-js behavior, this
doesn't seem like a realistic alternative to just writing pre-ES5 code that's
known to work.

~~~
oinksoft
That's just FUD though. The potentially "silently failing" methods are all
documented, and do not include any of the most commonly used ES5 features
(Function.prototype.bind, Array.prototype.filter, etc.).

------
raju
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...](http://www.amazon.com/JavaScript-Patterns-Stoyan-
Stefanov/dp/0596806752)]

~~~
cshenoy
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.

------
danso
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.

------
karterk
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-
loo...](http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-
javascript-mixins/)

`this` in JS generally incurs a lot of wrath, but this is one cool hack with
`this`.

------
goredho
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
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.

------
hebejebelus
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 :)

------
bzalasky
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
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.

------
tmanderson
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
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.

------
TheRevoltingX
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.

------
yread
Wow and I thought I knew Javascript

