JavaScript Jabber

JavaScript Jabber is a weekly discussion about JavaScript, front-end development, community, careers, and frameworks.

Subscribe

Get episodes automatically

045

045 JSJ jQuery


Panel

Discussion

01:11 – jQuery vs Prototype vs MooTools 10:50 – JavaScript Going Mainstream

  • Fast Browsers
  • Firefox
  • Web Developer Tools
  • V8
  • Web Stack

13:21 – Usable JavaScript 17:05 – jQuery Pros

  • Cross-Platform
  • CSS Selection
  • Chaining

20:16 – jQuery Mobile 20:48 – QUnit 21:21 – Running jQuery in Node

  • Scraping

22:32 – CSS Manipulation 24:14 – jQuery UI 25:19 – jQuery Community 26:31 – jQuery Plugins

29:52 – Ender & Zepto.js 33:44 – jQuery Cons

52:15 – AJ lied about jQuery

Picks

Joe’s Pluralsight Page

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

MERRICK:  Do you want to see my face?

[Hosting and bandwidth provided by the Blue Box GroupCheck them out at BlueBox.net.]

[This episode is sponsored by Component One, makers of WijmoIf you need stunning UI elements or awesome graphs and charts, then go to Wijmo.com and check them out.]

CHUCK:  Hey everybody and welcome to Episode 45 of the JavaScript Jabber show. This week on our panel, we have AJ O’Neal.

AJ:  Yo! Yo! Yo! Coming at you live from the screencastosphere of Provo, Utah.

CHUCK:  So, I have to ask, AJ. You realize this is a podcast and that it’s coming to no one live, right?

[Laughter]

AJ:  He’s got a good point.

CHUCK:  We also have Merrick Christensen.

MERRICK:  Yeah, I’m Merrick.

CHUCK:  Joe Eames.

JOE:  I’m not Merrick, I’m Joe.

MERRICK:  He’s Joe.

CHUCK:  Jamison Dance.

JAMISON:  Hello friends.

CHUCK:  And I’m Charles Max Wood from DevChat.tv. And this week, we’re going to be talking about jQuery.

So, I’m assuming we’ve all used jQuery at least a little bit.

JAMISON:  Yes.

MERRICK:  Yup.

CHUCK:  If you’re doing web stuff, it’s pretty handy.

MERRICK:  Actually, the first JavaScript code I ever wrote was messing with somebody’s little jQuery stuff on a form. And I remember I couldn’t get it to all work right. So I just had to set async to false. And I was like, “Man, this JavaScript language is stupid!”

CHUCK:  [Laughs]

AJ:  I wish my first experience had been with jQuery because I was not using jQuery when I was first using JavaScript and it was terribad. It’s like, “This works properly in no browsers!” Because each tutorial is wrong.

CHUCK:  Yeah. Well, I remember back in the day when I was using Prototype for my web app. So, jQuery was a huge step up from Prototype, I have to say.

MERRICK:  Why?

CHUCK:  It’s just that the interface of the API felt better to me. I can’t really quantify how.

MERRICK:  That’s fair. I was a big MooTools fan and I was kind of a hate Query, if you will.

AJ:  As you should be, actually.

MERRICK:  I didn’t hate jQuery per se, but I really loved MooTools just because the APIs were just so beautiful. And also, all of this new age, these structural libraries like Backbone and all that kind of thing was really natural in MooTools already, right? Because everything was so class-oriented and I’m not saying classes are the only way to organize your code. But that’s certainly the way that Backbone and these kinds of frameworks are making it out to be with perhaps the exception of Angular.

But I loved MooTools. The API was just awesome. Granted they did that by sugaring Prototypes which was a tearful road. And also, that community struggled a little bit with elitism which is probably why I liked being in it so much.

[Laughter]

[Crosstalk]

MERRICK:  I could just look down on everybody else is kind of what I’ve tried to do anyways.

AJ:  So. Prototype came out of Rails first, right?

CHUCK:  No, the guy that wrote Prototype works for 37 Signals on Base Camp?

MERRICK: That’s the Rails company.

AJ:  Sam Stephenson.

CHUCK:  Yep. I don’t think he wrote it specifically for Rails or vice versa.

MERRICK:  I don’t think he wrote Prototype.

AJ:  I think it was included in Rails, right?

CHUCK:  Yes. It was the default in Rails forever.

AJ:  Yeah. That’s what it was.

MERRICK:  And like, Prototype was a pioneer, man. It brought on like people look at jQuery like it was a pioneer. Nah, man. jQuery was a follower.

[Crosstalk]

JOE:  jQuery was certainly second followed Prototype. Don’t discount their innovation in taking what Prototype was doing and saying, “Let’s do what they’re trying to do but rethink it differently.

MERRICK:  Yeah. To be fair, they’re kind of different, right? Like jQuery is very much a DOM abstraction library, whereas Prototype and MooTools tend to be — well honestly, I don’t know. Even the guy who wrote Prototype doesn’t take Prototype seriously.

CHUCK:  That is true.

MERRICK:  Unfortunately.Which is sad for those guys who are working on it and I apologize. I don’t mean to discount anyone’s work or anything like that.

AJ: Is it still maintained?

MERRICK:  I think it is. I’m not sure.

JAMISON:  I thought there was Prototype 11. No, I’m thinking of Scriptaculous.

JOE:  Scriptaculous is like an add-on.

MERRICK:  I’m looking for, which that guy ended up writing Zepto, though. So, like I don’t know if he’s even worried about Scriptaculous anymore. I’m pretty stoked about the — MooTools is hopefully going to be launching like an AMD version of all their stuff where you can install their prototypes, which I hope they stick to that plan. That will be money in the bank.

CHUCK:  I was actually looking at MooTools when I switched from Prototype to jQuery.

AJ:  I think this is the reason that — so MooTools and Prototype are a little bit more structured, right? So, people coming into JavaScript have a little bit harder of a time with it if they’re not already familiar with programming. jQuery was kind of meant for the idiot who has no idea what he’s doing, and he’s using PHP on the backend.

