Dave McFarland – jQuery for Agile Prototyping

Sean Carmichael

February 17th, 2012


[ Transcript Available ]

Technologies are often misunderstood at their outset. This misunderstanding leads to a lack of adoption. This lack of adoption leads to the technology not reaching its full potential or not being utilized in useful ways. This is essentially what happened to JavaScript. Detractors said it wasn’t a real programming language, and its capabilities were ignored.

Dave McFarland notes that Google’s use of JavaScript in Google Maps makes a lot of people take notice. People began to see what you could do with JavaScript and began exploring. The emergence of JavaScript libraries, such as jQuery, has further expanded the reach, making complex programming tasks much simpler.

Dave is a web developer, author, and teacher. He says that for designers, jumping to the programming side is easy when you have libraries and plugins. JQuery uses a familiar syntax that designers know from CSS. Creating rich, interactive prototypes becomes a reality for designers. Even though the code may not be 100% production-ready, it greatly increases the speed of the whole process. Listen to Jared Spool’s interview with Dave to pick up tips on using jQuery for Agile prototyping.

Check out Dave’s full-day workshop from UX Immersion 2012, now in our All You Can Learn Library.


UX Immersion 2012 - Agile/Mobile

Recorded: January, 2012
[ Subscribe with other podcast applications.]

Full Transcript.

Jared Spool: Welcome, everyone. Today on the SpoolCast, I have with me Dave McFarland, who is going to be speaking at our upcoming UX Immersion event, which is going to be in Portland in April, April 23rd through 25th. And Dave is going to be giving a full-day workshop on JavaScript and jQuery for designers. And I got a chance to see Dave present at the WebVisions Conference in Portland.

And if you are thinking that you might want to learn how to program in JavaScript and jQuery so you can be doing prototyping and other great things, this is absolutely a fabulous workshop. He starts at ground zero and just moves right up, and you’re going to love it.

But today we’re going to talk about what it’s like to be programming as a designer, and all those things. And I have with me here Dave McFarland. Hey, Dave.

Dave McFarland: Hi, Jared.

Jared: So, how long have you been using JavaScript and the likes?

Dave: Yes, well, let’s see. I started learning JavaScript I think maybe 13 years ago, no, maybe about 14 years ago, so in the very early days. And I’ve been teaching it for about 11 years. So I’ve pretty much seen the entire evolution of the language from its early incarnations for making little sprites appear all over the screen, or annoying little tickers at the bottom of your status bar, to what we have today with JavaScript and kind of advanced web application functionality that JavaScript provides.

Jared: I’m realizing I don’t really know the background of JavaScript. When did it first show up? Did it live in places other than browsers before?

Dave: Well, it was, you know, introduced by Netscape, I believe in 1995, though I’m not totally sure if that’s true.

Jared: Not too long after Netscape had its browser in the world, so it wasn’t there for the first versions, but it did appear pretty soon after that, then.

Dave: Yes, and initially it was called LiveScript. And apparently the legend behind all this is that somebody in marketing talked to somebody at Sun Microsystems, who were pushing their Java programming language, and that was seen as the next great thing that was going to revolutionize computing. And they said, wow, that Java has a lot of buzz behind it, so maybe we should ride its coattails. And somehow they made some sort of agreement with Sun to sort of use the name, so JavaScript was named after Java, even though in reality it’s not based on Java.

There are many differences between the languages, so it’s not really Java. So it’s caused endless confusion, especially for my students. That’s one thing I teach immediately, like the first day of a JavaScript programming class, is that JavaScript is not Java. So when they have their job interview, don’t accidentally say they’re Java programmers, because not only will they confuse their employer, but they might end up having to do some programming that they don’t know what it is [laughs] .

Jared: Right, yeah. So, is the JavaScript of today remarkably different than those first versions?

Dave: Yeah, certainly. I mean, there’s been kind of a convergence of things that have happened to make JavaScript now really one of the premiere programming languages. Not just on the web, but really as something worth learning, even just as a technical thing.

So in the early days, I mean, first off, not every browser had it. So basically Netscape created it, it was an open standard, so it was available to others. And Internet Explorer developed their own variant called Jscript. So we suffered through a lot of browser incompatibilities where JavaScript worked in completely different environments, and so programming it was a bear. You’d basically have to learn all the nuances of the different browsers and then write code that would basically work depending on which browser was looking at your web page.

Jared: Oh, and that never happened with anything other than JavaScript.

