Essential Knockout and JavaScript Tips

What to Expect from Knockout and JavaScript Tips
Welcome to Essential Knockout and JavaScript Tips. My name is John Papa with Pluralsight. And I'm going to share with you eight rounds of knockout tips throughout this course. We'll dive into how observables work so we have a better understanding of when and where to use them, and then how to use them. And then in round two we get to have some fun debugging some knockout code. We'll walk through the code inside the browser's debugging tools so we can see how things are working, and then how to take action on that. And at round three we're going to take a look at how we can inspect and debug some of the bindings at Runtime, not only looking in the JavaScript but also looking at the declarative HTML And finding out what's bound to our objects and knock out some really powerful tools like Binding Handlers. So, in round four, we're going to take a deep look at Binding Handlers and a couple different scenarios where they really come in handy. And then, in round five, I'll share with you some great ways you can use computers in your applications. And, even though observables are great at notifying when changes are made Sometimes we want to tap into those changes and run custom logic. This is where Round six manual subscriptions really shows it's worth. In Round seven we'll show you how you can manage events and start tapping a little bit of performance tips, as we get into how events and event delegation can really help you out in the application. And then in round eight, we'll continue the discussion and performance and show you different ways that you can really help your application becomes much more efficient and quite frankly get a lot faster. So if you enjoy writing knockout and Java script codes as much as I do, stick around, we've got a lot in store,

Getting Started with the Demo Code
This course is primarily based upon demos. So let's start out by showing you how you go get the demo code and then how we can use source control from a GitHub repository to both make changes to it and discard changes when we're just trying things out.

Round 1: Starting Off on the Right Foot with Observables
Observables are really important to understanding how Knockout works. In fact, it's critical. So, we're going to cover how observables work, both in the source objects in your JavaScript, and in the declarative data binding in your HTML. And I'm going to focus in on the most common mistakes people make when using Knockout, and how you can avoid those pitfalls. And there's a time and place for everything. The same goes for Knockout observables. Sometimes, they're really valuable to use, and other times, you may not want to use an observable at all, and just use a plain old object. So in this module, we'll take a look at how we can master observables and really know when and where to use them and how they work.

Round 2: Live Debugging
When I'm debugging my code, sometimes I like to do it live right inside the browser. And my favorite tools are the Chrome browser debugging tools. So in this module, we're going to take a look at how we can examine Knockout's observables and behavior inside the Chrome browser's debugging tools. And this will be round two of our Knockout tips. We're going to do things like change code on a fly inside the browser, and then run it, save it off to the hard drive so we can save those changes, check timing that watches conditional break points, and do some debugging of Ajax calls over HTTP. By the end of this module, you'll learn how to be more effective at debugging your Knockout specific JavaScript.

Round 3: Inspecting Bindings
Knockout relies on declarative bindings so you can bind your HTML to the knockout observables and computives. And there's a lot of places your bindings can go wrong, for example you could type in the wrong binding in your HTML or you can be bound to the wrong object in your observables or perhaps you think you have a certain object graph and but you really don't. Especially if you're at the wrong level in that object graph. And in this module, we're going to take a look at how we can inspect those bindings inside the HTML using a couple different tools. One will be a manual job script way, another will be a plug in for the browser and a third will be a really cool third party tool. And by the end of this module, you'll have a really good idea on how you can debug your bindings inside the HTML.

Round 4: Custom Binding Handlers
It seems like with a lot of technologies these days, we really run into a lot of walls, a lot of brick walls where you can get 80% of the way of where we want to go to, but that last 20% is hard to reach. Well, with Knockout it makes it easy for us to break through those walls at the end, because it offers a few features, one of which is custom binding handlers, which really allows you to stretch further. So in this module, we're going to talk about how you can stretch Knockout a little bit further by creating your own custom binding handlers. And by the end of this module, you're going to see how you can use these to help reduce the code in your HTML, move it more to the JavaScript where it belongs, reuse the code, and also integrate with third party widget libraries.

Round 5: The Truth About Computed Observables
If you've been using KnockOut, you've probably used it's computed observables before. But do you really know how computed observables work under the covers and all the powerful features that they can expose? For example, do you know exactly when and how computeds fire? And that they can clean up after themselves, too. Well, in this module we'll take a closer look at computeds and show you some examples of how we can really take advantage of some hidden gems inside of the computer observables. And by the end of this module, you'll be able to take advantage of all the power that computeds give you.

Round 6: Manual Subscriptions
It's really great that Knockout helps us keep our UI and our viewmodels in sync through two way databinding using observables, but sometimes it's good to know when an observable changes, so we can run some custom logic. That's why it's really helpful that we can subscribe to changes in observables. So in this section, round six, we're going to check out how we can use manual subscriptions to perform custom logic when something changes. We can use this for debugging scenarios, or even creating linked lists where we change one value, and then it goes and fetches another set of values for another drop down list. We can also perform custom asynchronous operations based upon when observable changes to go get maybe master in detail data. By the end of this module, you'll know how to use manual subscriptions to really open the doors to other possibilities and how we can react the changes in our observables.

Round 7: Event Delegation and Performance
Chances are that pretty much every app you're going to build is going to have some kind of events wired up into it. When using Knockout, you'll use something like the click binding or maybe the event binding to help you wire those in. It's really important to understand now to wire events into your application using Knockout or even jQuery. Because, let's say you had a list of a 1, 000 rows and each of those rows had three different events that you could call on it. There's 3, 000 events. Having that many events can really effect performance negatively in a browser. So, in this module, we're going to explore how you can mitigate that and really get it down to just one event by using something called event delegation. And how we can use some of the features that we've already learned in knockout, like binding handlers to really wrap that up and make it really reusable.

Round 8: Performance
We all want our applications to perform well. And there's plenty of tips out there on how to make your web applications do that, but when it comes to Knockout, there's a couple things specifically that can really help you out. In this module, we'll talk about some of those performance strategies and how you can do things like manage how much data is coming across the wire. How Knockout uses it. How often that the observables will notify of change. And Throttling some of those change notifications, so you can run less code. And by the end of this module, you'll learn more about how Knockout works, so you can write more efficient Knockout code.