MERRICK:  Oh, my God!

AJ:  Easy, easy…

[Crosstalk]

[Laughter]

MERRICK:  I’ve never [inaudible] this elitism.

JOE:  Coming from the MooTools guy.

MERRICK:  No, he’s even more elite than the MooTools community.

[Laughter]

AJ:  I’m not elite. I’m just saying that everything else is okay.

MERRICK:  You know what they say, dude? They say that confidence is more frequently begotten by ignorance than it is experience.

[Laughter]

AJ:  Let me rephrase that, so what I’m saying is that jQuery is popular because the API is simpler. It’s a lot easier to wrap your head around than the other ones. It’s a much lower learning curve. Everything is just overloaded into the single dollar sign operator and that makes it a win. Like I like…

JOE:  The only reason that makes it a win.

CHUCK:  Yeah.

AJ:  But I mean, why is it better than MooTools or better than Prototype?

MERRICK:  I do think that’s why it has the best of the options is because it has very, a consumable API. Their API is beautiful, right? It’s very like — which doesn’t necessarily make for the most maintainable code by default. Like, we’ve all seen jQuery abusers. Like I have this article on my blog where I just talk about DOM libraries. And then, I also talk about structural libraries. In the structural libraries article, I talk about how people who get a hold of jQuery and abusing it beyond all reason and sometimes can create a bit of a mess.

JOE:  Which only validates AJ’s point that it’s for idiots.

[Laughter]

AJ:  So, that language was a little strong. I don’t really believe that jQuery is for idiots because I use jQuery. I think the API is a win. But it is not the best API really. It’s a little difficult in its simplicity. It’s over simplified. Well, just because everything goes to one function, like everything comes out of one object. It’s nice to have that separation of concerns.

MERRICK:  So much hate…

[Laughter]

CHUCK:  So, how would you like to see it broken up, AJ?

AJ:  Well, I think that the way MooTools and Prototype do it is nice. It’s just, honestly, it’s not as convenient. It’s more typing. It’s another nine characters per operation, in some cases. And so…

JOE:  I think you’re looking at it wrong. jQuery is — a friend of mine coined this and I rally agree with him. jQuery is a DSL for the DOM. That’s what it is.

CHUCK:  Yes. That is 90% true. There’s another 10% of stuff that isn’t DOM related, but yeah.

JOE:  And you know what? The 10% of stuff that isn’t DOM related, I’ve found better elsewhere.

MERRICK:  That was the big thing I had to accept before I really embraced jQuery. And Ryan Florence is the one that helped me look at it because he was a mentor of mine and still is, actually. But we ended up talking about MooTools a lot together and he ended up switching to jQuery at some point. And I remember him describing it as like, once you can accept is as nothing but like a DOM abstraction library, it’s a lot more, it’s a lot easier to digest.

And also, jQuery UI offers jQuery widget which is sort of like this classy sort of Inheritance thing too. Those jQuery guys know what they’re doing. They just have a different philosophy than I guess some of the historical programming context which isn’t a bad thing at all. It’s actually quite interesting in a lot of ways.

JOE:  Yeah. And it’s funny because there’s been a fair amount of condescension, so far, on actual heading towards jQuery. Yet, you know, jQuery brought JavaScript development to the mainstream.

CHUCK:  That’s true. I think it is. I happen to agree.

AJ:  I don’t think I can argue with that.

JOE:  Merrick’s going to try.

MERRICK:  I’m going to try. I think that there was a coalition of things, right? Like for example, faster browsers, people wouldn’t have got so excited about .animate if it didn’t perform at all, if all the animations were choppy.

AJ:  But they were all choppy until jQuery came out. That’s the reason they made the browser faster is because people are building stuff with things like jQuery.

MERRICK:  You think so?

AJ:  Yeah. They didn’t make the browser faster so that they could do more cool stuff. People were doing more cool stuff, the browser was too slow. And so, they made it faster.

MERRICK:  That was made up.

[Laughter]

JOE:  I understand and see your point, Merrick. But to me, that’s kind of like saying that the market that wanted iPods was the reason that Apple is successful, right?

MERRICK:  Yeah, that’s what I’m saying.

JOE:  Apple brought the iPad out at the same time that the market wanted iPad. So the two events corresponded to each other. But really, Apple was the one that brought the iPod. I think that jQuery enabled…

MERRICK:  Sure.There’s no question that jQuery lowered the barrier for writing JavaScript particularly because it abstracted away all of those things that people hated most about JavaScript, the fact that you could depend on something across environments.

JOE:  Right.

CHUCK:  I want to hear, though, what the other things you think culminated in JavaScript coming to the mainstream other than jQuery?

JOE:  Fast browsers.

MERRICK:  Okay, yeah.

CHUCK:  So, fast browsers?

MERRICK:  Fast browsers.

AJ:  Firefox in particular.

MERRICK:  Firefox with Firebug, like they made developing with JavaScript just so much easier. I don’t know if you guys remember having to install firebug back in the day?

AJ:  And web developer tools.

MERRICK:  Yeah. That was a follower. I don’t think that — I mean, are you talking about the toolbar? I remember that.

AJ:  Yeah, the toolbar where you click on it and it does the same thing as the elements tab in Chrome does now.

MERRICK:  Yeah, that thing was money in the bank, man.

AJ:  So amazing.

MERRICK:  I think V8 and then eventually, that forked into Node which I think Node did a whole worlds of good for helping people separate the JavaScript from the DOM which they didn’t do beforehand in a lot of ways.

AJ:  And Node kind of helped that like better more maintainable JavaScript.

JOE:  You’re missing out on, I think, one of those key ingredients in that whole mix-up which is just the market. Users started demanding better websites and it pushed people to need to do more and more JavaScript. And when they started looking around, jQuery was the obvious answer.

MERRICK:  Another — I don’t know if I can take away that. That’s with JavaScript or the Web Stack, right? That’s another thing that I think was the culmination that brought JavaScript to the forefront is you have mobile devices, you have iPads, you have this huge fragmentation of platforms. And the only way to consistently write an app for all of them is really, there’s all sorts of transpilers but really, is to target the web.

