Simplest Thing Possible: Introduction to Knockout.js
It seems you cannot turn in one direction or another and not hear about a new JavaScript library or CSS framework that promises to be the silver bullet-to be THE thing that will make web-based application development a breeze. This article will introduce you to Knockout.js (http://knockoutjs.com/). Knockout.js is an open source library (under the MIT License) that is pure JavaScript that works with any existing web framework and every mainstream browser. Further, Knockout.js is fully documented with a complete set of online tutorials. What does Knockout.js do? It simplifies the task of building data-aware web UIs through the application of the Model-View-View-Model (MVVM) pattern. Regardless of the business problem your web applications are built to solve, all web applications, and just about every other application for that matter, shares the following characteristics: - Create data
- Retrieve data
- Update data
- Delete data
- Display data
In addition to the CRUD operations, I added an extra D for display because users interact with the data through the user interface (UI). In the web application space, we can spend a significant amount of time and energy writing JavaScript code that drives the UI. If you face this issue, then you want to add the Knockout.js library to your toolbox. Often, developers identify Knockout.js with Single Page Applications (SPAs). Indeed, Knockout.js makes it very simple to build SPAs. To learn about how Knockout.js helps you build SPAs, refer to the tutorials at knockoutjs.com. While the concepts I introduce in this article apply to SPAs, this article will focus on non-SPA scenarios. MVVM Primer The Model-View-View-Model (MVVM) pattern is an architectural design. Microsoft designed MVVM in conjunction with the data-binding features in the Windows Presentation Foundation (WPF). MVVM provides a clear separation of concerns between the user interface (UI) and the business logic. MVVM shares a lot in common with the Model View Controller (MVC) and Model View Presenter (MVP) patterns. And for that reason, I will take a few moments to discuss the MVC and MVP patterns. In the MVC pattern, a view acts as the broker between the Model (the data displayed in the View) and the Controller (server-side endpoint that takes data from the View and performs some action on that data and provides a response. In MVC, there is no data binding per se. Rather, through templates, as markup is processed on the server, data values are introduced so that what is presented to the browser is a combination of markup and data. ASP.NET MVC, Rails and the Backbone JavaScript library are frameworks that implement the MVC pattern. The MVP pattern has a certain amount of logic in the presentation layer that is responsible for brokering actions between the Model and the View. In MVP, the presentation layer assumes the functions of the Controller in the MVC pattern. Where there is no data binding in MVC, there is data binding in MVP. In the .NET space, WPF, Windows Forms and ASP.NET Web Forms are examples of the MVP pattern. In the MVP pattern, data binding and UI refreshes are more automated than in the MVC pattern. How does the MVVM pattern figure into the mix? The MVVM pattern is a hybrid of the MVC and MVP patterns, bringing the best of both together. MVVM has MVC’s separation of concern benefits and MVP’s data binding features. MVVM is primarily focused on the UI layer, leaving business logic to either be implemented on the server or in the presentation layer. To understand the MVVM pattern better, we must focus a moment on the View Model. The View Model The View Model, as the name implies, is the Model for View. The View Model is a superset of the Model (the M in MVC and MVP). Where the Model is a logical representation of a business entity such as an invoice or a customer, the View Model includes the Model plus other metadata the View may require. Examples of the metadata may include the background color, applicable CSS classes as well as the web page’s height and width. What you choose to include in a View Model is a judgment call on your part, which should be driven by your application feature’s business and technical requirements. One More Pattern to Discuss - the Observer Pattern I’ll now discuss the Observer pattern to complete this basic primer on MVVM. It’s the last one discussed here but it may be the most important one to discuss and understand when it comes to understanding how the MVVM pattern works. The core concept in MVVM is data binding which can be uni-directional and bi-directional. In uni-directional binding, the binding occurs one time and is normally used for read-only situations. Bi-directional binding, as the name implies, occurs in both directions. Like uni-directional binding, the target is hydrated with the source data value. Unlike uni-directional binding, when the target is updated, the source data is also updated to reflect the new value. This is the essence of the Observer pattern. Via events, a subject object notifies its dependents (the observers in this case) that a change in state has occurred. The observer is notified of the change and in that notification; the new data value is received as well. A subject object would typically be something like a textbox. The observer would be the property in the model that is contained within the View Model to which the subject is bound. With that background, let us dive into how to implement Knockout.js in your web applications. | & | | 
By: John V. Petersen John Petersen has been developing software for over 20 years. It all started when, as a staff accountant, he was asked to get involved in a system upgrade to replace an old IBM Series 1 computer (about the size of a large refrigerator!). Those first programs were written in Clipper, Summer 87. Since that time, John’s tools included dBase, FoxBase, Visual FoxPro and Visual Basic. An early adopter of .NET, he then decided to go to law school. After practicing law for a few years, John realized that technology was a lot more interesting than the law. Today, John focuses on ASP.NET development and is having more fun than ever solving business problems for clients. John is a Practice Director for Custom Application Development at Neudesic, a Microsoft Gold Partner and the Trusted Technology Partner in Business Innovation. A 9-time recipient of Microsoft’s Most Valuable Professional Award, John is a current ASP.NET/IIS MVP. John is also an ASP Insider and is the INETA Mentor for PA and WV. John is the author of several books and is a frequent contributor to CODE Magazine and DevPro magazine. John holds a BS in Business Administration from Mansfield University, an MBA in Information Systems from St. Joseph’s University and a JD from the Rutgers School of Law – Camden.
email: johnvpetersen@gmail.com
blog: codebetter.com/johnvpetersen
twitter: @johnvpetersen
john.v.petersen@comcast.net |