Check out a free preview of the full Debugging and Fixing Common JavaScript Errors course

The "Demo Application Review" Lesson is part of the full, Debugging and Fixing Common JavaScript Errors course featured in this preview video. Here's what you'd learn in this lesson:

After the students have installed the application as the learning tool, Todd shows how the application is built and which code sections students should focus their attention.

Preview
Close

Transcript from the "Demo Application Review" Lesson

[00:00:00]
>> So this is going to be our platform for the day. We are going to use this as our tool to debug a bunch of different classes of errors. But before we do that, I should talk a little bit about just general structure so that nobody gets lost in it.

[00:00:14]
getRANTr itself is using an older framework called Backbone.JS and it is not important at all for you to know anything about it. So don't worry, Backbone, all of Backbone structures itself basically like this. You'll see Backbone.SOMETHING.extend, and then there'll be all of the functions that we actually care about.

[00:00:36]
All of the bugs are in our functions. You don't need to worry about Backbone at all. You just need to worry about our code. Let's have a look at what the structure this actually looks like. Some of the decisions that I've made with getRANTr are frankly silly. The point of this was to make the fewest number of concepts possible to have a working app so that everybody here approaching from different backgrounds would have an easier time grokking how the whole thing works.

[00:01:10]
The structure of getRANTr that you'll see, there's only a few things you need to care about. At the top level, there's an Exercises folder. That's not part of the code base at all. This is just your details about each exercise we're going to do. Don't scroll to the bottom that has the solutions.

[00:01:30]
I encourage you all to try them first and then if you get stuck, you can scroll to the bottom and we'll tell you exactly how to fix each bug. The code itself is stored in the source > public folder. The other stuff in source is all about the getRANTr server.

[00:01:44]
There are no bugs in the getRANTr server. Well, there are no bugs that are part of this routine that we need to fix in the getRANTr server. I'm sure there are a bunch of bugs in it. All the stuff that we need to care about is in source > public.

[00:01:58]
And this is the web application. There's two root pages index.html and signup.html. Index.html is fairly straightforward markup using Bootstrap, but you don't need to worry about anything with styling. All the scripts are just included as straight up script tags. There's nothing magical happening here. I just referenced each script in the order they need to come in.

[00:02:23]
The scripts themselves are all stored in public > scripts. And they're all named fairly straightforwardly about what they need to do. Here's an example. As you can see from my from the Backbone thing, all of the stuff that we need to do does follows the pattern of Backbone.SOMETHING.extend.

[00:02:42]
And then all of the functions are just kind of shoved in here inside of these objects. And that's all we need to worry about, okay?

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now