CHUCK:  The thing is, though, the way that you make a lot of that approachable is the approach that jQuery took.

MERRICK:  Totally. But I think that all of these things created a mainstream. Like someone could write a really dope library of Scala but it doesn’t mean Scala’s going to take the world by storm. Does that make sense?

CHUCK:  Yeah. You don’t have the option for Scala in the browser. And that’s kind of the arena that JavaScript is forced upon you, one way or the other.

MERRICK:  Exactly. And so, the fact that jQuery enabled something, all these different devices created a need because you wanted to write cross platform apps, we still do. Then you have the performance boost that offers. That’s why I’m hesitant to give jQuery the reigns on saying like, “These guys brought JavaScript to the world.” I think they certainly helped. They certainly lowered the barrier but I wouldn’t give them that title.

AJ:  The community that followed, Web Designer Wall, like all these tutorials that actually started giving you JavaScript that was useable that you could count on to work. Like no, it’s not all jQuery but it’s kind of like they’re what caught on in all the stuff that hinged on jQuery. It could have hinged on something else. Like maybe if Prototype had been a little bit simpler, just a few letters shorter in the typing, then maybe it would have been the one.

JOE:  Yeah. But it’s just like Visual Basic. Visual Basic brought visual development to the development world. I don’t think they were the very first to do it but they were the first mainstream one and they made it easily approachable enough. And then, all of a sudden, everybody’s doing Windows apps with drag and drop designers because of what they saw with Visual Basic.

MERRICK:  And just to be clear, I’m not trying to be an antagonist against jQuery or anything like that. I use jQuery daily and I think it’s a great library.

CHUCK:  Right. You just don’t think it deserves the credit that we were giving it.

MERRICK:  Yeah. I don’t think it alone brought JavaScript to the masses. I think that JavaScript very happily was the language of the web, and it was a restriction that we all had to embrace when platforms splintered. And people still refuse to embrace it, which is okay. Like you see all sorts of these transpilers, like Appcelerator, there’s one in C#, there’s one for Roads, like Ruby Roads or something, RubyMotion. There’s lots of people trying to avoid writing JavaScript, you know?

JOE:  Well still, maybe you can say it a different way. But I think that without jQuery and assuming nobody else had stepped up with a library just as elegant and simple, that we would not be anywhere near where we are today when it comes to web development.

AJ:  Yeah. I mean, people were using Flash for stuff.

MERRICK: No!

CHUCK:  I really think that once people got in and started working in JavaScript in the browser, it was jQuery that really facilitated moving things ahead.

AJ:  I’d love to see a graph of number of jQuery installations on websites versus number of Java and Flash apps on websites.

CHUCK:  Well you know that those are changing due to several factors, but we’re kind of getting off topic.

MERRICK:  The jQuery, like I’ve seen people do phenomenal things with Prototype, seen people do phenomenal things with MooTools. I don’t think that jQuery somehow enabled people to have super powers. Like I don’t know, I’m not fan boy on the jQuery as much as you guys are, I guess.

AJ:  So here’s something. I hate jQuery, I hate it so much. But they have a nice API. And I’m trying to hate it less, it’s just I can’t for one particular reason, it has some sort of custom error handler which catches your errors and does not print a stack trace. And when you open up the browser console, it will not tell you what line the error was thrown on. It will give you a couple of function names without any line numbers and then it will tell you like ‘jQuery.min.js line 2 position 16000’.

CHUCK:  Can you put that into a gist or something or JS Fiddle and give us a link? Because I’d really like to see that.

MERRICK:  I really feel like it’s made up.

AJ:  What? What’s made up?

[Laughter]

[Crosstalk]

CHUCK:  Like I said, I’d really like to see that.

MERRICK:  Dude, I love trolling you so much, man. I’m sorry.

CHUCK:  [Laughs]Alright. Well, I want to change tactics a little bit and just talk about some of the things that jQuery does that make life nice. Whether you like it or not, some of the things that people really appreciate about it. I think one of the things for me that’s a big deal is the cross platform. On most browsers, you can basically set up a click event or whatever, the same way and it will work everywhere kind of thing.

JOE:  Right.

CHUCK:  I really like that, because then I don’t have to go figure out what Microsoft did to IE and what Firefox is expecting over there and stuff like that. I can just set it up once and everybody kind of honors it.

JOE:  I think that the CSS selection is my favorite part of jQuery. I think they were the first people to do that. Prototype wasn’t doing that before them, were they?

CHUCK:  I don’t recall. I think you had to look it up by ID or something but I don’t remember precisely.

MERRICK:  There are selector engines. MooTools certainly does. In fact, MooTools factored theirs out.

JOE:  Yeah. But I’m asking about who was the first?

CHUCK:  Yeah. I don’t know for sure.

AJ:  Well, the selector engine was certainly a smart idea. It was the first time that anybody ever said, “Hey, JavaScript and CSS are actually part of the same application. Maybe they should be able to work together.”

CHUCK:  The other thing that’s nice about it is that it gave you a convenient short hand based on the CSS selectors. And so, you didn’t have to look up by ID or look it up by class. You can just do a $, and then look it up by class or #ID. And so, it’s easy to follow that way.

JAMISON:  I love the class selectors.  I think that’s pretty much the main thing, and then it’s too bad that form elements weren’t standardized when they were standardized, because you know the idea that you have to access the value of a radio box differently than you access the value of a text box differently than you access the value a text area differently than you access the value of a check box. So, it’s not like you can just select something and say .value.

So, it’s really great that jQuery said, “Well, screw that! Let’s just make it so if you hit .val, no matter what type of form element it is, it’s going to figure out how to give you the thing that you’re expecting. So you can change your form element from a text area, or a text field to a text area if you find you need more space and you don’t have to go back and change your JavaScript

