Weaning off jQuery - any advice?

rolf · October 10 2012

Hello,

I'm trying myself at website coding without jQuery, using CSS animations, and some JavaScript when needed. Does anyone have advice...? I am finding myself looking for equivalents to jQuery methods, such as addClass, jQuery selectors and traversal, and it has to be cross-browser!

rtp · October 10 2012

why not use jQuery?

you know that jquery is actually javascript right?

that is why jQuery was created, to make your life easier. Such as the addClass or removeClass etc...

Don't reinvent the wheel

Joe · October 10 2012

jQuery's selectors are unique. If you cannot let go of them, you should stick to this lib.

However if you still want to change, here are some interesting options:

Other frameworks

jQuery is far from being the only JS framework out there. Actually, with its weird "$" object and the funky selectors, jQuery is arguably the least javascript-y framework available.

Why not try something else? Some of the examples I know:

You can safely expect coverage for a vast range of browsers be provided in most of these frameworks.
Make sure to pick one that provides canvas support, and you're in for hours of graphics drawing fun.

Front-end framework

That's the new trendy thing. Frameworks that are more than simply a few JS libraries. They usually provide templates for HTML, CSS, a directory structure and JS extensions. Of course cross browser compatibility is taken into account.

Here are the two most interesting:

Bootstrap (by Twitter)
Foundation

Their main advantage is the native support for mobile systems.

Superset languages

If all you're looking for is to write some JS but you're not the biggest fan of the syntax, there are some efforts to develop new languages to replace it. These languages usually compile to JavaScript and therefore should run on every browser natively (no need to ask your users to install any weird plugins - we already learned that mistake from Silverlight).

Unfortunately, I feel that these languages are primarily aimed at programmers with strong JavaScript skills looking to simplify their programs. Someone not familiar with JS might have a hard time debugging.

In any case it doesn't hurt to check these out:

CoffeeScript
Dart (by Google)
TypeScript (by Microsoft)

CoffeeScript is the closest to JS (it's "just JS", and they make a big deal about it). Dart and TypeScript focus on giving JS the features necessary to manage very large applications, mainly static (optional in the case of Dart) typing and class-based Object Orientation. TypeScript has the advantage of being backwards compatible, meaning any existing JS code is de facto valid TypeScript code. Or so they claim.

Keep in mind that these projects are at their infancy and should be handled with care.

JavaScript, the Good Way

Finally, nothing prevents you from rolling up your sleeves and getting your hands dirty in plain JavaScript. From the experience I have with the language, it's not a newbie-friendly language. Not because it's difficult to understand, you can write your apps quickly, but because the language does very little to prevent the programmer from writing bad code.

The language is often described as a "toy" language, although in my opinion it's more powerful than what enterprise developers might tell you. It does have some flaws, like the adoption of C-like syntax (the language is a lot more similar to Scheme or Lua) or the partial support for prototypal OO designs.

If you decide to write your own JavaScript, I strongly suggest reading JavaScript the Good Parts by Douglas Crockford. The book expects some familiarity with programming in general, and focuses on the subset of features that make the language powerful (the Good Parts), while carefully avoiding the harmful features (the Bad Parts). The same author has written JSLint a static code analyser (it's a tool that analyses your code without executing it) that helps you get rid of the Bad Parts from your code. It also plays very well with Continuous Integration servers like Hudson.

rolf · October 10 2012

Thank you :)

The reason why I am avoiding jQuery is mostly "emotional". I've managed to write a website using minimal amounts of code - and using CSS animations. I don't want to spoil it by including the 90KB jQuery library. It also find it alarming that, to find results to a question on the web, I have to add "-jQuery" in my search query on google!

Anyway I seem to be getting along somehow with JavaScript, and am using this:
http://javascript.nwbox.com/NWMatcher/
Which provides a bit what Sizzle does, sizzle being the part of jQuery which hands the querying by CSS selectors.

rahmu thatks again, I'll look into the options you present in details later on - have to go now! It's' nice to know that there are alternatives to jQuery, and I might adopt one. I think jQuery is becoming a bloat.

rtp wrote:

you know that jquery is actually javascript right?

noooo!

Last edited by rolf (October 10 2012)

rtp · October 10 2012

now you know!

xterm · October 10 2012

I would actually advise you to grab a couple of your latest projects and see what parts of jQuery you've used. Re-implement those parts in a different script of your own; Unplug jQuery, plug in your own Script and see if everything still works.

In terms of feeling better about yourself using jQuery, it couldn't get any better than this.

samer · October 22 2013

Reviving this old threat to mention Zepto.js, it's a subset of jQuery with the following mission:

The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting stuff done.

They don't cover all the jQuery API, but I'm guessing most of the things you use daily are there.

Also, just a heads up in case you did not know about document.querySelector. It's a query selector akin to $, but it is implemented by default in all modern browser (including IE 8+). It is less powerful, but has the upside of being already bundled with the browser.

rolf · October 22 2013

samer wrote:

Also, just a heads up in case you did not know about document.querySelector. It's a query selector akin to $, but it is implemented by default in all modern browser (including IE 8+). It is less powerful, but has the upside of being already bundled with the browser.

Thanks. From this page:

http://caniuse.com/queryselector

Note: Only works for the CSS selectors available. Thus the IE8 implementation is limited to the CSS 2.1 selectors

Which means no "#form input[type=submit]" and such, and that's the problem.
But you're right, it still goes a long way!

Wait, I thought you could do this in IE8...
Anyway I'll try to use it and see how it does.

As an update, I've been developing websites without jQuery, and it is going well. I had to write an ajax function myself, and had to rethink animation (making use of CSS), but now that I have the code, I can reuse it, and the process is at least as good as with jQuery.

I also find the code to be more readable now.

When you don't use jQuery, you need to have a more "holistic" approach (involving CSS and HTML), which seems to often result in better-working implementations and more sensible solutions.

One nice thing about jQuery, are all the plugins that are available, and sometimes having access to these plugins is more important than the other concerns.

Last edited by rolf (October 22 2013)

LebGeeks

#1 October 10 2012