Dustin Diaz on Javascript and coding at Twitter

Dustin Diaz talks about the shortcomings of jQuery, explains how object orientated coding can help your javascript and discusses testing your code.

Paul Boag:
So I’m being joined by a very jet lagged Dustin Diaz. Hello Dustin how are you feeling mate.

Dustin Diaz:
Um still waking up.

dustin diaz

Paul B:
Just give your presentation at Future of Web Apps and immediately you were grabbed for an interview then immediately after that grabbed for another interview. So if you’re totally incoherent we will completely understand.

Dustin:
Yeah. No problem. That’s the way I roll just being incoherent all the time. I’m surprised anyone makes any sense out of what I’m talking about.

Paul B:
Well obviously some people do. So just, though you have been on the show before. Right in the early days.

Dustin:
Yeah it was episode 15 or 16 or something like that.

Paul B:
Unbelievable. That’s a long time ago. Yeah. So you were working at Yahoo! then.

Dustin:
Yes. 2006.

Paul B:
Yeah that’d be about right.

Dustin:
And then after that I spent about two years at Google from adwords to gmail and now I’m at Twitter for the last 5 months.

Paul B:
Okay. So how’s life going at Twitter? Are you enjoying it?

Dustin:
Oh Twitter is awesome. Twitter is such a great place to work. You can make such a huge difference. The team is pretty small. We have about 3 frontend engineers so we’re all highly worked but in a really good way. And you can actually ship out code.

Twitter website

Paul B:
Which is satisfying.

Dustin:
I’ve literally had both ends of the spectrum. From Yahoo! which is a very top down oriented place. When it comes down to it no one can make a decision. The top makes it for you. So you can ship something that way. It’s not always fun when you’re the developer. But going from there to Google. Google is like a huge like giant breath of fresh air. However the only problem with that is the opposite. It’s very bottom up. So it was sort of overly democratic where I was happy to get a voice in but everyone had a voice and you had to like join your voice in with your co-worker and with everyone else that’s trying to get the same goal. But everyone is thinking something different. So Twitter, it’s just, everyone just ships stuff. It’s a very magical place. Although it’s a little chaotic sometimes!

Paul B:
Stuff gets done.

Dustin:
Yeah stuff gets done. Piles and piles of jQuery.

Paul B:
So the plan for this interview, just so you know, is gonna start with me asking dumb questions as the non-developer in the room. Then we’ve also got Paul joining us. Hello Paul

Stanton:
Hello.

Paul B:
He’s going to ask the clever questions. So no pressure there Paul.

Stanton:
Oh I don’t know about that. I’ve just been dragged in because I’ve written a couple of lines of jQuery before.

Paul B:
You’re techie.

Stanton:
Well okay I’ll take that.

Paul B:
Let’s start with some fundamentals. There are a lot of people out there like me, alright. I’m a designer and I’m using jQuery to do the basic stuff that I do for most of my client sites and maybe freelancers listening that are doing relatively small scale sites. Now, brilliant talk. Really enjoyed it but you did compare jQuery to cocaine. I was picking up this general theme that you’re not a great fan of jQuery. What have you got against jQuery?

cocaine

Dmitriy Aseev, Shutterstock

Dustin:
There’s nothing against it. As far as I’m concerned, and the rest of the world they won. So now it’s all about fixing it and I don’t think it’s a matter of fixing jQuery I wouldn’t change anything about it because it has one goal in mind and it does it really really well. It allows you to get stuff and it allows you to do stuff with it. Pick out some elements attach and event to it and they do stuff. It flys across the page. It can make an AJAX request, toggle a class name. Change the colour of something. Set some HTML. It’s a utility to help you get basic jobs done. But it shouldn’t be the way you author code. Although any other way with jQuery would look weird. It’s kinda this paradox of like do I use it or not? It’s like staring at a pile of cocaine. It looks pretty good. I wanna do it. Just for the record…

Paul B:
You’re digging a hole here Dustin (laughing).

Dustin:
I just wanna I’ve never done crack cocaine or any kinda, I don’t even know what types there are…

Paul B:
What was it you said? Yeah “One line of it and you’re hooked” it the premis of comparing it to cocaine. That was my experience with it. I thought wow this is like CSS I can do this.

Dustin:
Yeah it is like CSS. You select something…it has a selector engine. So I think the most important bits of it is basically any other new framework beyond this or any other new library or utility must have a selector engine in it if you want to get stuff done. Because it’s just a pain in the ass to use typical DOM methods to get elements by tag name and get element by ID. Luckily enough jQuery open sourced it’s selector and contributed it to the DOJO foundation. It’s called Sizzle if you didn’t know that.