JOE:  Yeah, chaining for me, that’s another big win out of jQuery, was the ability to chain and keep selecting down or keep manipulating. Do an animation, and another, and another. I really like chaining.

MERRICK:  So, it looks like Prototype has the ability to select stuff, like on commit to.

JAMISON:  Now, you’re back to Prototype?

MERRICK:  Sorry.Six years ago, they had that ability.

CHUCK:  Yeah. I remember looking stuff up using Prototype. I don’t remember how it all worked.

MERRICK:  But anyway, in terms of me and jQuery, like I said, I love that it mitigates the browser differences. That’s what it’s all about for me.

CHUCK:  One thing that I think is interesting about jQuery though is that they had to spin off jQuery mobile. I’m not completely sure what you get out of that versus just regular jQuery, why the paradigm is that different, touch versus click?

MERRICK:  I think jQuery mobile has UI components and things like that though.

CHUCK:  Okay, kind of like jQuery UI?

MERRICK:  Yeah. I don’t think it’s just a device mitigator. But it also does touch stuff and UI stuff, I could be wrong though.

JAMISON:  I have actually never used jQuery Mobile.

CHUCK:  I haven’t either.

JAMISON:  So while we’re talking about jQuery, there’s also QUnit which is part of the jQuery family. Have you guys used that?

JOE:  Yes, heavily.

AJ:  I used it once.

CHUCK:  I’ve looked at it. I haven’t really used it. But I know that that’s what they use to test jQuery.

JOE:  Yeah.

JAMISON:  Didn’t it get extracted from the tests they had for jQuery, kind of?

JOE:  Yeah. I think it was just the result of when they were testing jQuery.

[Crosstalk]

MERRICK:  Is QUnit dependent on the DOM? Can you test Node code with QUnit?

JOE:  Yeah. You can test Node with Q Unit?

MERRICK:  Sweet.

CHUCK:  Speaking of jQuery, can you run jQuery in Node? Do you have to have like some fake DOM or something to make it work?

AJ:  You do and you can.

CHUCK:  I’m not thinking of many useful scenarios for that.

AJ:  Are you kidding me? Scraping, templating.

CHUCK:  Oh, okay.

JAMISON: Get close to that mic, Merrick.

[Laughter]

MERRICK:  So I’m no longer the maintainer of it. However, I was the first person to publish the jQuery Node module.

CHUCK:  Wow! I have important people here.

MERRICK:  I got tons of followers on it and I felt so bad because I didn’t do anything really. I just put a little shim around it so it would work and published it, put it on the mailing list.

AJ:  It uses JS DOM, right?

JOE:  Merrick has like 20 open source publishings that are pretty much just that.

MERRICK:  How dare you!

[Laughter]

AJ:  I’m pretty sure you should all get Merrick beat though.

JOE:  It’s not about the size of the project but how you maintain it

[Laughter]

MERRICK:  I will maintain my projects.

MERRICK: High five to your face…

[Laughter]

CHUCK:  So one other thing I really like about jQuery is the CSS manipulation stuff. Not the selectors, but actually being able to change attributes and add classes and set CSS elements or CSS properties, I guess, on the elements on the page. Sorry, my brain is running at half speed and my mouth is way ahead of it.

AJ:  I agree. I think, one of the things I really like about jQuery is they give you this awesome sort of plug-in mechanism which people tend to abuse but they let you write code. And I think that’s largely contributory to their success is that somebody could add something that’s pretty sophisticated JavaScript to their code by including a file, grabbing their element and then calling .make awesome on it.

MERRICK:  Like a plug-in of the element.

AJ:  Yeah. So, their plug-in architecture is pretty cool.

JOE:  Oh yeah, that’s no doubt. A huge, if not the biggest reason why that was a huge contributor to jQuery’s success was the plug-in feature. That’s got to be mentioned.

AJ:  Also, yeah their plug-in architecture is money in the bank. I also love their AMD support.

MERRICK:  Are you trolling?

CHUCK:  No. It says right on their front page that it has AMD support.

AJ:  Yeah. No, it’s gotten up to that. And by the way, they did a redesign on their documentation and their website for the first time since like 2006 or something and that looks really good.

CHUCK:  Yeah, it’s pretty now.

AJ:  It looks like a new project.

JOE:  Back before you were in high school.

[Laughter]

CHUCK:  One other thing I want to bring up, have any of you guys used jQuery UI?

JOE:  Nope.

JAMISON:  A little bit, I’ve used it once or twice.

CHUCK:  So, jQuery UI comes with things like date pickers, and other stuff. I haven’t used the tabbing or any of that but…

JOE:  It’s kind of funny because it’s almost like, I get the feeling when I use jQuery UI, and I know this isn’t truly how it went. But it’s like they went through and looked at all the plug-ins that people had made and said, “Oh, these five are really cool. Let’s just package them up and call it jQuery UI.” Because anything that they provide, you can go out there and you can find 60 variations on it. But I do like jQuery, I’ve used it a lot, it’s nice using the one that’s a little bit more standard and therefore a little bit more tested. But to me, it’s just kind of funny.

CHUCK:  Yeah. I’ve only pulled it in for when I need those couple of elements. I really haven’t done much else with it. But I know that you can skin it and stuff like that. But yeah, it really is just a convenient set of plug-ins for jQuery.

MERRICK:  The other thing I really like about jQuery is they have a community that is just so awesome. The maintainers and the creator are just some of the nicest people that you can find on the Internet, you know in the JavaScript world. They don’t shun beginners or anything like that at all. They’re just good people. I like that none of you guys care about how good the people are. For example, there are some…

[Laughter]

CHUCK:  He just trolled us all at once!

MERRICK:  There’s some projects where people just have sort of an arrogance about them or they can just become of condescending to newcomers, etc. But jQuery has a very much like a kind community.

CHUCK:  Yeah. That’s very true and there are a lot of — one thing that’s also true about the community is that there is a huge breadth of people out there that are writing blog articles and what have you about it. So it’s usually pretty easy to find answers to your questions. But yeah, you can jump into any community discussion. And I found that no matter if my question is a basic one or not that people are just willing to say, “Hey, here’s the answer. Here’s how you go about it. Go look at this plug-in, go do this.” Have any of you guys written plug-ins?

