Building a Single Page Web Application with KnockoutJS
4.7 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
62 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building a Single Page Web Application with KnockoutJS to your Wishlist.

Add to Wishlist

Building a Single Page Web Application with KnockoutJS

Create a complete and structured single page application by doing more with less code
4.7 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
62 students enrolled
Created by Packt Publishing
Last updated 11/2014
English
Current price: $10 Original price: $85 Discount: 88% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Use declarative data-binding to specify what your code should do in the HTML markup
  • Write class-based JavaScript code to encapsulate functionality similar to object-oriented languages
  • Apply the MVVM pattern to utilize two-way bindings between JavaScript and HTML
  • Use knockout templates to organize and reuse markup
  • Dynamically choose a template based on the type of object
  • Learn how the "this" keyword works in JavaScript and how to use it effectively
  • Utilize computed properties to automatically track dependencies
View Curriculum
Requirements
  • A basic understanding of the JavaScript language, HTML, CSS, and object-oriented principles is expected.
  • A clear and practical approach to building a web application with sample code provided to help you every step of the way so you can see not just the final product, but also the evolution of the code base.
Description

Knockout is a JavaScript MVVM (Model View ViewModel) library that helps you create rich, dynamic user interfaces with clean, maintainable code. Moreover, Knockout automatically updates the UI when your data model state changes, ridding you of the need to refresh the page. As a developer, discover how you can use KnockoutJS to architect a complete single page web application from start to finish while maintaining its structure and flexibility!

This course walks you through the process of creating a real-life web application using the MVVM pattern to add functionality to the code as it evolves. If your JavaScript often turns into a giant convoluted mess while building an application with Knockout, this video course will give you an insight on how to organize your code to avoid this.

Starting with an overview of the core concepts behind KnockoutJS to create a real-world application, you'll begin your journey by first learning to build a simplified version of Google Docs. You'll discover the power of data binding and dependency tracking to automatically keep various parts of your application in sync. Next, you’ll learn how you can use debugging techniques to track errors before moving on to creating a spreadsheet to represent more complex data structures. Lastly, you’ll learn how to create a form and then save and load a page using server side functionality.

The final section of the course lets you explore best practices and some additional tools you can use to ensure a maintainable code base.

Who is the target audience?
  • This course is aimed at both back-end and front-end web application developers with a basic knowledge of KnockoutJS and an interest in effectively building a single web page application from start to finish.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
33 Lectures
01:51:09
+
Exploring KnockoutJS
5 Lectures 09:39

Using HTML and JavaScript to manipulate large amounts of data is tricky. KnockoutJS helps encapsulate that complexity into a more manageable form.

Course Overview
02:07

HTML is good at defining layouts but not so great at defining interactions. Using data-binding attributes, you can declare what the markup will be doing while leaving the how up to the JavaScript.

Declarative Bindings
02:02

Manually updating the UI in response to changing data is a tedious and error-prone task. KnockoutJS handles the task of keeping HTML and JavaScript in sync for you.

Automatic UI Refresh
01:34