Paul B:
No I didn’t.

Dustin:
It’s not owned by DOJO but it did contribute to it. I’m pretty sure it’s under MIT license. I’m not really sure how DOJO and John Resig’s, how they worked out license, but check that out because you can get stuff with it.

Paul B:
Where do you…I mean you use jQuery at Twitter so where does it fall down for you? Obviously there is some frustration there and I’m not entirely clear where.

Dustin:
Well when I first joined Twitter my initial thoughts were to get rid of it because it was promoting a lot of bad script. You have to share this code with everyone. You write it. Everyone writes it. It’s kind of a mess. There was no organization to it really. It’s not an organization thing and when we say framework I literally think of something that frames the way you work and it’s not good at that. And that’s why I recommended either if you’re gonna use jQuery use Dan Web’s Low Pro which has a proper class based system. You can inherit things. You can have classes. You can do sub-classes and you can test the code a lot easier rather than using jQuery’s plugin architecture. Which is not entirely broken but if you’re going to have a whole web app. See it’s the difference between having a web app and just doing your blog or just doing like basic things to, I don’t know, just building a web page. Just toggle this toggle that. It’s not a big deal.

danwebb.net

Paul B:
So it depends on the scale to which you’re using it is what I’m picking up here. If you’re building something that’s a complicated javascript driven web app then it’s going to create problems for you. But if using on you blog or whatever then it’s probably the right choice.

Dustin:
Yeah. If you have more javascript on your page than actual HTML.

Paul B:
Right you’ve gotta expect a lot there with jQuery. Yeah that makes sense, that makes sense. The other area that I was interested in, just to clear up, this is really designer ignorance here but I figure there are other ignorant designers listening to this as well. There are a few words that are thrown around…Don’t shake your head Ryan. Ryan’s been doing the sound and he’s shaking his head in disgust at me. There’s a few terms that are thrown around a lot that are never properly explained as to how it makes a difference. One of them is this thing about object oriented javascript. That people talk about a lot. As a designer that has to do a bit of javascript, right, which is like a developer doing a bit of design, it’s an abomination to all creatures…I’ve never got my head around object oriented coding. What are the advantages of it? Why should I be doing it? Why should I care?

Dustin:
So you’re asking more of a software design question.

Paul B:
No I’m asking it in terms of javascript.

Dustin:
Object-oriented programming builds into a language and javascript is one of them. The reason why I keep mentioning that it is one is because it’s been highly disregarded and people say it’s not one. Which is really weird because it is. It’s been put down that it’s not a real language, you know, if you want to do real development it has to have strong types. It has to have a proper grammar based, class based system. Where you actually say the word class. Javascript is flexible enough where you can literally call a function or you can say new function and it becomes this whole instance of this what people call classes. So as a designer, the reason why I think Object-oriented programming is possibly important is because designers care about sort of organization I suppose. You organize a site. You want to organize your code to. You organize your CSS. There’s no why you should just not pay attention to your javascript. Like I said it depends on the scale of it. Some designers, they don’t have to care right? They have other engineers that do it for them. But if they’re going to write it and they want to make it organizable object-oriented programming is this way of programming and since we’re specifically talking about javascript. I keep liking to mention…what is it…Dan Webb’s Lowpro because it uses the basic things of jQuery like grabbing a collection of stuff. You can attach these what he calls behaviour classes to them. So you have a class and it has all these methods, it has the properties. Classical object-oriented style is like you have an object and it has these methods on it. These methods do things. They’re like behaviours. Like a car can roll. Or a man can walk type. The properties are like arms, legs, things like that. That’s like a stupid computer science 101 thing that you read in a book.

Paul B:
That’s the kind of level that I’m at.

Dustin:
So it’s a different approach though, where you still, it’s still sort of behaviour driven so when you mouse over something it toggles it and you have like onmenuhover or something like that. This is a whole class thing. So that is the object right. You can unit test it. You can add more behaviours to it by sub-classing it. This is sort of an engineers dream of, not a dream, but just preferred method of development. You can get a jQuery object and it has this chained method on it called ‘attach’ and you just pass in that behaviour class. You can unit test all those classes separately. You can manage them somewhere else. You avoid memory leaks. I just generally prefer that style.

Paul B:
Yeah I understand that. Paul is there some questions you want to ask?

Stanton:
Sure, following on from what you’ve just been talking about…you kind of touched on the fact that jQuery can be difficult to Unit Test. What are your experiences at Twitter?

Dustin:
Well currently right now we’ve been using Selenium and our Selenium tests have grown pretty large. It’s almost, it’s getting to the point where it’s becoming a problem. Where, if at any point you want to actually get something deployed and we still deploy pretty often, like pretty much everyday minus Friday. Friday is not a good day to…