MERRICK:  Yeah, of course.

JOE:  Sure.

MERRICK:  Uh-huh.

CHUCK:  I remember, I was still pretty new to JavaScript the first time I wrote one. And boy, that bent my brain. I couldn’t quite figure out why they were doing half the stuff I had to do to get it to work.

MERRICK:  Yeah, it certainly takes advantage of binding this context.

CHUCK:  Binding this context?

MERRICK:  Yeah, making this the jQuery object or the element that you’re acting on. So like, you take heavy advantage of using this extensively in your jQuery plug-ins, and that’s because they call it accordingly.

JOE:  I will say that jQuery plug-ins are easy to do small ones but once you start making a big one, it’s hard to make a maintainable jQuery plug-in that’s of any reasonable size. By hard I mean, it just takes a little more thought than throwing it together which is why you see so many plug-ins that are just really poorly crafted.

AJ:  In one episode that we did, you said that you worked at a place where they used jQuery plug-ins as their, basically as their like module system. So, everything was written as a jQuery plug-in and then you just accessed it through jQuery.

JOE:  Yep.

AJ:  That sounds like the ‘if all you have is a hammer, everything looks like a nail’ thing.

JOE:  Yeah, that’s definitely true. And it worked for them, it worked for them just fine. But you’re right, they had one hammer and they didn’t go looking for another hammer. And part of that was, comes back to that whole ‘jQuery is so easy’. So, it makes it so much easier to do web development. So, if you’ve got some developers and you don’t do tons and tons and tons of JavaScript but you do some, so it’s easy to get developers comfortable with jQuery, right? And once they’re comfortable with jQuery, if you provide them with a little template for making plug-ins and kind of put the paradigm of, anytime you’re going to do something in JavaScript just throw it into a plug-in and make it work like that, it just takes all the thought about how I’m going to organize my JavaScript code away. So, it really worked out well for them.

I don’t recommend it for doing things of any size by any means. But it’s simplicity. And I think every so often, we see solutions that are too simple, you want to kind of like disown them because, ‘Oh, you’re not doing anything sophisticated.” But sometimes, that simplicity just works out to your benefit. I have mixed feelings about it. But I think, for them, it really worked out.

CHUCK:  Sorry. I’m trying to load this image of jQuery not throwing errors or whatever.

AJ:  I’m coming up with a better one to counter Merrick’s point because I’ve actually been over [inaudible] case where it actually shows the stack trace without any line numbers.

JAMISON:  You two got to let it go.

[Laughter]

MERRICK:  It’s a battle to the death now.

AJ:  This is an emotional thing here. I’ve been hurt, okay? I’m getting even.

[Laughter]

MERRICK:  I’m chill as a cucumber, man. I’m wearing a Kimono right now.

JOE:  Could you two [inaudible]. And I’m not opening up the door until you’re hugging.

CHUCK:  Alright. We’ll have Mandy put this image into the show notes so that people can see what you’re talking about.

MERRICK:  Can we put my counter image in there because his image doesn’t do anything except for show what JavaScript actually does?

[Laughter]

AJ:  Come over here Merrick, come a little closer.

[Laughter]

CHUCK:  Yeah. We’ll get them both in there.

JOE:  So, moving on to more questions and topics about jQuery, something relevant.

JAMISON:  Ender, Zepto.

CHUCK:  What are those? Are they just alternatives or they…?

JAMISON:  They’re things that try to be API compatible with jQuery, sort of.

CHUCK:  Okay.

JOE:  Are they trying to low dash jQuery’s underscore?

JAMISON:  Kind of…

AJ:  Exactly.

MERRICK:  No, Zepto is geared to work, like the pieces of jQuery that it can’t implement with WebKit, it lets that work, right? So the idea being, you could theoretically, in a huge majority of the cases, ship your app with Zepto and it’s a much smaller footprint in place of jQuery for mobile devices.

CHUCK:  Okay.

MERRICK:  Because there’s a lot of those methods to WebKit.

CHUCK:  Okay. The thing that I’m wondering then is, how big is the footprint? It says on the jQuery site, it’s 32k, metafile gzipped. Is that too big for mobile?

MERRICK:  No. That’s one of those things that different people have different stances on, you know? Zepto is only 8.4 kilobytes though.

CHUCK:  Okay. Are there any other fundamental, philosophical differences between the two, though?

AJ:  Ender doesn’t have docs. That’s a philosophical difference.

[Laughter]

JAMISON:  You don’t because it’s API compatible. When I want to do something on Ender, I look it up on jQuery.

CHUCK:  [Laughs] That’s like the ultimate outsourcing, right?

[Laughter]

JAMISON:  jQuery perfected the API, despite what Merrick thinks.

CHUCK:  There you go. If you want to know how this works, go to India.

JOE:  Does their docs just redirect to jQuery?

AJ:  No. They have some docs. They’re just not very extensive. 

MERRICK:  We’re also terribly misrepresenting Ender right now. Ender is like very much ‘compose your own library’. They’re not aiming to be API compliant per se. They very much want you to compose these micro frameworks into kind of a ‘build what you need’.

JAMISON:  And now that you can do that with Grunt.js and jQuery, maybe it’s not as important to have Ender. But I like that Ender throws stack traces that have line numbers.

[Laughter]

JOE:  Oh, man!

CHUCK:  We’re not going to let this drop, are we?

JOE:  What about Zepto?

[Crosstalk]

AJ:  I’ve actually never used Zepto.

MERRICK:  It’s like a WebKit version of jQuery. So, the functionality of jQuery that can be handled with WebKit, it just defers that functionality to WebKit. So it’s like, people use it often as like a mobile version of — I should say, an IOS/some Android browsers version of jQuery.

JOE:  Does it do anything that jQuery doesn’t?

