I have been looking at the Knockout.js (or just knockout) library. I have found it be a really helpful library for connecting different elements at the user screen level. It’s a little hard to explain succinctly since it is an inversion of current design. An example that I can think of is populating user details on the screen for input. You have a first name and last name on the screen. This information needs to be sent back to the server in the form of a JSON object. You also want to prompt the user from leaving the page if they have made changes. You may get JSON objects from the server when moving through a list users.
Without Knockout: You have to get the JSON object, set the values of the text box. When the user submits the updates, you need to create a new JSON object populated with the data from that text box. You also need to have some comparisons done to check if the values have changed.
With Knockout: You connect different objects (the JSON data, the text fields, the validators) to each so that they “observer” each other, this way the JSON object is “listening” for changes to the text fields and vice versa. Any change in one affects the other.
Knockout speeds up the development of client side while helping to deal with larger and more complex datasets.
The minimized/gziped version is only 14KB if that is a concern.
But I wanted to see what others thought of it.
Just a couple of thoughts, not knowing anything about it.
1. Is it tablet-friendly?
2. I wonder if the schedule would be a good use of something like that. So everyone can see it update in real time. It would need to be very fast and flexible for that kind of application.
Spent some time playing with the examples on the knockout website, and I am impressed. I wouldn’t describe it as an inversion. It’s MVC, but defined in the browser as JavaScript instead of on the sever as php. Knockout is formally described as model-view-viewmodel(mvvm) and not technically MVC, but the concepts are the same.
iOS and android browsers are listed as compatible. Viewing the examples from iOS worked in general, although the simple list and better list examples don’t display correctly. This is a problem because of how iOS safari renders select element and not something that’s a result of knockout. We have the same basic issue with the provider selector on the calendar in iOS.
I worry a little that complex interactions might be slow on android.
I like what I’ve seen so far and I am going to spend some time with knockout to see if it works as well as I hope. It seems a lot more flexible than jqueryUI including the jquery data tables.
Cipher thanks for the tip. Hope that things are going well. Any progress to report/code to share?
Version Support: I haven’t seen anything that would make me think it would have problems on newer browsers.
Examples: I will be putting some examples together for demographics. It it my hope to combine it with Bootstrap to provide a better user experience.
What I really like about it is the ability to send a JSON object that “looks like” database data in the fact that address are normalized, and then you can have a person to address relation. Allowing you to update one piece of data and have it appear everywhere it is needed. All with minimal extra work.
Knockout looks like a very well maintained project. Their automated test cases mentioned on the browser support page are reassuring with regards to compatibility.
I ran the spec/runner.html tests on my desktop, 3rd Gen iPad with iOS 5 and HP Touchpad running CM9. All 388 of the cases passed, but the performance differences are marked. Desktop finishes subsecond. iPad looks like about 2 seconds, Touchpad is about 7 seconds.
Also, the same sort of glitches I noted with select elements on iOS were also present in the Android browser.
Don’t get me wrong. I think it’s a potentially useful tool, and I’m going to take knockout for a spin. I am going to see how it works with my new fee sheet stuff. I’m just cautious about new tools. After struggling with “session stuff” in symfony, I decided to abandon efforts there.