To jQuery or not to jQuery?

When I started my set of WebGL tutorials, my JavaScript experience was limited; the largest-scale work I’d done in the language was a couple of demos (the second’s by far the best, let it run for ten seconds) that I did back in 1999, when we called them “DHTML pages“. So, while I have more years’ Java experience than I can shake a stick at, and have been coding increasingly-functional Python since 2005, I really have been learning JS as the tutorials have progressed.

Now, one of the guiding ideas for the tutorials has been that they shouldn’t push you in any particular direction as regards frameworks. The aim has always been to write everything in pure HTML, JavaScript, and WebGL, nothing else. But since late last summer, I’ve been working (in the day job) on a programmable cloud spreadsheet — which, amongst other things, means that my colleagues and I have had to build a pretty large JS codebase for the front-end. And the big take-away lesson from that has been that jQuery rocks.

So, with all the enthusiasm of the newly-converted, and all of the frustration of someone who’s just converted a bunch of 1999 DHTML pages to semi-modern JavaScript, I’ve found myself thinking that I should change the WebGL tutorials here to use jQuery.

What does everyone think? Would jQuery make the tutorials better? Or harder to understand? Should I just stick with pure JavaScript? Or is there a library that’s so much better than jQuery that I’d be crazy not to use it? Have I just inadvertently asked a question that’s going to set off a religious war between devotees of different JS frameworks? Any answers very welcome below.

[UPDATE] I should clarify that I’m only considering rewriting the DOM access and stuff like the onload callbacks using jQuery, and then only to make it easier and more readable. I’d explain the jQuery in as much detail as I currently explain JavaScript. The WebGL and canvas access would remain pure JavaScript.

You can leave a response, or trackback from your own site.