MERRICK:  I don’t think so. I think they aim to try and be very compatible. I wouldn’t be surprised if they do have some things like touch events. Yeah, touch events is one obviously which is evident that they are trying to be very mobile target.

JOE:  Right. To me, that seems like a huge amount of evidence about jQuery’s just efficacy is the fact that any competing libraries are, at their very best, they’re trying to basically exactly duplicate jQuery about take one aspect and be better like size in the case of Zepto.

JAMISON:  Well, I mean if the API’s perfect, why change it?

JOE:  Yeah. And again, it’s like jQuery has — they came up with a really good idea when they started off and then they’ve kept that up. They haven’t stagnated and let somebody else say, “Oh, there’s something you’re missing.” And do it and then take over. jQuery is just only growing in popularity still today.

AJ:  There is one thing that jQuery doesn’t do particularly well that I wish that it did in terms of the API, it doesn’t do a good enough job of making DOM objects like regular JavaScript objects. Like for example, foreach is missing on DOM arrays.

JOE:  Hmmm, interesting. Can we segue into things we don’t like about jQuery now?

AJ:  Wait, I feel like that’s been the topic of the show.

CHUCK:  Isn’t that how we started? Yeah, that’s fine. Let’s go ahead.

JOE:  I don’t think I was doing that because I was defending it while you guys were hating on it.

[Laughter]

AJ:  I love jQuery, in a hateful way.

[Laughter]

AJ:  I mean, it’s a love-hate relationship.

CHUCK:  I love jQuery, down with jQuery.

JOE:  Yeah. To be honest, I’m pretty sure this whole podcast has just been AJ versus Merrick.

[Laughter]

AJ:  And it’s funny because I don’t like jQuery either but I’ll defend it. I don’t know. I like it.

MERRICK:  I like jQuery, you guys.

AJ:  But I just wish that it threw stack traces. [Laughs]

JAMISON:  I feel like your entire opinion of jQuery is based on this one experience you’ve had.

CHUCK:  I feel like that horse is dead and there’s no reason to keep beating it.

AJ:  He was probably shrooming when he had that experience.

[Laughter]

CHUCK:  So, one thing that I’ve seen with jQuery and this goes back to the modularity of it. It seems like everything is on that one object. You have your $ whatever. And so, you have $ajax and then $each and $FN and all of those. Then, once you find something with a selector then all of the rest of the API’s on that. I mean, you really only have two name spaces and it’s like the $name space and the object name space and that’s it. And so, at the same time, it is really convenient that you can just call whatever you need on it so, I don’t know.

JOE:  Yeah. I’m not really sure that I understand your point. Is that something you don’t like about it? Because you really didn’t make much of a case for something not to like.

CHUCK:  I’m not sure what my opinion is, if that’s a good thing or a bad thing. Let me put it that way.

JOE:  Alright. Well, I’m going to chime in with something I don’t like about jQuery. And that is they haven’t published and made, created a public API for writing custom selectors. To me, that’s a hugely powerful thing. And there’s been versions of jQuery where you could write customer selectors. But if you did, later versions would break it because you’re basically using a non-public or non-fixed API in order to do it. And so if you did that, I just thought it was hugely powerful to be able to write your own custom selectors. And then, certain versions that would work and certain versions that it wouldn’t.

MERRICK:  Yeah, that was kind of a promise that they weren’t sure if they wanted to deliver on, it seems like.

JOE:  Right. And what’s funny is like the current version of jQuery, if you take the same functionality it used to exist, I don’t know the version of it. But I think it was practically one version ago. What are we, on 1.94 now?

AJ:  1.92, I thought.

JOE:  So this is like in 1.84 or something like that.

AJ:  Let me check.

JOE:  You could get in there and you could see, for the selector, you could actually see four pieces of information like the index of the element you’re on, the entire set of the elements.

AJ:  1.90, sorry.

JOE:  And so you used to be able to see, all this metadata, this was easy the customer selector. And then, the current version, that metadata is actually broken, right? So like the current index, if you’re enumerating through your list and you select say 10 divs and you go through, each one will read that the current index is one.

MERRICK:  So one thing that I don’t like about jQuery, and it’s not jQuery per se. It’s more how people use it. I think it’s a lot of rope for people. And it encourages some bad habits like storing state in the DOM, for example. Things like that, that can tend to grow really unmaintainable in bigger apps.

JOE:  It’s fair to say that this is a problem with jQuery because its strengths are also its weaknesses. Making it so easy and so approachable is also a weakness because now it’s lacking in structure.

JAMISON:  I think one interesting thing to note is, I don’t know that people were super aware that was a problem before jQuery made it really easy.

JOE:  Right.

JAMISON:  Like these are problems that come from the evolution of JavaScript. I guess we’ve already talked about this.

CHUCK:  Yeah. But you see it in other languages too. I mean, I’ve heard it about pretty much any language out there that has features or functions in it that make it easy to manipulate things at a deep level. And when you make it easy, you make it easy for people to shoot their foot off with it.

JOE:  Right. If it doesn’t require discipline to get into it, then people will use it without discipline and cause problems.

MERRICK:  That’s really interesting point though, Jamison. I didn’t really consider that. That’s a really good point.

JAMISON:  It doesn’t make it any less valid that that’s a bad idea. It’s just that we couldn’t really do that, that easily before.

JOE:  Yeah that’s definitely true and they made it very easy. Their way of access to the data attribute is really slick. So, you can very easily store data in data attributes which is like, “Hey, you don’t want to store it in the state on the DOM because throwing it in line.” So here, you’ve got data attributes that not supported in HTML. And jQuery is saying, “Here, let me make it easy for you to write to them.”

MERRICK:  A by product of making the selector engines so easy too is that people tend to reselect the same elements over and over and over even though that can get very expensive instead of just storing it in the variable. So, just different things like that that having such a beautiful and simple API can tend to hurt people.