Selenium website

Paul B:
No, everybody knows that. Don’t screw up your site just before you go home for the weekend.

Dustin:
It takes a while to run all your tests. It gets punted, if you have a branch right, Twitter is also a Git house, a Github I suppose. You know, you run all your tests and if even one passes (meant fails) they’re not going to push it so all your code must be tested if you’re going to get anything out. Just make sure they pass. Selenium though is increasingly taking longer and longer and longer. I’m not sure if there is one single best way to test javascript. Selenium has a style where it literally opens up a webpage and it literally clicks on something for you and it makes sure something appears, things like that. There’s a lot of stuff that can also live in a unit test where it just just tests like the logic of it. If you’re logic is directly bound to a view which is jQuery’s style, it’s like stuff stuff dot click do anonymous function, you can’t really test that anonymous function cause it’s anonymous so you can’t like run it against a test.

Stanton:
So the tests need to know what’s happening on the page and in the DOM really to know what actions to trigger right, I need this to be here instead of just testing through logic. So it seems to be kind of a balance there. What you want is rapid application development or unit testing. How do you balance that trade off?

Dustin:
It’s so hard. I mean I don’t know what the best is. I can see a point where…its gotten us where we are now and its kind of a good thing. There’s been times where you just need to ship code out the door and there’s no doubt twitter needs to get stuff out the door people look at it. People like it. They complain. You need to change it fast. If any company gets instant feedback it’s twitter itself cause we’re on the site. You know what people are saying within seconds. So it’s like “I don’t like this new design” or “This button’s retarded” or I don’t know. So you need to be able to go change those things but as we grow and we’re trying to become a more fully scaled more of an app. If you look at Gmail they’re kind of like the, they’re basically a really good example of a large scale web app that’s completely javascript driven and they have a crazy amount of abstraction. Everything there is so stupidly abstract I hardly knew what half the code was sometimes. I’m just like, just reading this and it hurt my brain. It’s very Java-ish style. I won’t speak much more on Google’s behalf but they are doing some pretty awesome stuff.

Paul B:
Any other questions Paul?

Stanton:
I don’t think so.

Paul B:
Okay. Sorry, that’s quite an interesting thing you mentioned about if anybody gets loads of feedback it’s twitter. How do you manage that kind of stuff? I mean I know this isn’t directly your job. You’re not deciding on what features are rolled out and what’s not but how quickly do you respond? What’s the decision making process? If a load of people say, I don’t know replies suck for example. How do you decide to respond to that?

Dustin:
So we have, basically Biz is an awesome guy and he handles this communication stuff really well. Everyone pays attention but someone needs to speak on behalf of twitter. Like we have a twitter twitter account. We also have a blog right. That allows us to post more than 140 characters cause that’s important sometimes. You need to communicate an important business message, so we use the blog for that. For example with @replies there was even internal debate whether or not this was a good thing, so it’s…. Some decisions are just made and we push it out there. I’m more of the style that we push the really shitty version of something. Let people complain or let people love it and run on feedback with that. I think most of the other folks at twitter are similar. But we also have that other inside of us that is, like a lot of us came from Google and other big companies. So you want to like withhold certain things, like let’s get it right or…this doesn’t mean ship crap all the time.

Paul B:
No. There’s a line there.

Dustin:
Yeah there is a line. I’ve been at other companies like that that just shipped crap all the time but iterate on crap. It works, I guess, but…

Paul B:
I guess it depends to some degree how established you are. The danger if you’re a new start-up and you launch something that’s not really really good that people take one look at it and they disappear and they never come back again. So there’s a need there to have a higher quality, but once you’ve got an established base then maybe you can experiment a little bit.

Dustin:
I think the example with Apple is they’re really the other end of the spectrum. They’re not allowed to ship anything that’s bad. It must be perfect flawless and shiny and they know that. They have a guy that decides that.

Paul B:
A shiny guy.

Dustin:
A shiny guy.

Paul B:
With the shiny approval stamp.

Dustin:
With a new heart and a new liver.

Paul B:
Okay Dustin you look like you’re really flagging mate and you’ve done remarkable well to talk coherently for this length of time. Thank you for coming on the show again. It’s so good to have you back. It feels like we’re going back to the beginning.

Dustin:
That’s awesome.

Paul B:
Thank you very much.

Dustin:
Thanks.

Thanks goes to Curtis McHale for transcribing this interview.

  • http://variedthoughts.com Brian

    Good interview.
    Also, thanks for putting links in the transcript.

Headscape

Boagworld