Question

In our application we use jquery for all the client side scripting.The scripts at first started out as trivial dom manipulation but over the time it has grown in volume and is much more difficult to maintain we thought it might be.It feels very cluttered to the point that any change in the script breaks some functionality.So we are planning to use knockout.js to clean the mess that we have build.My question is how much of structural changes will have to be made in order to accommodate knockout.js?Will we have to rewrite everything?I know it is tough to answer the question without looking at the code but I am asking for general opinions.What would you do if you found your self in this situation?

EDIT:

Some details about the code structure:

We are using Asp.net MVC framework

About 30% of the client side code deals in making ajax requests to the server and based on the response it makes changes to the Ui

We have a lot of code that shows and hides Ui elements based on the user actions.Most of it is repetitive,we are to blame ourselves for this one.

This is about it we are not doing any calculations or something that requires a lot of logic just manipulating the ui either by a server response or by users action.

Answer 1

I have worked on a ASP.NET MVC3 project and like you, I started using jQuery for some simple DOM manipulation, but as time went by I ended up with a lot of client side logic to manage using jQuery – so I started switching to knockoutJS.

Before I started migrating I went through all of the great turoials at http://learn.knockoutjs.com/ – just to get familiar with the terminology ( viewmodels, bindings, custom bindings, observables, utility functions, etc. ) and some of the different bindings that you can make.

I then started creating my viewmodel the way that suited my application the best – that part in particular depends very much on what type of application you are making. In my case, I used a lot of ko.observable()‘s and ko.observableArray()‘s in order to easy update the client when different conditions got satisfied. As the viewmodel started come along I started updating my views with the appropriate bindings ( foreach, with, text, css, attr, enable, etc. ) – in that way I was able to see some progress all the time.

So to sum up – start learn how to use it – then start defining your viewmodel and figure out which states you need to represent client side. Then start (re)-implementing your view – replace some of your “old” jQuery code “one-by-one” and start saving some lines and get a more dry view implementation 😉

And by btw – StackOverflow and http://knockoutjs.com/documentation/introduction.html is going to be your friend – if you’re in doubt of anything it’s almost always in the documentation – and if it is very specific ( or hard to find ), I found that it was pretty straight forward to find related questions already asked at StackOverflow.

— Update:

Like you I also have a series of AJAX requests – bot I also use SignalR for some async real-time messaging to the client – and I definitely found the observables very very useful for this purpose – so if I should recommend specific parts of knockoutJS that you should pay very much attention to and start getting familiar with, that would be the observables, observable arrays and computed observables.