JOE:  And as a related thing their selector engine, the Sizzle Selector Engine, even though it’s simple to use, how it actually works is complex. And so, once you need to actually diagnose performance, it’s not the easiest thing in the world to diagnose a performance problem with a selector engine. Knowing that it’s back to front and not front to back is something that most people don’t know. And there’s no reason to learn that when you’re using jQuery for the most part until you have a performance problem. Then when you’re trying to diagnose it, most people would think front to back but it’s not. It’s back to front.

CHUCK:  Yeah. One other thing that I want to bring up that has gotten me in the past is not jQuery itself but just finding the right plug-in to do what I want. Most of the time, it’s not that I can’t find a plug-in that says that it can do what I want. It’s finding the right one out of the bunches that come out.

So, let’s say that I want some kind of animation on my page. There are a whole bunch of animation plug-ins. Some of them are in the plug-ins directory on the jQuery website and some aren’t. But then, figuring out what’s there, what they do, and whether or not it actually does what I want it to do, a lot of times it’s kind of hard because they’re not very well classified.

JOE:  Well, one thing to be grateful for that is, that scenario, like literally the only place that happens in JavaScript is with jQuery. With every place else, it’s just completely obvious what the right tool of the forty that’s available to you is, right?

MERRICK:  It’s a JavaScript problem you knew?

CHUCK:  [Laughs]Now, he’s trolling me.

JOE:  Yeah. I’m trolling you. Like that’s so ubiquitous. If you’re going to develop in JavaScript, you’ve got to be able to choose one out of 50 options. You’ve got to do that over and over and over again.

CHUCK:  Yeah. I guess the big thing was is that I guess I expected there to be more information in the plug-ins directory. Of course that’s changed now. The whole website’s changed. So maybe, it’s better. But that was a problem I ran into in the past. It’s like, “It does this.” And it’s like, “Yeah. But does it do it this way, that way, or that way?”

JOE:  I remember we had to do a carousel and we literally went through five carousels, actually implementing them in full. And then, ultimately had to tear down and implement another one before we found one that actually fit all our criteria because it’s so hard to know until you actually throw it on the page and start working and find out that, “Oh, this doesn’t work,” if you have these kinds of HTML and CSS wrapping in it.

CHUCK:  Yeah. And you go modify it or try and modify it and that doesn’t always work either.

JOE:  And people produce a plug-in and they produce very little documentation for it. It’s not like actually jQuery itself which is well documented. The plug-ins are very lightly documented at best.

CHUCK:  Yeah, that was a real issue, was that exactly. And I don’t really know how they could make it better. I guess they could require more documentation to get into the registry but then…

JOE:  It’s again, one of its strengths is its weakness. The fact that there are so many is great, we have options to choose from. But the fact that there are so many is a burden.

CHUCK:  Yep, absolutely. Anything else that we hate about jQuery?

JOE:  Come on, there’s got to be more.

AJ:  Sounds so harsh when you say that.

CHUCK:  I’ve heard some people complain that the API is too large. And so, kind of like the Zepto approach was it, or was it the other one?

MERRICK:  Ender.

CHUCK:  Ender? Where you pick the features you want and then it leaves the rest out?

JAMISON:  Well, now you can do that with the Grunt set up they’ve got too. Like I‘m really happy about that. I think that’s way cool.

CHUCK:  Can I get a link to that Grunt set up that you’re talking about?

JAMISON:  It’s on their Github page. But yeah, I’ll see if I can Google that for you.

CHUCK:  Alright. Well, let’s get into the picks then. Joe, do you want to start us off?

JOE:  I want to pick a couple of books this week. So, I’m going to pick the ‘Clean Coder’, which is written by Uncle Bob Martin. If you don’t know who Uncle Martin is and you don’t follow him and read and listen to what he says, then you’re stupid. Because Uncle Bob Martin is definitely one of the people in our industry that everybody should know of and at least hear what he says, whether you agree with everything he says or not. But he wrote compare books, ‘Clean Code’ and ‘Clean Coder’. And ‘Clean Code’ is about actually writing code and ‘Clean Coder’ is about being a professional developer. And so, I guess I’m picking the pair here but they’re just amazing books.

But in reality, in my opinion, if you are a professional developer, you should read these books. They should be a required reading. If we had a certification for this industry, then having read those books would be one of the requirements for being a professional developer. Everybody should read those books. They’re absolutely full of stuff that has nothing to do with whatever. They’re not specific to any given language. They’re just about development in general. Especially ‘Clean Coder’, about being a professional developer, really makes — it’s full of stuff that every developer should know about and should, in my opinion, follow.

My second pick is going to be the novel, ‘Old Man’s War’. Just finished that up this last week and that was a really super, super duper really. Not just super, it was super duper.

[Laughter]

JAMISON:  The highest recommendation.

JOE:  Yeah. That’s kind of like the triple dog dare of super duper, accolades.

CHUCK:  Superlatives.

JOE:  Yeah, superlatives. It was a super duper novel. I really enjoyed it. I had a great time with it. I went through it very quickly. So, I’m going to recommend that novel. Pick that.

CHUCK:  Awesome. Merrick, what are your picks?

MERRICK:  The first pick I have is the Human Connectome Project. It’s this really awesome project where they’re mapping — they’re essentially going to be able to map the human brains the way the information is flowing for about 1200 people. And they’re going to be releasing the information publicly for people who are interested in informatics and want to try and help make connections about that information. It’s a really cool project and it seems to be, from my perspective, something pretty awesome. And I’m really excited about where the medicine industry is going with that kind of stuff.

The second pick that I have is a project called Node-Madge. And it’s really great if you need to do like static code analysis for AMD or Common JS module systems. So, you can get awesome graphs and find out circular dependencies and just do lots of interesting information out of your AMD or Common JS driven projects.

And then lastly, is Hype Machine. It’s a website that just decides what music is essentially generating the most hype music on the web. And granted it’s often a lot of DubStep, but it’s really great for finding new music. It’s really cool.

JAMISON:  Hey, it doesn’t pick the hype. It just plays.

[Laughter]

MERRICK:  Yeah. It doesn’t pick the hype. It just calculates it.

JOE:  Does it pick Gangnam Style about 80% of the time?

