Pushing the boundaries with the JavaScript API: An interview with Michael Kovner
Dustin: The new Tableau JavaScript API...it scares me. There are these lines of code running around and unlike the Matrix, I feel very un-Neo like when I look at it. Am I right to be afraid?
Michael: [laughing] That's totally natural when someone sees a programming language for the first time. It's the same reaction we have when we learn math as kids or when people start to learn Excel formulas. There are just some rules to learn first and then all of a sudden it turns into manageable chunks that our brains can understand.
Dustin: Soooooo...in keeping with the Matrix theme, where is the chair I can sit in that pumps this directly into my brain?
Michael: Believe it or not, that kind of exists from a learning standpoint.
Dustin: [incredulous look]...
Michael: Seriously. I actually didn't know any JavaScript when I first saw the API. I had done a little bit of coding in other languages back in college, but I didn't "speak" JS at all. So I had to learn from the beginning. Luckily there are some great free resources out on the web that made things easy and manageable. I used Codecademy's lessons for learning JavaScript and it was great because they let you learn at your own pace and keep you motivated with badges and recognition for coming back everyday.
Dustin: So end to end, how long did it take for you to get up and running with JavaScript?
Michael: End to end...probably about 5 weeks spending 1 hr. a day on Codecademy. Keep in mind though, initially this was just a side project for me to do in my spare time. I think if I had had a deadline or a real project it would have taken a lot less time.
Dustin: What did learning all this let you do when it comes to Tableau?
Michael: Oh man, it's mind blowing. Knowing how to integrate elements on a webpage with an embedded Tableau visualization or vice versa using the new JavaScript API opens up almost infinite possibilities. It's like learning how to drive when all you've ever been able to do is walk. Suddenly you realize you can go anywhere. You're not limited to your yard or your neighborhood anymore. Same idea here; it's not about necessarily trying to do everything inside a Tableau dashboard on a webpage, it's about what am I building for people to use and how does that all fit together.
Dustin: Give me an example.
Michael: The example on the website that shows Washington dropout rates [not real data - example only] is one to look at to get a sense of what we're talking about. In my mind though, that's the equivalent of driving down the street to go get a slushie from the corner store. Not exactly exploring the full potential of the API.
Dustin: You know I helped with that, right?
Michael: Why do you think I referenced it? [smiling] Just kidding. It's great. Really polished and perfect for introducing people to the possibilities.
Dustin: But you think there are bigger possibilities?
Michael: Oh for sure. We've only scratched the surface on what's achievable. That's what I like so much about the JavaScript API - virtually any previous boundary you can think of that involved Tableau and web interactivity is up for redefinition now.
Dustin: Like what? Prettier buttons? New filter types?
Michael: Dream bigger. You're still thinking about making something that already exists better. I'm talking about building never before achievable stuff. If I show you some projects I've been working on, you promise not to show anyone?
Dustin: Pffft, no. I'm in Marketing. Sharing = Caring.
Michael: ...Okay...this is concept stuff though....
So after I had been at Tableau for a little while and started to really understand Tableau Desktop and Server I thought it would be cool to make some sort of game. After talking with some people about the idea, I was effectively told it wasn't possible. However, once I got a look at the JavaScript API, I realized it wasn't about making the game IN Tableau, it was about making Tableau a part OF the game. So I built a somewhat Mario-esque web game that actually tracks your score using an embedded Tableau visualization. All of this is possible because of the JavaScript API that allows the two elements to talk back and forth. The game is built totally separately from Tableau, but can dynamically send information to the visualization via the API.
(Caveats: 1. This only works in Chrome (mouse over the viz if it sticks), 2. This can potentially eat up a bunch of your day. You've been warned.)
(Want to see who is bragging about their scores?)
Dustin: Ya...we're definitely not in Kansas anymore Toto.
Michael: Exactly! Think about the all the different things you can potentially do. Let me show you something else that really takes advantage of the power of JavaScript as a programming language.
Tableau is all about a drag and drop interface, right? Well using the JavaScript API, what if we extended the concept of draggable elements into the web browser experience.
(This should work in all browsers)
Dustin: I think I'm starting to get it. That dragging around functionality has nothing to do with Tableau, that is something that JavaScript lets you do. You made those images movable and clickable with JavaScript and then made the clicks interpretable by Tableau using the JavaScript API.
Michael: Bingo.
Dustin: Okay I'm hooked. What else can JavaScript do and how do I learn it?
Michael: JavaScript itself is a language used to make things on a webpage interactive so the number of things it can "do" is almost infinite. Many of things, while cool, aren't going to be immediately useful in the context of working with Tableau visualizations. I would approach learning JavaScript and the Tableau JavaScript API from the perspective of "what is it I want to do?" That way you've got a goal and a scope of what you need to learn in order to achieve your goal. That's what I did for building the game as well as the draggable interface.
Dustin: Got it. So what should the "I've never touched JavaScript" Tableau user who wants to try experimenting with the JavaScript API do to get started?
Michael: I would go the 1-2-3-4 approach in this order...
- Watch the Tableau JavaScript API Training Videos and complete each exercise (video #1)
- Go through the online Tableau JavaScript API Tutorial
- Sign-up for the JavaScript lesson on Codecademy
- Checkout what other people are doing with the JavaScript API in the Tableau Developers Community
Dustin: Awesome, thanks Michael. Any other resources you think people new to coding in JavaScript should know about?
Michael: I found the following non-Tableau specific resources to be really helpful for me...
- Notepad++ - Free source code editor. Used in the Tableau JavaScript API Training Videos
- Stack Overflow - Giant Q&A community of programmers with tons of "How do I do X with JavaScript" type questions already answered. Very friendly. Very helpful.
Note From Dustin: After conducting this interview a couple weeks ago, there was additional work that needed to be done on the Tableau JavaScript API New Features example page (linked to in the dialogue) that I had originally helped to put together. My initial efforts had largely been copying and pasting code bits that someone had pre-built and sent my way. The new requirements, while not overly complicated, called for things that needed to be built and integrated for the first time.
In order to accomplish this on a tight deadline I actually sat down in a single long session and worked through each of Michael's training videos and upon completing them, found I was able to not only understand much of the JavaScript that had previously baffled me, but was actually able to troubleshoot and fix another person's code based on what I had learned.
For taking the time to do this interview, for putting up with me on a regular basis and for creating both the recordings that helped me do my job better as well as the concept projects that helped me think bigger about Tableau - I'd like to extend a huge thank you to Michael Kovner.