Answers to Webinar Questions:

Thank you for joining the webinar.  The following are answers to questions that were submitted via the chat box:

Q1.  Does it make sense to use Knockout with MVC 4?  It seems to me that the controller, combined with AutoMapper basically does the same job as Knockout does for a Single Page Application.

It depends. Please take a look at the following links that describe mapping techniques. You’ll need to determine if the Knockout Mapping plugin will be better suited to your situation.

http://knockoutjs.com/documentation/plugins-mapping.html

http://knockoutmvc.com/

 

Q2. How would you use Entity Framework to create the data from an SQL database which would replace this sample’s static Model.  Would you still use the INotifyPropertyChanged event?

Typically, you would make an AJAX call from the client-side to a data service (web service, etc.) that would expose your data from the EF. This is how your View Model would be hydrated with data. You would not need to implement INotifyPropertyChanged because Knockout provides the notification and element update functionality.  However, you’ll need to choose a technique to keep the View Model in-sync with the DB. Polling or event firing by using nodejs could be used.

 

Q3. Do you have a good JavaScript book that you could recommend?

http://www.amazon.com/gp/product/1449399029/ref=as_li_ss_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1449399029&linkCode=as2&tag=tripwiremagaz-20

http://www.amazon.com/gp/product/0470227796/ref=as_li_ss_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0470227796&linkCode=as2&tag=tripwiremagaz-20

 

Q4. In the dataStore.JS and other JS files, why cannot we use this.firstName etc., in place of declaring a 'self' variable?

We do this because in JavaScript, the “this” pointer changes depending on where we are in code execution.  By using the “self” variable, we can ensure that when we refer to “this,” we know exactly what we are referring to at runtime.

 

Q5. You are using "ko" variable from knockout library where is "ko" defined?

“ko” is defined in the Knockout library. We referenced this library at the top of the file.

 

Q6. Are all the JavaScript classes downloaded to the client? It looks like they have to be.

Yes.

 

Q7. But do I really need the Knockout library to have observable data?

No, Knockout provides an elegant way of binding and keeping the UI up-to-date. However, you could implement the same functionality in pure JavaScript or by using another library such as AngularJs.

 

Q8. What is the point of using JS as opposed to Razor? Is it just so that the pages don’t have to get reposted to the server. Also how would you load the data from the service on IIS

Razor is server-side, while Knockout is client-side. The most typical way of loading data from the server-side using IIS is via some sort of web service (I’m using this term generally).

 

Q9. How does the button know that its click event needs to call the method from view model?

In the markup, we defined a binding between the button’s click event and the “loadCustomers” method of the View Model:

data-bind="click: loadCustomers"

>Load Customers

Q10. As we are putting View model and model in js, how to secure our UI business logic? Isn't it security concern putting view model in js - as we are exposing logic in js?

Great question.  First of all, please keep in mind that everything we write in js client-side code has the potential of being read by your end users. It is not secure.  The best practices are to keep your business logic out of your View Model. While presentation logic can be implemented in the View Model, business logic is better handled in the Model.

 

Q11. Could you explain $parent and $root in KnockoutJS?

$root and $parent are used to navigate the hierarchy of binding contexts.  The following Knockout documentation describes the use:

http://knockoutjs.com/documentation/binding-context.html

 

Q12. Is the html app showing here do the same functionality like SharePoint?

Yes.

 

Q13. Although there aren't postbacks, can you confirm that it's the async querying that's leading to the speed that you're able to show?  (I am thinking of a large database - if there were millions of rows, I presume that the Model layer has to know how to intelligently retrieve what it needs - am I correct on that?)

There are two things that are giving us the speed that we’ve observed:

a) Elimination of postbacks

b) We are not bothering to load info from the server that we don’t need. The standard SharePoint interface is quite heavy.

So, you are absolutely correct about efficiency coming from knowing exactly what needs to be retrieved. Of course, the best way to trouble-shoot a performance issue is to isolate the cause and resolve it at the root. For example, if the issue is purely server-side, you’ll want to profile your SQL calls to determine if its data retrieval, or data manipulation that’s causing the issue.

 

Q14. Does jQuery not provide the knockout pieces in any form or jQuery mobile perhaps?

No.  jQuery and Knockout are meant to solve different purposes. jQuery provides a simplified API to traverse HTML docs and to perform core tasks such as animations and AJAX calls.

 

Q15. Interesting comparison between SharePoint server postback driven model vs. your MVVM client cached model. I think what you have illustrated is with MVVM we can pull more data to client side, and have the same power to build rich app as WPF.

Absolutely correct!

 

Q16. Does knockout support the concept of multibindings?

Knockout provides similar support via computed observables which were previously named dependent observables. As the name implies, they work much like computed columns in SQL Server. A computed observable is a calculated field. Take a fullName field as an example. This could be a computed observable which represents firstName + ‘ ‘ + lastName.

 

Q17. How knockout.js pulls up the data from the modal?

Knockout does not take care of this part.  Knockout is pure client-side code. Please refer to question 8 to see how this can be achieved.

 

Q18. Do you know of any tools that generate the view models in JavaScript from POCO view models defined in C#?

Please refer to the links I’ve provided in the answer to question 1.

 

Q19. Any idea how to implement the MVVM for the Canvas in html5 situation?

Unless there is a library that does this, you would have to implement code that updates the canvas based on bindings.

 

Q20. Is "hierarchical binding" supported in JavaScript

Yes. Please refer to http://knockoutjs.com/documentation/binding-context.html

 

Q21. What are your thoughts on frameworks such as Twitter Bootstrap? What are the similarities/ differences to what we covered today?

At a high-level, the main difference is that Twitter Bootstrap is a toolkit which provides items such as visual elements (buttons, progress bars, etc.) to facilitate RAD web development. Knockout does not provide visual elements. Its core purpose is to provide binding functionality.

 

Q22. What is the email and the blog site?

My blog can be found at:

http://www.infragistics.com/community/blogs/anand_raja/default.aspx

You may follow/contact me via twitter: @AnandRaja777.

 

Q23. Why have you chosen knockout over other libraries/frameworks such as backbone ember and AngularJs?

I chose to use Knockout based on its community proliferation.

 

Q24. How do the IgniteUI controls working on cross-platforms like iOS, etc...?

They work seamlessly and are touch-enabled.

 

Q25. Is this pattern is good for real life huge Application? 

Yes. But please keep in mind that we must carefully analyze all factors when selecting a pattern. Each pattern has its own merits and drawbacks.

 

Q26. Do we need to write individual view model classes in knockout js file?

You don’t need to. It’s possible to write all classes in one .js file. Personally, I use a separate file for each class. I find that this makes the code easier to maintain.

 

Q27. When I am using ASP MVC how do I convert my model to something I can bind to using KO, what are the best practices for that?

Please refer to the answer for question 1.

 

Q28. Would it make more sense to use razor in conjunction with knockout so that we don’t have to redo our entire WPF VM's?

Yes, that may very well make sense depending on other factors.

 

Q29. Does knockout lib work well with other browsers, i.e. safari/chrome?

Yes. For more details, please refer to the official list of supported browsers:

http://knockoutjs.com/documentation/browser-support.html