0

I have been reading several jQuery tutorials on the web. They all seem very simple at the end of the day, explaining how to use selectors, events, etc. However, when I enter big websites and view their JS source, I see that there is a lot more complexity into building websites with jQuery (or any other JS framework) - that is how to correctly build your website in an OO way.

For example, many websites use objects to store the currently logged in user, some settings, etc..

Is there any online tutorial out there to explain how to properly design and implement a good client side system?

Meir

Meir
  • 1,691
  • 2
  • 14
  • 15
  • since you mention there's good one that you like, and you did say client side, so then why not just save their website and study their javascript? – melaos May 27 '11 at 08:53
  • @melaos because it's minified js. That's horrible to read. Besides don't we just hack everything together with jQuery these days. I'm sure we don't need high level structure, what could possibly go wrong. – Raynos May 27 '11 at 08:59
  • true, everything is minified, I can't understand it :/ – Meir May 27 '11 at 09:06

2 Answers2

2

I'm assuming you are struggling with the basic concepts of objects and the like because you don't know Javascript.

A very big misconception is that jQuery is in itself it's "own language" -- I've seen questions on this site with people asking "should I write this in Javascript or jQuery?" -- this is silly. jQuery IS Javascript, and if you don't know Javascript well, your struggle to understand many aspects of jQuery.

  • When to use .attr or .prop
  • Objects, arrays, array-like objects
  • How to form valid JSON
  • Javascript string manipulation functions
  • When code is executed, i.e. DOM ready, window loaded
  • How to deal with asynchronous events
  • How to select elements from the document, CSS selectors or native methods document.getElementById, .getElementsByTagName etc.
  • Closures
  • Context of a function (this is marked as "advanced Javascript" but I think it should be marked toddler Javascript because it's vital for being clever in jQuery. Know your context! What is this? How to change the context of a function using .apply .call
  • .... many more

All of this isn't specific to jQuery, and you should gain a basic understanding of all of these.

I suggest before you learn jQuery you get very familiar with Javascript. You could dive straight into jQuery but you'll have a big leap ahead if you learn Javascript.

Then you can progress onto jQuery.

Community
  • 1
  • 1
Gary Green
  • 22,045
  • 6
  • 49
  • 75
  • You forgot to cover general high level design of client side javascript. Things like backbone & underscore can really help keep your code tidy. And packager / loaders like labjs / require / uglify can help a lot aswell. – Raynos May 27 '11 at 10:07
0

I suspect this answer will not sit well with some enthusiasts but it's an attempt to provide some pragmatism here.

What are you trying to accomplish - learn some jQuery for basic website development? Or build a Rich Internet Application (RIA) that just takes RESTful data feeds?

As with all things it takes time to learn something worth learning in depth. Javascript is imo slighltly harder to learn than C# or Java - there are also far fewer development tools available for it. The number of websites that NEED complex javascript is pretty limited - mostly you can get by by using libraries and plug-ins. There are also a host of javascript plug-ins or libraries that do an enormous number of tasks - one of which is jQuery itself!

So my advice would depend on how much time you have, how experienced a programmer you are and what you are trying to accomplish.

If you really need a RIA, then definitely learn javascript first - experiment porting an application written in some other OO language - explore the resources listed in other answers.

If you're not doing anything this complicated right away, then play with jQuery for a while - get used to what you can do - also focus on learning to keep content, behaviour and styling separate - just as there should be no styling in your html, but in a separate style sheet, also keep separate the behaviour or functionality - use jQuery selectors to "attach" functionality to existing html instead of setting event handlers inline. This concept is definitely one you should focus on familiarising yourself with.

After a while you will either realise you have everything you need, or that you need to return to the books and learn javascript properly.

BonyT
  • 10,750
  • 5
  • 31
  • 52