Knockout (http://knockoutjs.com) is a good option if you want to use a Model-View-ViewModel (MVVM) approach to building your web parts. The fundamental difference between MVVM and other MVx patterns is that View and ViewModel are linked by data-binding. Following the MVVM pattern, Knockout separates the development of a UI in the form of an HTML template from the business logic (the data model). In practice, this means that there is a model (HTML template), view (TypeScript class), and binder (Knockout internal code) that work together to achieve a UI reflecting the changes in the data. Knockout is really just a data-binding library rather than a full framework in its own right.

Microsoft's SharePoint Yeoman template includes the possibility to build a HelloWorld web part using Knockout and it is the best place for us to start. Create the web part as any web part, but this time select Knockout as a framework:

Let's examine how Knockout works in SharePoint Framework. First, open HelloKnockoutWebPart.ts and compare the differences to the regular no-framework version of the file. In line 1, the knockout library is imported as ko and in 10, HelloKnockoutViewModel is imported. Also, note that this web part keeps account of the _instance number in line 13:

The actual web part class has a few differences as well. Properties _id, _componentElement, and _koDescription are defined in lines 16 to 18, and a _shouter object is created at line 23:

The onInit function is taking care of housekeeping, tracking the web part instance number, creating this._componentElement, and saving the web part's property description value to this._koDescription property, as well as taking care of the all required Knockout subscriptions and bindings:

Our render function will create the component element if needed and take care that any changes to web part's description property are reflected in this._koDescription:

Finally, examine the _registerComponent function. In essence, it will combine the view model and HTML template file together:

Now, open HelloKnockoutViewModel.ts and examine the class definition. The description property is defined as ko.observable but the other properties are basically constants but available in the HTML template file:

Finally, open the HelloKnockout.template.html file and examine its contents. As you can see, this file is rather a standard HTML markup. The only notable difference is the data-bind attributes which include references to data values following the notation used by Knockout:

As we can see, using Knockout requires a few special tweaks compared to aq no-framework approach or the way React is used with SharePoint Framework. If you are new to Knockout, these may seem complex, but as you work your way through building more complex web parts, you will learn that this is just the way you control how Knockout takes care of the view model and how it is presented in the UI. Further reading for Knockout is available at http://learn.knockoutjs.com/.