I am trying to understand the internals of how jquery framework is written and finding it hard to understand the code.
Does anyone have any suggestions regarding a good way to get started.
Thanks for all the useful input. Editing the topic since I had limited space for adding individual comments.
I have written a lot of basic javascript code.
I know basic DOM, have used event handlers, know CSS basics. I have read about many of the topics you have mentioned and I am familiar with it although not an expert and have not coded some of the advanced topics like closures. Here are the books I have used so far Head first javascript - good in the beginning as a starter.
Books my friends have recommended and I use regularly are Javascript - The Definitive Guide, Javascript - The good parts (I read this a while ago and it was hard for me at the time).
My friend just recommended Secrets of Javascript Ninja - John Resig. Seems like a good one.
I ordered the Javascript Design patterns book you recommend last week
I have read the https://developer.mozilla.org/en/JavaScript you pointed me to. I will checkout some of the other resources you pointed me to.
Let me think a little more regarding if I want to do a little more reading before I post specific questions I have on jquery.
Thanks
Susan
To comprehend the actual source would require some degree of Javascript knowledge - If you don't already know what's going on then you basically need to learn more Javascript.
Key things to learn:
Prototypal inheritance ( the
inheritance used in ECMAScript, the
core language on which Javascript is
based upon )
Lambdas ( inline functions )
Closures ( outer variables from outer scope accessible from inner functions )
Regular expressions ( used for matching the selector strings fed to jQuery )
DOM ( The DOM API which is used to interact with markup languages )
When learning, use Firebug so you can evaluate your expressions interactively and immediately see what's going on
An excellent free resource for learning that I would recommend:
http://eloquentjavascript.net/contents.html
If you're a beginner to DOM Scripting/Javascript:
http://www.amazon.com/DOM-Scripting-Design-JavaScript-Document/dp/1590595335/ref=sr_1_19?ie=UTF8&s=books&qid=1252905196&sr=1-19
If you're intermediate level:
http://www.amazon.com/gp/product/0596517742/ref=s9_simz_gw_s0_p14_i3?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=0KCJ77GKHPREBFD3WAKG&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846
If you're past intermediate level and want to be an expert:
http://www.amazon.com/Professional-JavaScript-Developers-Wrox-Guides/dp/0764579088
http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273/ref=sr_1_10?ie=UTF8&s=books&qid=1252905139&sr=1-10
http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X/ref=sr_1_16?ie=UTF8&s=books&qid=1252905196&sr=1-16
Other technical references:
http://www.w3.org/DOM/
http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
https://developer.mozilla.org/en/JavaScript
If you have specific questions about a certain code snippet just ask here. Another resource that I can recommend for more advanced questions would be the jQuery mailing list or irc://irc.freenode.net/jquery where jresig hangs out himself and comes by and answers questions. There are other guru ops who reside there like ajpiano/paulirish/nlogax.
If you're looking for insight about how jQuery is written, the uncompressed source code is pretty readable. There are a few books mentioned in SO74884 that are worth a read. Resig's book doesn't really cover jQuery at all, but is good about teaching object oriented javascript.
If you are having a problem understanding something in jQuery's code (why it was done/how it works), you should post a question with some code bits to Stack Overflow, asking for some help understanding it.
Why not learn from the man himself, John Resig, here : http://ejohn.org/apps/learn/
Based on that, I'd definitely get the book your friend suggested.
You can also find some more nice resources on his website, courtesy of googling site:ejohn.org/apps
I was also like you interested in how jQuery works internally, I've spent some time learning from jQuery code source and trying to understand the core architecture, then I've created a github repo how-jQuery-works to share my knowledge that I've acquired with other developers, hope you learn something from this repository.
Related
Is there any good learning book on JavaScript Data Structures, something like this.
http://www.cs.williams.edu/javastructures/Book_files/JavaStructures.pdf
I am unable to find anyting on internet.
You didn't mention your level of JavaScript knowledge, so I assume you're fresh. ) In that case I suggest reading Eloquent JavaScript online book; this chapter in particular will answer your question, but I suppose reading the whole book would be a great experience as well.
But not reading only: in fact, I regard this book highly because it provides tremendous environment for experiments with code given. And practice, in my opinion, is the only real key to understanding anything related to CS. )
Here are some links
One
Two
Three
And one answer here on SO explaining about data structures in js
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm struggling to find a way of writing good JavaScript code that would be efficient, widely accepted by other developers and not very ugly.
Until recently, what I used were just literal objects and bits of jQuery but after reading Douglas Crockford's "JavaScript: The Good Parts" I now fully realize that there's more to JavaScript than AJAX, DOM modifications and simple animation.
The problem is that JavaScript seems not much standarized. The amount of OOP/inheritance patterns available overwhelms me. I'm not used to every framework/library providing its own impementation of inheritance. I also don't want to make a wrong decision regarding such things because this would mean rewriting all the code in case of some problems.
So what I'm looking for are existing open source web applications that use JavaScript heavily, if possible on the client side, to see what patterns are used in real projects. I would like to see the code of web applications, not frameworks or libraries. I don't mind though if those web apps are based on some framework (and if it's Dojo or RequireJS it'll be even better because I'm using them ;)
What I always recommend to anyone who is interested in this kind of thing is: STICK TO WHAT YOUR TEAM DOES. If they use camelCase for methods, you use it. If they use snake_case for variables, you do it. If your team prefers spaces over tabs; use them.
Never go into a stablished team with standardized style changing things because it looks better unless it's causing heavy problems.
If you're not working on a team and you're interested on using a coding style; then use the style of the libraries you use the most.
If you use jQuery stick to jQuery Coding Style Guidelines
If you use Closure Library use JavaScript Google Coding Style
If you use MooTools Library use MooTools Coding Style Guideline
Organization wise, Closure is the best.. but to me somehow it feels like I'm reading JAVA instead of javascript. Go figure.
Yep. There are a few JavaScript gurus that have written alot about how to write JavaScript, about prototype based OOP with JavaScript, even about how indenting and naming variables should be done.
However, if you are looking for a large implementation of JavaScript to study as an example, I would look for HTML5 game implementations. It's practically guaranteed that you will find a large enough, well written example that is not minified.
If you are interested in JavaScript standards I would check out commonJS. They have a lot of good ideas about how JavaScript should be done.
BravoJS is a good module implementation for the browser.
As for examples jQuery's source code was mentioned in the comments. jQuery does a good job but it is I would also check out Narwhal JS for examples of how things should be done.
Here is a good free design patterns book that I found helpful Essential JavaScript And jQuery Design Patterns.
You wont find one solution to your problem and that is how JavaScript is designed. I would recommended experimenting. I find that Douglas Crockford has a lot of great ideas but that does not mean you have to follow him to the letter.
A good project is : http://impactjs.com/
A good reading is : http://addyosmani.com/blog/essentialjsdesignpatterns/
Great question. I couldn't find one example of a well written object oriented open source application. Tiny MCE was so-so, but I wouldn't consider it well written: http://www.tinymce.com/
However, I have written clean, well factored object oriented javascript at work. It's proprietary so I can't share it, but I can explain what worked for me to learn how to do that:
1) Read the mozilla javascript object oriented programming tutorial. Their explanation of javascript inheritance is exactly what google closure uses. Personally I think what Crockford calls pseudo classical is easiest to read and maintain since 4 of the 5 other programming languages I know use classes (java, c#, python, and php. perl's the oddball here with no classes either).
https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
2) Read the book 'Object Oriented Javascript' by Stoyan Stefanov.
3) Take an existing procedural javascript code base and refactor it to objects. Use the tips in 'Clean Code' by Robert C. Martin as they apply to any programming language.
4) Structure your code so it has many different files similar to how you'd use classes in a language with classes.
5) Implement dependency injection without an IOC container by creating all your objects at a top level and feeding them down into the objects that depend on them.
There's a lot more, but hopefully this is a helpful start.
Here is what I feel is the correct way to implement inheritance in javascript. this is from the google closure library:
goog.inherits = function(childCtor, parentCtor) {
/** #constructor */
function tempCtor() {};
tempCtor.prototype = parentCtor.prototype;
childCtor.superClass_ = parentCtor.prototype;
childCtor.prototype = new tempCtor();
childCtor.prototype.constructor = childCtor;
};
Coincidentally, today on SlashDot there is a review of the 6th edition of Javascript: The Definitive Guide, which the reviewer there says "retains its crown as the ultimate reference resource for JavaScript programmers." It's 1,100 pages.
Yes, this isn't the sample app you were seeking, but the book does have a lot of examples and advice about best practices.
There are several ways to learn how to write good JS code.
You can read books. The best one about organization of JS code and about common patterns including inheritance is JavaScript Patterns by Stoyan Stefanov.
Another good way to learn is just look through the excellent code of other developers and using it. The best library I've seen from the point of code organization and using of patterns is Google Closure Library. It is used internally by Google in the RIA like Gmail Google Docs.
A kind person in irc suggested this eBook and I found it verry helpful.
Learning JavaScript Design Patterns
A book by Addy Osmani
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
Which is better, learn the basics of JavaScript, and then jQuery
Or master JavaScript and then learn jQuery
Now I know the basics well But I did not write many exercises of javascript
thanks
sorry about My bad English
It depends on what you want to do with javascript.
If you want to go deeper into the javascript, want to experiment with it, then become a master in javascript. In that case I will suggest you to read this excellent book by Douglas Crockford. Becoming a master of something never hurts. But if you want to become a developer and want to only build websites with javascript, then learn the core basics and move on to learning jquery.
Again, whatever you do, you should have a clear understanding about the basics of javascript. You should, at least, read this excellent article and understand how objects in javascripts work, what are prototypes, what datatypes are there. There are also many other resources on javascript on MDN and Opera Developers Network. Google also has some excellent resources on javascript.
Always better to learn the language before learning a framework, as JQuery isn't the only JS framework.
If you know the language, you'll be able to understand whatever framework you want to use.
The references I have used in the past, ending up with the good understanding of them both are as follows:
Javascript: http://eloquentjavascript.net/
JQuery: http://jqfundamentals.com/ by Rebecca Murphey.
Hope these help you too.
I would strongly recommend you start with reading this book on Javascript > Javascript: The Good Parts
It's the best book out there to understand the fundamentals of Javascript and how it actually differs from the rest of the language. What are the good parts and what are the bad parts.
Once you are done with that, then you'll be better off learning jQuery and start doing examples.
I recently got involved with the jQuery Project and the PromoteJS movement has inspired me to spend some time writing a free, comprehensive book on JavaScript fundamentals for beginners (I feel you need to understand what JS is about to make the most of libraries).
What I would like to target are topics that both total beginners and those that know jQuery, but not the underlying JavaScript would find both educational and useful to know.
What topics would you suggest this cover?.
Off the top of my head, Variables, Expressions, Statements, Functions, Objects, Closures, Scope wouldn't be bad additions, but I'm wondering if going beyond this to cover inheritance, development patterns/anti-patterns etc would be overkill.
Again, your thoughts and comments on this would really assist in these early planning phases. Thanks!
There's already a great, free Javascript book actually.. http://eloquentjavascript.net/contents.html
EDIT: There's also already a free great jQuery fundamentals book:
http://jqfundamentals.com/book/book.html
What are the best resources on Design Patterns catering specifically to web development with JavaScript and JQuery?
I'm particularly interested in information on programming my own libraries, reusable components, widgets, etc. and the merits of various techniques (for instance in the case of components/widgets comparing those employed in jQuery UI vs. rolling your own).
I'm also curious about the intricacies of JavaScript as a programming language, and the finer points of object-based programming with JavaScript.
Big fan of Douglas Crockford and the Yahoo video series. Looking for additional examples.
One very instructional thing you might do is read over the jQuery source code. It's a treasure-trove of interesting and efficient coding techniques. You might then broaden your horizons by reading over the source for Prototype or some other library.
The nice thing about reading good code and trying to understand it is that it's really real; it is the good code, so you bypass a layer of rhetoric.
Similar to Pointy's answer, you should take a look at these two videos, which help you understand the source code of JQuery (it might be difficult for some to dive into the code from start to finish):
10 things I learned from the jquery source
11 more things I learned from the jquery source
Paul Irish, a member of the JQuery team, goes through some very interesting design patterns in the JQuery source in a humorous way. I think he picks some really interesting spots, which really gives you a lot of usable knowledge you can use elsewhere.
It's probably the resource that has given me the most knowledge about a particular field in the shortest time. It's just really valuable.
This guy has some really good stuff as far as the "intricacies of JavaScript as a programming language" part of your question is concerned:
http://devlicio.us/blogs/sergio_pereira/default.aspx
e.g.
http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx
The comp.lang.javascript group on Usenet is an excellent resource: pretty much everything related to browser scripting has been discussed there and is available in the archive, and some of the regulars, while not always the most polite, are incredibly knowledgeable.