Dave: [laughs] Right, yes, never. So that was like a huge thing, and there were fundamental differences in just kind of how you would do basic JavaScript things like events, which is where the browser will react to something that a person does, like clicking or mousing over something. And there were two fundamentally different ways to do it, whether you were programming for IE or for other browsers.

I think another thing that happened is that there was just a lack of an imagination, that people didn’t really know what JavaScript could do. So there were a lot of dinky little things in the early days, sort of cutesy visual things that weren’t really about usability. In fact, if anything probably were negative or negatively impacted the usability of a site. Things like the little sparkles that would trail your cursor as you moved your mouse around.

And so I think people didn’t know what it could do, so they just did a lot of sort of glitzy little things that weren’t very useful. And I think it really took Google to step up with Google Maps for people to see that, wow, JavaScript can do these really amazing things that improve the usability of a site, in fact, are fundamentally important to how the site works.

Google Maps is such an incredible example, because it draws in a lot of different technologies, Ajax being one of them, so that you can get this kind of real, immediate interactive feel where you were just grabbing a map and scrolling across, dragging it across your screen.

And for those who are listening to this who are maybe younger and did not live in the days before that, we had other maps like MapQuest, where basically you would click, and then you would wait, and the screen would refresh, and you’d get a new chunk of a map. And then you would click again, and then you would wait, and the screen would refresh, and it was a very kind of staccato rhythm, not a very fun experience, and not very interactive, and certainly slow. And I think Google Maps really changed people’s perspective on how immediate the user interface for websites could be and how fast they could react to users.

Jared: Yeah, I remember when Google Maps came out, it was all abuzz. And that was really when this idea of being a front-end developer became fashionable, that you would actually be developing code to run on the browser that wouldn’t be running on some server in the background. And it was a different language, and you had different constraints, and you had all these synchronization issues you had to worry about. So that’s about the time when that really became very popular. If you could do that kind of magic that Google Maps did, you were really desirable in the marketplace.

Dave: Yes, and I think another thing that Google did is, it made JavaScript OK for computer scientists. Like, I think there was always a prejudice against JavaScript as not being a real programming language, not having a lot of the things that you’ll find in Java or C++, or other traditional programming languages. So I think there was not a big pool of talent exploring what JavaScript could do, because there was sort of a prejudice that it wasn’t a real language, so people were spending their times with server-side languages and things like that. And I think once Google said, look, we’re Google, we know technology, we’re using JavaScript, people really sort of took notice.

And then I think that’s really been part of the rebirth of JavaScript, is all of these really smart programmers jumping on board with JavaScript and doing really amazing things with it, and, you know, making money [laughs] with their web applications and their programming skills.

Jared: I’m interested sort of in the timeline, because all of a sudden, designers are talking about using JavaScript. I’m meeting more and more designers, there’s this whole discussion that’s going on about designers that can code are more valuable in the marketplace. So this shift from developers using it to do production code to designers using it to do things like prototyping, that’s a recent thing.

Dave: Yeah, yeah. And I mean, that owes a lot to the emergence of JavaScript libraries. Things like Prototype and script.aculo.us, or MooTools, and jQuery, of course. JavaScript library is basically a JavaScript program that simplifies lots of common programming tasks, web programming tasks. In addition, JavaScript libraries fix these cross-browser incompatibilities. So basically, using a library you can program one thing, and it’s going to work in Internet Explorer, and it’ll work in Chrome, and it’ll work in Firefox and Opera, because the library sort of takes into consideration any of these differences that these browsers have.

And because of that, the sort of technical barrier of entry to programming is greatly reduced. I mean, with jQuery you can in just, you know, a couple lines of code do some stuff that’s really amazing that if you didn’t have jQuery you basically would have to write hundreds of lines of code and have a really deep knowledge, not just of JavaScript, but of browser differences.

Jared: So having these tools really simplifies the programming for something like a Prototype. So if I want to mock up, let’s say I wanted to make a message-handling thing, like a Gmail like interface for messages in my application. If I want to mock it up so I have new messages, and composing a message, and sorting the messages and stuff, now that I have these libraries, that becomes much easier to do, right?

Dave: Yeah, yeah. So, jQuery in particular sort of has a mission to make JavaScript programming easier for web designers. So a lot of the ways that you interact with jQuery will be familiar to web designers. For example, a lot of what JavaScript programming is about, especially UI programming is, taking elements on a page and changing them.