54 Responses to “To jQuery or not to jQuery?”

  1. Rob says:

    I never pay any attention to any articles that require jQuery. Everyone nowadays seems to throw jQuery at every problem making me feel they’d rather not think or they don’t know how to code. I want to say using jQuery is like taking a math test with a calculator but I won’t.

  2. Den says:

    Rob is a purist… jQuery rocks. Pay no attention to the man behind the curtain.

  3. teadict says:

    I share Rob’s opinnion, and I will add that JavaScript is not as hard as it looks to use, daily on its native state. There is a gap between native JS and what frameworks do nowadays but filling up that gap is totally possible.
    jQuery takes a lot of crap out of the way but it is not real JavaScript. It doesn’t teach you JavaScript and it doesn’t look like real JavaScript. Not saying it shouldn’t exist, but it gets way too much publicity.

  4. Keith says:

    I’m for it. jQuery is easy to read so you won’t be excluding people and it will help put the focus on the WebGL code instead of things like DOM manipulation.

  5. Den says:

    teadict, Rob,
    Do you have day jobs? For the sake of brevity let Giles code his samples with jQuery. teadict (I like tea too btw) jQuery is 100% JavaScript. Rob? calculators can’t do real math. Use a computer. Use the best tools available (as long as they are opensource).

  6. Benoit Jacob says:

    When we used your lessons as a starting point for our presentation (online very soon, source at https://github.com/bjacob/webgl-lessons) one of the changes that we made was actually to insert a couple of bare-minimum lessons at the beginning, that don’t require any dependency, not even any kind of utility library or matrix library. I think it’s crucial to start with something absolutely minimal, especially with WebGL where the first step is the hardest. As a former mathematician I also am very wary of people treating matrices as obscure black boxes so I try to first show what can be done in WebGL without any matrices at all (which is: basic 2D graphics) and gradually introduce them. Then of course in our 2-hours presentation I couldn’t go into much detail.

  7. Nicolas says:

    JavaScript Rocks.

    JQuery though, for JavaScripters, is a matter of taste. Some will like the JQuery style when making JavaScript, others might like to do idiomatic JavaScript and use Prototype or MooTools.

    I’d say to keep it plain JavaScript, perhaps even use the ES5 features available in browsers supporting WebGL (like Array.forEach, Array.map, etc, Object.create, etc) that could make a more idiomatic and concise code without having to use a library.
    Then, let the community port these examples (just like you did with the Nehe tutorials) into their own frameworks. That’s what I’m actually doing with these today for mine ;)

  8. Mr.doob says:

    What Nicolas said.

  9. Rich Apodaca says:

    You might try the first couple of examples using both JQuery and plain JavaScript. I’m curious about what JQuery might bring to WebGL programming. If you create both sets of examples, that might become clear to all of us.

  10. Skofo says:

    I don’t have much experience with jQuery, but I was under the impression that it’s useful pretty much just for regular web page stuff and not Canvas/WebGL…

  11. Hi,
    I think jQuery can help on your samples and add little “stuff” for those who don’t know it.
    There are many web sites tutorial to show how to build menus, effects, etc and use jQuery instead pure JavaScript.

  12. Marco says:

    I think it’s better if the guide is framework independent. There is a lot of people that don’t use jquery and love others framework like prototype, dojo, mootools. If the guide is constructed around jquery it’s harder to learn and, more important, code-unfriendly :)
    In any case, thank you for all your work!

  13. Simon says:

    The examples wouldn’t gain any benefit from conversion to jQuery.

  14. niko says:

    I’m also against jQuery. The less dependencies the better.

  15. Tim says:

    I am also for the less dependencies.
    However, if in some lessons you see a huge simplification that could be done using jQuery, you still can add a “jQuery tips part” or something explaining in what it could help with or without code explaining.

  16. Karl says:

    jQuery is extremely good for dom manipulation and, if you’re on 1.5, deferreds and templating are nice. The other major libraries provide their own module systems–usually with dependency loading, a defined way to wire modules together, and a widget library. I find some sort of module system or convention pretty important so I’m surprised to hear you’re really enjoying jQuery on what sounds like a decent sized project. I find that jQuery tends to go spaghetti on projects over ~1-1.2k semicolons.

    As for this site, I don’t think you’re doing enough DOM manipulation in these tutorials to need jQuery.

  17. Karl says:

    Just realized you work at Resolver. Resolver One rocks!

  18. WarrenFaith says:

    Please stick to plain JavaScript. I was a bloody beginner in JavaScript and it was good that you didn’t used jQuery.

    Less (dependencies) is more!

    jQuery may rock, but not when a beginner wants to learn WebGL. He has enough to learn about 3D and WebGL so jQuery might be too much.

  19. Sandy says:

    +1 What Nicolas said.

  20. tribadelics says:

    For me JellyFish (http://aleksandarrodic.com/p/jellyfish/) is example of very simple and well structured code for WebGL. Him is using jquery to deal with HTML and leave all of the WebGL setup code to JavaScript separated by little files like initTextures.js, initShaders.js, initBuffers.js etc..

  21. Lindsay says:

    I vote yes – I was going to say no because it will be a maintenance bottleneck, but then it occurred to me that what you’ll just be doing simple little things with it that we should be able to mentally translate into our own favourite tricks without a problem – which would be things like selecting elements, updating attributes, I guess?

    I find I can grok my way through lots of WebGL examples containing jQuery since there’s not a lot of overlap between the WebGL and jQuery bits.

    Definitely think you should avoid doing fancy UI stuff with it though – just stick to basic DOM utils.

  22. Test your tutorials against the new jQuery 1.5 Branch and your current Javascript.

    The changes in AJAX http://blog.jquery.com/ make jQuery more easily integrated into your code.

    Performance has leaped considerably on the latest WebGL browsers between jQuery 1.4.4 and 1.5.

    It’s all in their blog.

  23. Giles: do show us! What harm could there be in such examples? Cheers.

  24. Paul Brunt says:

    Using jquery could help with the focus on webgl itself. Perhaps, just using in later lessons assuming to get to that point they will probably have gained some knowledge of jquery from elsewhere.

  25. Andy Brummer says:

    I think only where it makes the code easier to read, so probably only where you are mixing html and webGL elements. If you are mostly just teaching shaders and the webGL api then it’s probably just going to get in the way.

  26. evilhackerdude says:

    Also, what Nicolas said.

  27. Peter Liepa says:

    I’m in the “What Nicolas said” camp. Embrace the “Javascript rocks” mantra. For those of us (probably most of us) who come to it from other languages, its power, subtleties, and idioms can take a while to sink in.

    Like others who have commented, I’m skeptical that jQuery (although it totally rocks too) would bring very much to these tutorials. If you feel differently, maybe you should write a jQuery version of one of the lessons and get feedback on whether it was worthwhile to do so.

  28. Learning WebGL is a blog to learn so I think it would be great to keep it simple. As simple as possible actually. I am an OpenGL programmer and I just discovered Javascript as I want to learn WebGL.

    I can see 2 sides for these tutorials evolution. Why not writing a jQuery port if you are interested to do it and see how things goes. The other side is maybe updating the samples more in a way they would be more design in a way OpenGL programmers would do.

    WebGL is a consensus between web developers and OpenGL developers so I guess these tutorials should target this consensus.

  29. teadict says:

    Please do not jQuery over a browser core feature like canvas. Please. That is not why it was created in the first place and its objectives are basically abstraction of the DOM, not helpfullness towards the language itself.

  30. ear1grey says:

    Write them in “pure” JS and provide a mechanism for (one or more jQuery experts in) the community translate them. That way the demo’s maintain their core simplicity, and jQuery denizens get to show how much simpler it is.

  31. steve says:

    I don’t use jQuery so I tend not to read articles that use jQuery. I would go even further and take out the dependency on Sylvester, so that you’re only using “lessons_support.js” and “lesson0x.js”.

    A lot of the power of jQuery and other libraries is making IE6 and older browsers more tolerably standard. By using WebGL, you’re inherently relying on more modern browsers without that problem.

    By directly handling the DOM yourself, you’re making two important statements. 1) That you’re not doing anything too tricky, and 2) Your lessons are applicable to all libraries and all WebGL browsers.

  32. giles says:

    @everyone — thanks for the comments! I’ll ponder them and post a conclusion over the weekend.

    @Karl — re: Resolver One, thanks! We’re really proud of it.

  33. Dan says:

    Do it! Jquery rocks! Also please do a normal map tutorial.

  34. Nate says:

    jQuery is great. I spent hours and hours doing dynamic stuff, and made functions to make it easier because at work, time is important. I found jQuery and was very happy that someone mastered what I was trying to do. Rob, if you think that is true and like using a calculator, then do assembly language programming, matter of fact, that may be cheating, better work with just ones and zeros. It’s not hard coding the things jQuery does, its just tedious. Standardization is better, and that is what people are trying to accomplish.

  35. @teadict “Not real javascript”? I have to disagree. jQuery is ninja javascript! –and the design patterns are beautiful. I will admit that it is not always appropriate to immediately reach for jQuery for problems that have simple solutions with pure js.

    “It doesn’t teach you JavaScript and it doesn’t look like real JavaScript” I first learned javascript by picking up a jQuery book, reading through it and filling in the blanks with Google. It worked for me quite well and I’ve since chewed through additional reading on javascript object design patterns eg. “Pro JavaScript Design Patterns” http://jsdesignpatterns.com/ (which I heartily recommend)

    In short– jQuery rocks and it saves me a shit-ton of time in development. It’s as real as Pinocchio and very approachable for the new js coder.

  36. Dario says:

    I really don’t understand all this purism around javascript. Shouldn’t a language evolve during time?
    Maybe jquery is not the best possible road to evolution, but we should all admit that if jquery became so popular, it has to be for a reason and the community should look at the positive aspects of it.
    In my daily work we cannot afford to spend extra time in coding just ’cause we don’t like jquery. If it does the job and saves my team some hours of development, it means that the project will cost a little less to the customer and we are both happier.

  37. EMpiRE says:

    For the happiness of everybody you should do it in two version, one with jQuery and the otherone without, a bit like NeHe Tutorial which is using different language/format so it will help everybody outthere, people should help you translate your tutorial also.

    Im using a lot of jQuery in my day time job, i find it useful and a life safer ,the power of the selector is uncomparable and it suite very well in Complexe Rich Internet Application using Javascript/Ajax by abstracting main compatibility issue, so you can focus on your app logic instead on browser compatibility hacking.

    For WebGL i don’t think it will affect the Code execution logic.

  38. Yanko says:

    jQuery is javascript made better, but again javascript is fine too, compare the time of execution and if the time is greater to one use the other one!!
    but they both are good so who cares!!!!

  39. Johnny P says:

    Vote for jQuery. The focus of the site seems to be WebL, not so much JavaScript. Anything that reduces the noise and keeps my attention on the subject I believe is generally a good thing.

  40. jQuery may allow you to put more focus on the WebGL bits, and if it frees any of your time for more WebGL tutorials it’s well worth it. Personally, I think that very large JS applications need frameworks designed for that purpose (http://dojotoolkit.org/ and especially http://code.google.com/closure/), but the learning curve is steep enough that it might be wise to use the more popular and conceptually lighter-weight jQuery here.

  41. Alex says:

    I vote against, as it would add some noise and make for a steeper learning curve.
    Besides, as has been told above, jQuery can talk with the DOM, was built for it. It was not built to chit-chat with WebGL.
    jQuery *could* divert people from learning important truths about Javascript.

    Adding jQuery, to WebGL, sylvester.js and glUtils.js will only add complexity.

    In my opinion, the goal of these (incredibly well-made) tutorials is to learn WebGL.

    It is up to people to individually wrap up some “generic” JS code from the original tutorials into code based on frameworks such as jQuery, YUI 2/3, prototype, you name it.

    Next step, moving the shaders to an XHR so as to have the source code look cleaner? Come on …. :)

    Now if the question was: “Shall I try and provide you with a new plugin called jGL?”, my answer would probably be yes. ;)

  42. teadict says:

    @Jeremy: Okey, I might have gotten excited when I said it is not real JavaScript; but it doesn’t teach you JavaScript, and I know you agree on that, and that is what really gets on my nerves. I’d shoot a JavaScript patterns list of examples and a book on functional programming at a non-JS programmer and I’m sure he ends up writting a decent JS framework in short term; on the other hand, shoot a jQuery complete guide at a non-JS programmer and what do you get? A web designer that knows “JavaScript”. It’s the consequences that creep me out. Peace.

  43. teadict says:

    He/She, lol, sorry about that! ):

  44. steve says:

    jQuery became very popular for handling DOM, which is not what WebGL is about. If you wanted to improve Javascript itself, you should be looking at mootools not jQuery.

  45. giles says:

    Thanks to everyone for the excellent comments! I’ve decided not to jQuerify the tutorials, here’s the explanation.

  46. Nielsle says:

    This looks cool, but how much python can I write in a cell? Can I write the following?

    os.system(“rm -rf ~”)

  47. giles says:

    Hi Nielsle — you mean Dirigible? You can certainly put that into a cell, but the sheets run in a very restricted environment, where the filesystem is read-only and contains only the things needed to run Python, so it won’t do any harm. You can read a bit about how we implemented it here.

  48. joey Thompson says:

    Yes, JQuery. It is Windows to DOS. I know DOS and what I know is … well it is better to know the Windows, JQuery, Java, Javascript, Python,C , C++ and DOS, than to just know DOS. It’s like saying Linux can’t evolve, otherwise. JQuery is for certain developers as certain as Apple is for certain consumers, goes without saying. Please publish your thoughts.

  49. Pit says:

    I really don’t get it. All that hype around JQuery… Come on. People, please, do understand – JQuery is just a library(not a framework!!!) to help with DOM manipulation and cross browser issue (the reason for this is mainly Microsoft). HTML5 is getting traction and this time everyone (even Microsoft) will follow the standards if want to stay in the game.
    So don’t teach HTML5 with JQuery tutorials please !!!

Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter