Pluralsight blog Where devs, IT admins & creative pros go for news, tips, videos and more.
Pluralsight + Digital-Tutors - 3,000 tech & creative courses - starting at $29/month Get it now →
April 3, 2012

Meet the Author: John Papa on Building HTML5 and JavaScript Apps with MVVM and Knockout


In our latest edition of the Meet the Author podcast, Fritz Onion sits down with John Papa to discuss his course Building HTML5 and JavaScript Apps with MVVM and Knockout.  In the interview John explains how he came up with the idea for one section of the course covering structuring JavaScript while cooking dinner.  John also discusses the history behind Knockout and gives his views about whether Knockout is a JavaScript framework that is built to last.

Listen to the Audio (MP3)

Meet the Author:  John Papa on Building HTML5 and JavaScript Apps with MVVM and Knockout


[Fritz] Hi, this is Fritz Onion with another episode of Pluralsight’s Meet the Author podcast. Today I’m speaking with John Papa about his new course, Building HTML5 and JavaScript apps with MVVM and Knockout. John is a Microsoft Regional Director and author of over 100 articles and 10 books. He specializes in professional application development with technologies, including Windows, HTML5, JavaScript, CSS, Silverlight, WPF, C#, .NET, and SQL Server. Hi John, it’s good to talk with you today.

[John] It’s good to be here, Fritz.

[Fritz] So in your new course, you cover Knockout as the primary framework, and I thought what I would do is outline the course topics that you go into for our listeners, so they can get a sense for what you dig into in the course. So you start off with getting started with Knockout and MVVM and JavaScript and then move onto bindings and observables, next is built-in bindings, then you get into JavaScript patterns, templates, control of flow, and containerless bindings, and you wrap up with custom binding handlers and persisting data. So when I watched this course, John, it gave me a lot of insight into how I could leverage Knockout and JavaScript and actually add much more structure to my client side code. Was that sort of the primary motivation for you in putting this course together?

[John] Yeah, that hits the nail right on the head. It’s basically taking patterns that we’ve all learned in other technologies like Java and .NET and learning to apply those to the client side, so we can have a more maintainable and scalable application.

[Fritz] Now one subtitle to one of your modules caught my eye, which was the JavaScript pattern’s module. You subtitled it, Spaghetti to Ravioli, which I…

[John] Yes.

[Fritz] That was humorous. Do you want to explain yourself, what you meant by that?

[John] Yes, well part of that, as I was cooking when I was actually creating that module, and I started thinking about how does this apply to what I’m doing because I’m Italian. So I was basically looking at, you know, everyone’s heard the spaghetti code term where you’ve got functions everywhere, and in JavaScript, a great idea that is, sometimes you’ll look at some JavaScript files, and you may have four thousand lines of JavaScript, and it’s function, function, function overload. And the idea is to take some of the principles we have with patterns and apply it, such as, Single Responsibility Principle, which comes with a solid pattern, and take that and pull things out into encapsulated pieces, so raviolis. So you think about spaghetti as all tangled up together, maybe like a ball of yarn, and then you’ve got raviolis where everything is separated on your plate, and each ravioli serves a specific purpose. It’s one’s a cheese ravioli, another one’s got meat, another one’s got broccoli and/or spinach, if you like that kind of thing. Me, I like the cheese. So you can separate these out in raviolis. And the idea, the thing that attracted me to Knockout, is it really plays well with the idea of separation of concerns, and that’s kind of the concept behind that particular module, and it shows you first, in the first two modules, how do you do Knockout, and then I kind of jump into these JavaScript patterns by showing you, now that you’ve learned how to do Knockout, let’s learn to apply some patterns to it because the stuff afterwards gets a little more complicated.

[Fritz] Great. And Knockout, itself, is very much the enabler for this separation of dependencies and such. Could you describe a couple of attributes of Knockout or a couple of features that make it easier to manage your client side code and create those separations of concerns?

[John] Absolutely. And one of the things that drew me right to Knockout was that it’s very similar to some of the patterns I love like, I like MVVM, Model-View-ViewModel, and MVP, Model View Presenter, where you’ve got separation out of your model, your data, your view, which is your HTML, your screen, and then the other part, the view model or presenter, basically you’ve got something else that’s kind of controlling how the data is getting to and from the screen. And what I really liked about Knockout is the way it does its data binding. So you can have a model with its data and a view model where it’s actually notifying the screen when changes occur and vice versa, so you get that two-way binding mode. So Knockout really fits in well with this, and it allows you to do a lot of things that, if you’ve done Silverlight or Windows Phone or if you’ve done WPF or getting into Windows 8, a lot of these things are already built into those frameworks, and it’s kind of been brought forward now into the JavaScript world.