Maybe animating them, or hiding them, or showing them for example with a tabbed panel, you’ll have lots of different HTML elements on the page, but only some are visible at one moment, like the one tab that you have selected. You can click on another tab and you’ll see another panel. So basically, you’re hiding and showing HTML elements.

And jQuery uses CSS syntax, or cascading style sheet syntax, for selecting those page elements that you’re going to hide and show. So if you’re a web designer and you know CSS, then jumping into jQuery, there’s all this familiar terrain that you can sort of draw your knowledge. It’ll be familiar to start using it, because it’s talking the language of CSS that you understand.

In addition, it just has these helper functions. Things like Animate, which will animate something on a screen, or make it fade out or fade in, which are really rather complex things to do programmatically. But all that technical difficulty is hidden behind a single function, and one little line of code does this cool stuff. And so it’s really much simpler for designers just to sort of jump on board and start doing pretty amazing things.

Jared: Yes, the folks that I’ve seen who are now rocking the prototype world, really it almost felt like they had this huge fear about it. Like, they were going to put on a blindfold and just jump off into the deep end. And then they got in there, and they’re like, hey, wait a second, this is actually pretty easy. Why do you think there’s all this sort of mysticism about how complicated it is?

Dave: Well, I mean I think it traditionally was complicated. I mean, JavaScript programming was hard. So I think without a library like jQuery, jumping into JavaScript programming is really, really, really complex. When I was approaching my publisher, O’Reilly, to write the first edition of my JavaScript book, you know, they wanted me to write a JavaScript book, and I said, “well, I’ll write one, I love JavaScript. But I’ll tell you, I don’t want to do it unless I bundle in a whole discussion about a library as well.”

And they are like, “why would we do that, you know, JavaScript is the hot thing. We don’t want to pigeonhole it into a single library.” And I said, “well, I could write a 1,000-page JavaScript book — in fact, there are 1,000-page JavaScript books — that by the time somebody was done reading it, they wouldn’t be able to do that much. You know, they would know a lot about different web browsers, and they know a lot about JavaScript. But getting actually down to creating the code for really incredible user interfaces would be another book, because it’s so complex.”

But with a library like jQuery, you can skip so much stuff with JavaScript and jump into doing really powerful visual user interface design. When jQuery was really starting out and getting a lot of traction, there were a lot of JavaScript programmers in the blogosphere who were poo-pooing it, or saying, “yeah, it’s a great place for a beginner to start. And, it’s kind of cool, but it adds all this code, so if you just know JavaScript you’re good.”

Within six months, the majority of those bloggers were changing their tune and essentially saying, you know, jQuery or one of the other competing libraries are so incredibly useful and make development so much faster that even these people who were hardcore JavaScript programmers started using libraries like jQuery because it really just cut their development time by tenfold.

Jared: And so, the things that jQuery does, as I understand it, there’s basic jQuery, and then there’s plugins, right? And the plugins aren’t created by the same people who created jQuery. They’re like open source, people are doing them all the time. Have I got that right?

Dave: Yeah, exactly right. I would say that’s another reason why jQuery has so much traction, is that not only do we have jQuery, which makes programming JavaScript much simpler, but even that can be hard. I mean programming is programming. There’s a lot of stuff conceptually in it that isn’t always easy for a designer to understand–you know, even things like variables. Certainly things like loops can be complex things for a designer to handle. So given that you’ve got jQuery–even that might be a little bit hard.

So the next thing that makes jQuery so enticing is that there are other programmers out there creating these Plugins, which range anywhere from a simple little thing for styling tables to really complex things like tapped panels or a calender widget for selecting dates in a form–for example, like a sign-up form for making reservations. And with these plugins, a designer can really just include the jQuery file, which is a JavaScript file, include the library file, and then add a tiny bit of code and suddenly transform their entire page.

So you’ll see a lot of designers who really don’t even consider themselves JavaScript programmers at all, being able to leverage jQuery, plugins and a tiny bit of code that they’ve learned to build fully functional–either a prototype or a complete website with lots of kind of interactive functionality.

Jared: It seems to be really cool, because once you get a prototype running that sort of represents what you intend to build and you can sit down with your developers, and you could say, “This is what I’d like to see us build,” right? It doesn’t even matter if the code you produce as a designer is production-ready. It’s no different than if you gave them some sort of specification or some hand sketches or something done in Photoshop, from the perspective of the developer, because they’re going to start from scratch with things they need to do for the production-ready environment. But the fact that you can create a prototype that shows what you intend and shows all the interactions–that to me seems really, really powerful.