MERRICK:  No, no, no. It doesn’t use YouTube. It essentially aggregates a whole bunch of blogs and then gauges the popularity of the different posts on those blogs.

CHUCK:  Cool.

MERRICK:  To tell you what the hype is. So yeah, those are my three picks.

JAMISON:  Is there any scientific evidence that DubStep is the best genre of music?

[Laughter]

MERRICK:  Or the most popular.

JAMISON:  Which is the same, right?

MERRICK:  Whoa.

[Laughter]

CHUCK:  Jamison, what are your picks?

JAMISON:  I just have one. Today is book day. It’s called ‘Nothing to Envy’ the lives of ordinary North Koreans. I don’t know why. I just have this morbid fascination with North Korea. It’s just such an other worldly place. And it’s a bunch of stories collected from interviews with people who have defected from North Korea. And it’s written in this sing-song kind of, it reads like a fable but the stories are true. I don’t know. It’s hard to explain. But it’s really interesting. I’m really enjoying it. I’m like half way through. So, it’s great. It was like $10 on Amazon.

JOE:  Is it highly depressing? Is it like, “I can’t believe it!”

JAMISON:  Well,maybe it gets depressing later. It hasn’t been too depressing yet because the people don’t really know anything about their circumstances. They’re just in them, kind of. It’s really interesting. But yep, that’s my only pick.

CHUCK:  Alright. AJ, what are your picks?

AJ:  Well, I got some picks today. First off, I want to just give a shout out to everybody over six foot two and say, “I feel ya!” And me and my friend have started an apparel company for the tall and slender. Our website is currently MensMediumTall.com. And we got our initial quote back from Korea on what it’s going to cost to manufacture T Shirts. So, we’re going to, within the next month or two, give it a kick-starter and see if we can get enough presales to make an order, do the order. And if we get enough of these tall people aggregated together, then we’re going to go on and do a different style of shirt the next run, and so on and so forth until we have a complete solution for people who are tall or have long torsos.

My next pick is a rave. I found out about the Ubuntu phone. And I almost put my iPhone on eBay immediately but then I found out that I won’t be able to get the Ubuntu phone for another couple of months. But it’s basically what you might have imagined. Imagine if Google and not like new Google, but old Google, the Google that created Gmail. Imagine that Google creating a phone and how awesome it would be. And imagine that the phone, the operating system was designed for a phone that’s as powerful as the phones are today. Bam! Ubuntu phone. And there’s — let me give a link to that so you can watch the video.

It’s kind of funny because Ubuntu is so copying MAC these days. I guess it goes a little bit back and forth, right? But the video is very MAC-esque, you know. With the white backdrop and like the serious face and the, “This phone is going to be the answer to so many people’s dreams.”

[Laughter]

AJ:  I also want to pick Dance. I’m a big fan of dance, particularly Interpreted Dance, and more specifically Jamison Dance.

JAMISON:  Oh, my geez!

[Laughter]

CHUCK:  I knew you were going there but I couldn’t stop the train wreck.

[Laughter]

AJ:  I’ve always got insightful thing to say and the stuff he posts on Twitter is always really cool articles and what not. So I just want to say ‘thank you’. It’s been great.

Also Aaron Frost, he did a presentation on Motion Capture in the browser that blew my mind. I didn’t even realize that the Git user media stuff was finally implemented. And he’s also writing part or all of the JavaScript ECMA 6 and his sense of humor is hilarious. It’s going to be a great read not just technically but also just the way he goes through it.

And then lastly, I’m going to pick my own blog because I’m trying to get some followers and what not. I’m trying to get a series together on how to become a web developer starting at day zero. Like, you can barely figure out how to open up Internet Explorer to you’re a web developer. Of course, opening Internet Explorer is explicitly not part of the program.

CHUCK:  Alright. Well, I’ll go ahead and do some picks here. My first pick is, I ordered these things off of Amazon. I’m an Amazon junky, I have to say. I have an Amazon prime account. And I have these plants sitting in my office that I water rather infrequently whenever I remember. And so, I bought these ‘Thirsty Lights’. And so, you just stick the end into the pot and then it will tell you if it’s too dry. And yeah, so I’m looking forward to trying those out and maybe my plants will look less dead because I’ll water them when I see that the light is on. So that’s one pick.

And then the other pick that I have is, I have an iPhone 5 and it has that lightning connector. And the problem with the lightning connector is that no one makes anything with a lightning connector on it.

JAMISON:  [Chuckles] It is a problem.

CHUCK:  Anyway, I think last week I picked the Power Mat, and one thing that I ordered online was this little battery pack that charges on the Power Mat. But of course, it had the 30-pin connector. So, I got one the adaptors that goes with it, and I’ll put links to both of those in the show notes. And so now, I can, when my phone is nearly dead, which happens when I’m listening to podcasts all day. I can just plug that battery pack in and it charges it up pretty darn quick. Faster than I’d get off of the plugging it into the wall. So I’ll pick both of those and we’ll wrap up the show.

So thanks for listening. Go leave us a review on iTunes and we’ll catch you all next week.

AJ:  One last thing. Merrick was right, I was wrong. The reason I wasn’t getting stack traces was because of something I was doing. It’s not jQuery’s fault. Everything I’ve said is a lie.

CHUCK:  The cake is a lie.One other thing that I wanted to bring up. Joe, didn’t you do a jQuery course for…

JOE:  Pluralsight.

CHUCK:  Pluralsight, yes.

JOE:  Yeah. I wrote Pluralsight’s advanced jQuery course. They’ve got a basic jQuery course, and then, my course which is an advanced jQuery course. If after listening to this blog, you want to know more about jQuery, I highly recommend Pluralsight’s courses. They’re fantastic. They do have a free trial you can sign up for. It’s an excellent website and a great way to learn about programming.

CHUCK:  And you get to learn it from somebody you’ve heard of.

JOE:  There you go!

CHUCK:  Alright. Well, that’s it. We’ll end the show. Thanks for listening. We’ll catch you all next week.

x