Introduction to Knockout js

Introduction to Knockout js

In this blog I am going to introduce “What is Knockout js?

In today's trend of Client-Server technology, the server is becoming slim and client getting fattier day by day. For client (Web Browser, Smartphone etc.) side use, JavaScript is very popular scripting language. So many libraries are developed using JavaScript. Knockout was developed and is maintained by Steve Sanderson, a Microsoft employee.

Knockout is a JavaScript library that is used to create rich web applications. It uses MVVM (Model-View-ViewModel ) pattern. It allows Html DOM elements to bind with any data model. It is more powerful library that uses two way data binding. UI will be automatically refreshed when the underlying data model changes and data model would also be changed while associated UI is changed.

It becomes more powerful when used with JQuery, JQuery has the capability of selectors, animations etc.

Main features of Knockout

Image-1.jpg

  • Declarative Binding - Easily associate DOM elements with model data using a concise, readable syntax.
  • Automatic UI refresh - When your data model's state changes, your UI updates automatically.
  • Open Source: it is free of charge - anybody can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of this library.
  • Dependency Tracking - It is achieved by using special type of variables called Observables. When the underlying Data Model changes, the associated UI is also get changed and vice versa.
  • Cross Browser Compatibility - Supports all mainstream browsers.
  • Light weight - it's just 42kb in size and can be reduced to 15kb using gzip.
  • Extensible - It is Flexible to integrate with other technologies and libraries.

A developer familiar with Ruby on Rails, ASP.Net Web Pages or ASP.Net MVC technologies may use Knockout js. In another sense, you can think of KO as a general way to make UIs for editing JSON data.

On the next several blogs, I will go through Knockout in detail.

Ebook Download
View all
Learn
View all