Dave: Yeah. And I mean, you could develop something that you just sort of hand off and say, “This is exactly what I want.” And they could then, if they felt like the code wasn’t good enough, they could easily optimize it or rewrite it to fit you know, the technical standards of the organization. But, yes, we are definitely moving far beyond the days where, “Here’s my Photoshop files, guys. Why don’t you flip through and see this is the next thing that happens on the page when you interact with it.”

I mean designers can build fully interactive prototypes. And now it’s becoming much more common for designers to not even think of Illustrator or Photoshop as the beginning grounds for web design, but actually just jumping into a text editor and building HTML as the starting point for their designs.

Jared: Yeah, I was talking over the weekend with Nathan Curtis, who’s one of the designers at a firm called EightShapes. Two years ago everything they were doing was resulting in PDFs. They’d create these very ornate PDFs, they love InDesign, and they were creating these very ornate PDFs that described everything in the application. And he taught himself very quickly JavaScript and HTML and CSS.

And now he says he lives in TextMate all day and he produces code. And they get ideas done five times as fast. The developers love it because they can go in and they can look at what he did and they know the dimensions of things and they see the interactions of things. Even if they have to convert the code for their own environment, they’re able to pick that up really fast.

I was with a team and we were doing sketches, and then we went home for the day. We came in the next day, and one of the guys had worked for a couple hours and he actually had a rough working version of what we had sketched out. I asked him how long he’d spent on it, and he said, “It was only about an hour, because everything we were doing was already ready-made in terms of plugins and base functionality.” I said, “Have you been doing this for a long time?” He says, “No, I just picked it up a few weeks ago. I just got into jQuery for the first time. I’ve never written any programs before in my life. It’s just so easy.” Do you think that’s typical or is that unusual?

Dave: Oh no, I hear that all the time. It’s incredibly empowering for technically inclined designers to jump over that hurdle where they feel like they can’t program to being able to do really, really amazing things. I see a lot of people sort of say, “Oh, these plugins, what a handicap they are. Basically you’re not learning the underlying technology.” I see all of these kind of enabling technologies as really a starting point for real programming. I see a lot of people who sort of–they get into jQuery. They start using the plugins. They’re learning more and more about JavaScript and jQuery, and at a certain point they become dissatisfied with what plugins can do, because they now grok the entire JavaScript world.

They start programming their own. They start making their own plugins. Or they’ll take a plugin and they’ll rewrite it. I think this sort of entry level enabling technologies are amazing. They help generate a new breed of programmer that we wouldn’t normally have, because the barrier to entry was so high in the past, and now it’s so low that people can get really jazzed and they start to ramp up their own skill set in a way that’s really comfortable for them. They become better and better programmers.

Jared: Yeah, I mean this makes perfect sense to me. Do you have a Trader Joe’s near you?

Dave: Oh, yeah.

Jared: We have them here and one of the things that I’ve recently learned is that you can do amazing things with Trader Joe’s stuff, right. One of the first recipes I learned involved taking their tapenade, which is this mixture–I don’t make tapenade. It’s got…

Dave: Olives, right?

Jared: Sometimes it’s olives, vegetables, and–I don’t know. It’s just this sort of relish, I guess, is what you would think of it as. You take a jar of that and you put it in pasta and chicken, and all of a sudden you’ve got this amazing dish. It’s a restaurant-quality dish. And the thing was, when you were talking about plugins for jQuery, I was thinking of the same thing. I actually don’t know how to make tapenade, but I can actually delight my family with this amazing dish that I throw together after work in about 10 minutes for no effort. And they’re like, “Oh, my gosh, this is awesome.” And I’m like, “Yeah, I emptied a jar of tapenade…”


Jared: “…whatever that is.” That’s like programming with plugins. I don’t know how the plugin works, but it does everything I need it to do, so who cares?

Dave: Right, right yeah.

Jared: Frankly, I don’t know how the processor moves bits around but I can get it to do my email. So you know, I don’t seem to be handicapped because I don’t actually know how that’s working.

Dave: Yes. I don’t know if you saw this article on the Inc website for Inc.Magazine. I think it was January 2. They had an article, “The Value of the Designer Who Codes.” It’s about having designers who know how to code, or engineers who are designers as well. They talk about Quora, a social answer network. A lot of the people there are designers and engineers, and they don’t use Photoshop. They use text editors to code and design, and since they’re all sort of into the technology, they can all talk. They’re all on the same page.

