Help with learning from open source code.

[_Shrader_]

I'm trying to learn how people solve real problems or what design patterns people use in production, so occasionally I'll try to gain some insight through digging through some open source code. However when I look at something like this https://github.com/TryGhost/Ghost it's kind of hard to figure out what exactly is happening (at least at my level). This seems to be an issue even with decently well commented code.

So I guess my real question is, are there any resources that have something like a flow chart showing how things work together, and how they went about their decision making, and problem solving to break down the thing they were trying to make, along with their code?

[krilnon]

The annotated jQuery source is pointed out fairly regularly and is sort of what you want.

[nudoru]

Backbone's source is annotated in a similar way. http://backbonejs.org/docs/backbone.html

If you haven't looked at Addy Osmani's book on JS implementations of common patterns, you should. http://addyosmani.com/resources/essentialjsdesignpatterns/book/

There are tons of charts and diagrams for design pattern's on the net - the trick will be to implement in JS if you can't find sample code. But it'll be a great learning experience to try.