[Fritz] Now one concern I’ve heard developers express about, not just Knockout but any number of these, sort of, fledgling JavaScript frameworks that are popping up all over the place, is, you know, these aren’t built by Microsoft or Sun or some major vendor, it’s usually one guy in his basement…well probably not a basement, but one guy at a company that solves the problem generically for the company and then decides to open source it. What led you to Knockout for this particular one, and, you know, are you…do you have confidence that Knockout is going to be around for a while and be something that everyone’s going to start integrating into their applications?

[John] So…yeah, that’s a great question. Let’s start with the facts on this. First, Knockout has been around for more than a year. It’s been two-plus years and at least publicly, in the
community at large. And the guy who wrote it, wrote it…he’s actually at Microsoft now, but he wrote it prior to being at Microsoft, and he’s continued while he’s been there. It’s now up to version 2, although I think he’s had 4 or 5 major drops over that timeframe. The community is now contributing into it as well, so it’s not just one guy, so there’s actually pieces on GitHub, they’re getting merged in. And if you go to places like Stack Overflow and other sites that have questions about this, you’ll see there’s an endless supply of these questions coming in about the topic. So of the pattern-like structures that are out there for JavaScript plug-ins and JQuery plug-ins, Knockout is one of the largest that’s out there right now. Is it going to be around forever? No, nothing’s going to be around forever. I’ll be very blunt. But let’s look at other technologies. How many technologies do you know that have been around forever besides COBOL?

[Fritz] Right. Fair enough. Yeah, and it seems to be that as the momentum picks up with frameworks like this, they just get rolled into more and more environments and used by more and more sites, and then they’re pretty much guaranteed to be around and supported for, you know, indefinitely?

[John] And that’s one of the…I’m glad you mentioned that because that’s one of the things that excites me about Knockout, and I say it later in the course, there is actually a lot of new plug-ins that are coming for Knockout itself to help it extend what its features do, not written by the creator of Knockout, written by the community. I’ve actually written one myself just because I found it so useful. So it’s kind of nice to see. That’s when I think you see things getting more mature. It’s not only is it this library, but it’s other people contributing to it.

[Fritz] Right. Great. So this new course just came out in the library. We do have a couple of other courses covering similar technologies in the library. I wonder if you want to give us a quick run-down of how you set out to build your course and how it fits in among the different courses that we have at Pluralsight already.

[John] Yes, so there’s a couple things that this relates to. This is a four-plus hour course. It’s got a lot of great content in it, and it takes you end to end for Knockout. It dives into every feature really deeply, so by the time you’re done, you’re going to know about all the features, which ones do what and which ones are the right tool for the right job. There’s also another Knockout course by Steve Michelotti, I believe, and Steve’s course is more of an introduction to Knockout, which takes a little different angle. His goes over the what you can do with Knockout approach. So there’s a lot of great examples that tie maybe ten, some of them twenty features together. So I would say, suggest a person would look at his course and see what Knockout could do for you, and then my course would go more deeper into how you can build all these pieces one by one. And there’s another course by Dan Wahlin, a really good friend of mind, and I forget the name of it, Fritz, you may have to remind me there…

[Fritz] Structuring JavaScript?

[John] Structuring JavaScript.

[Fritz] Yeah, that’s it.

[John] Okay. And Dan basically, we’ve worked together a lot on patterns in JavaScript, and he…take my Spaghetti to Ravioli chapter, and Dan blew it up into an entire course basically. I only cover just a few things that are really important to Knockout. Dan really tackles the whole job of, how do you bring structure to JavaScript, and he does it well.

[Fritz] Great. Super. Well thanks very much, John. This is John Papa with his new course, building HTML5 and JavaScript applications with MVVM and Knockout. I appreciate you taking the time, John.

[John] Thank you very much, Fritz. [Music]

About the Author

is a Chief Architect specializing in large scale distributed system development and enterprise software processes. Paul has more than twenty years of development experience including being a former Microsoft MVP, a speaker at technical conferences such as Microsoft Tech-Ed and VSLive, and a published author. Prior to working on the Windows platform, he built software using a vast array of technologies including Java, Unix, C, and even OS/2.