You don’t have that same kind of communication divide that often happens between a design team and an engineering team when you’re so separated by your disciplines. And I think that’s another really neat thing about people who learn jQuery, learn JavaScript. Even if they don’t go the full distance to become masters of that and programmers, once they understand it, they can talk it. They can talk to engineers, and they can talk to technical people. And the ability to sort of have a dialog around UI stuff, especially the technical parts of implementing UI stuff, it really helps the whole process of building web applications.

Jared: I’m hearing from our clients–and you can tell me if you hear this–is that when you have some organizations that have sort of not been very sophisticated on the front end because the designers don’t know how to code and the back end folk haven’t done that much with front end development. So they tend to have like that old MapQuest interface, where you click and you wait and you click and you wait.

And then a designer starts to do stuff with just some prototypes in jQuery, and they whip it up really fast. That actually sometimes motivates those back end guys to actually say, “OK, if this guy can do it we should be able to do it.” And then suddenly the whole–you know what they say, a rising tide raises all boats. Everybody has suddenly got more front end skills, and they’re realizing that this isn’t as complicated as we thought it would be.

Dave: Yeah, no, I think that’s an excellent point, because I think we talk about maybe designers feeling intimidated about programming. I think there are back end people who are intimidated or at least don’t understand the front end experience. They don’t understand the interactive experience. Things like PHP is not an event-driven programming language. It’s not about somebody clicking on something, or moving their mouse, or interacting with different page element.

So there’s a really different mindset in those types of programming. I think as server side people get more introduced to jQuery and to plugins, for them that demystifies the front end programming experience. You’re bringing in more talent. You’re bringing in these back end programmers, who are now like, “Wow, I get it. I can do this.” And they learn JavaScript, and they start doing really cool stuff as well.

Jared: Yes, I think that there’s a lot of interesting stuff that’s happening here, and I’m really excited about it. You and I were talking last week about the workshop that you’re going to be doing at the UX Immersion Conference. I was surprised at how much you’re packing into this day, where basically people who just know a bit of HTML, and CSS and a little bit about how the DOM works and stuff–they can go from just that knowledge to doing all these cool things in JavaScript and jQuery because it is really that straightforward.

Dave: Yeah, yeah, no, I mean at the end of the day, people can start adding all sorts of interesting user interface elements. The ubiquitous slider that we now see on home pages, where you’ve got some picture and content, and then it — zoom — slides away. There’s another picture, more content, and you can click and dive deeper into the site. That’s like all over the place. And with jQuery, there’s a variety of plugins to help with that. And in my workshop, I’ll show one of them. Really with some very simple HTML and this plugin, you can put that pretty jazzy effect right on your home page in a matter of minutes.

Jared: That’s just amazing to me. It’s great. I mean once we get prototypes so effective it really does give us a way to talk about our designs. There’s an old saying which is talking about design is like doing interpretive dance about jazz.

Dave: [laughs] Right.

Jared: And having a design that you can actually play with, that you click on things, you can see what it does next, and you can sit down next to your developer and you can say, “OK, this is what I want to have happen.” They can take the mouse and they click on it and they can see what it does next, and they go, “Got it.” That’s got to speed things up by light years.

Dave: Yeah.

Jared: Though I guess light years is a distance.

Dave: Yeah. So maybe not light years but light…

Jared: Light something.

Dave: …something.

Jared: Yes. Some unit of speed.

Dave: Yeah. Programming person-hours.

Jared: Yes. [laughs]

Dave: And I think one of the things is when you can rapidly build an interface, you can test that interface and innovate. And I think what we’re probably going to see is because of things like jQuery, where we can rapidly throw up an interface, we can test it, we can view it and we can imagine the next step, we’re going to see a lot of really interesting evolution of user interface design and usability patterns that’ll come out of the ease of use of a lot of these JavaScript libraries.

Jared: Yeah, I’m really looking forward to it. And I’m looking forward to your workshop. I want to come out being a Ninja JavaScript coder.

Dave: All right. I will do my best to allow you to be a Ninja.

Jared: OK. Awesome. David, thank you very much.

Dave: All right. Thanks, Jared.

Jared: If you guys are as fascinated by this as I am, then you’re going to want to join David in his full day workshop at the UX Immersion Conference. It’s going to be in Portland April 23rd through 25th. You can find more details about that by tootling around our website at uie.com. There will be a link to the conference there. And once again, as always, I want to thank you all for encouraging our behavior, and we’ll talk to you next time. Take care.

Add a Comment