Sometimes you have a property (such as a person's full name) that's dependent on other properties (such as first name and last name). KnockoutJS helps you keep track of those dependencies and propagates updates up the chain of dependencies.

Dependency Tracking
01:38

One of the most common and useful features of any framework for creating a single page application is templating. While there are many excellent templating libraries out there, Knockout templates integrate well with KnockoutJS, allowing you to fully utilize all the other features of KnockoutJS.

Preview 02:18
+
Using KnockoutJS
3 Lectures 06:27

Working on a data-centric application on the web can be tricky. KnockoutJShelps you work with data in a more object-oriented manner that is more appropriate when working with data.

When to Use Knockout
01:29

When there are many parts to a system, it gets difficult to keep track of all of them simultaneously. With a smartly architectured KnockoutJS solution, it is possible to keep those components as separated as possible so we can work on them in smaller chunks at a time.

Complex Interactions between Components
02:15

Most web developers are familiar with the Model View Controller (MVC) pattern. The MVVM pattern serves a similar purpose but is more suitable for two-way data binding. MVC is typically concerned with how to output the HTML, not how to interact back and forth with the DOM.

Preview 02:43
+
Getting Started with Knockout Docs
5 Lectures 15:23

The simplest type of object we'll want to store in Knockout Docs is a basic document. We'll create an object to represent that document and bind it with Knockout.

Creating a Basic Document
03:19

We now have one document, but that by itself isn't that useful. With observable arrays, we can have Knockout change the tracking mechanism for the arrays of objects.

Keeping a List of Documents
02:34

We now have a list of documents that we can display, but we need to be able to select one for editing or display. We can use an observable array to hold the currently selected document and use the with binding to display that document.

Preview 02:36

Now that our document has started to gain a little complexity, it makes sense to introduce class-based object-oriented programming into JavaScript. baseJSis a simple library that makes classes clean and easy to work with.

Working with Classes
04:41

In server-side languages, you usually have a way to extract out parts of a view as separate files that can be included. Templates in Knockout can serve the same purpose. They can either be brought in using a server-side technology or we can use the KnockoutJS-External-Template-Engine library to bring them in asynchronously.

Keeping Code Organized Using Templates
02:13
+
Common Errors and Debugging
4 Lectures 10:01

There are a number of common errors that developers new to Knockout encounter. We'll cover some of these common errors and how to resolve them.

Common Errors
01:58

A good library is helpful with debugging. Knockout offers a good amount of help with debugging. Here are some tips and tricks to help with debugging a Knockout application.

Debugging Techniques
02:51

Knockout Context Debugger is a Chrome extension that lets you view the ViewModel of the currently selected DOM element.

Chrome Extension: Knockout Context Debugger
01:36

Sometimes we want to know when the value of an observable changed. Subscriptions along with the debugger statement can help us inspect the call stack when a value changes.

Preview 03:36
+
A More Complex Type: Spreadsheets
5 Lectures 17:00

We are now ready to create a new type of document. The spreadsheet type is a more complex type that illustrates a Knockout application better.

Creating a Spreadsheet Class
02:06

We have a class to represent the data. Now we need a way to display it.

Creating a New Template
02:24

We have a way to display and edit items, but we don't yet have a way for users to create new ones. We'll need to add some UI elements for item creation.

Creating New Items through the UI
03:19

Now that we have a working spreadsheet and can create new ones, we need a way for users to add new rows and columns. In this section, we will focus on the ViewModel portion of that functionality.

Adding Rows and Columns (ViewModel Side)
04:13

Now that the ViewModel portion is done, we need to set up the view to properly implement that functionality.

Preview 04:58
+
Advanced Techniques
4 Lectures 19:55

A common operation that needs to be done is filtering. This is often tricky to do on the client side, but Knockout makes the process simple.

Filtering Data
06:39

Another common feature that is needed is autosave. By taking advantage of the dependency tracking in computed properties, we can implement a smart autosave that only triggers when a change is made.

Auto-saving Using Throttled Computed
04:18

Sometimes we need to directly modify the UI. Custom bindings allow us to do that without having the logic in the ViewModel or in the view itself.

Introduction to Custom Bindings: Adding Animation
04:48

Knockout's extensibility means that there are many third-party custom bindings that can be treated as Knockout extensions. The sortable binding is a useful one for drag-and-drop reordering of items.

Custom Binding: Sortable
04:10
+
Working With Forms: Creating Surveys
4 Lectures 15:16

We will now create our final type, a survey. As with our other types, we will create a class to house the logic and data for our survey template.

Creating a Survey Class
03:46

We now have a survey class with one question type. Now we add another question type for checkboxes.

Adding Checkbox Questions
03:34

Now that we have a checkbox question with multiple options, we can add question types for radio buttons and select lists.

Adding Radio Button and Select List Questions
03:15

We can now edit our survey questions, but we still need a way to preview them. We can add a toggle to switch between the edit and preview mode.

Adding a Preview Mode
04:41
+
Saving and Loading Data
3 Lectures 17:28

A ViewModel has many properties that may not be appropriate or necessary to be saved. We can use the toJSON function to determine what gets serialized.

Overriding to JSON
07:26

In addition to determining how to serialize data, we also need to determine how to populate the data retrieved from the server. We can create a complementary function called fromJSON to determine how to populate our classes from the server data.

Loading Data from the Server
05:58

We have now created a full single page application using KnockoutJS. There are many more advanced usage scenarios to be investigated further.

Additional Tools and Resources
04:04
About the Instructor
Packt Publishing
4.0 Average rating
5,772 Reviews
44,052 Students
482 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.