Angular vs Knockout
Diatom Enterprises team have successfully delivered a serious Knockout JS-based project for our Latvian customer. We have decided to interview our developer Sergey who worked on this project.
Congratulations, Sergey, let’s talk about your impression. As you know, Knockout and AngularJS now are so-called competitors, and we have to make a choice. The customer, from Seattle, asked for a comparative cost estimation which directly depends on the chosen technology. So, Sergey, what do you think: why your Latvian customer has chosen exactly the knockout?
To my opinion, it is not really correct to compare directly these two frameworks. The matter is, their purpose is somewhat different.
AngularJS is a Javascript MVC framework created by Google to build properly architectured and maintainable web applications. AngularJS is a true MVC framework which fully supports Model-View-Controller architectural pattern. AngularJS defines numerous concepts to properly organize your web application. It is a very powerful instrument for creating complicated one-page web applications, but for this “power” we have to pay with productivity, especially on mobile devices.
As written on the official website “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.” So basically it is a framework that presents a very simple yet useful data-binding for web-applications on the side of a client, but not more than that. KnockoutJS is very “easy” and fast, but it does not imply such rich possibilities as Angular. I am not sure we have a lot of examples when knockout was used for development in software for mobile devices. But it is a good question
The application we developed for our customer has quite a difficult and “heavy” back-end. Almost all data processing is concentrated on the server-side, including validation of forms. At the same time, the front-end is rather simple, it does not require any complicated dynamic data interaction on the customer’s side. In this situation, all possible advantages of AngularJS would not be used. That’s why we made quite a logical decision to use more simple and “easy” Knockout.
Do I understand you correctly? The main reason for this choice – the requirement to have a more simple and reliable method to quickly develop forms according to specification? And, because the project is big, the decision was made to develop many simple forms. In case if the customer would like to have one form with complicated constructions, we could choose AngularJS. And when there are many simple forms – KnockoutJS. Is that correct?
Yes, absolutely correct. If we require some complicated “rich” functionality on the customer’s side, especially if the interaction between the forms is required, it is better to use Angular. If the forms are relatively simple, Knockout is the best choice. My developers respect both ways
How many forms approximately have you implemented? Can you describe in simple words the technology of developing forms on KnockoutJS?
On this project, we have developed about 300 forms. The client refused to spend time and money on Unit tests even we as developers asked to think about. To my opinion, refusal to make tests on projects of middle and large scale does not serve well, because in spite of some economy at the beginning stage of development, lack of tests makes the project’s further support and development extremely difficult and expensive. The difference of developing web-applications with Knockout from traditional is in preparation of View Model, which later is linked to markup elements through the data-bind attribute. Herewith, View Model apart from its own data can also contain validation rules, subscriptions to data change, etc.
You are working in Angular Software Development Team
Could you, please, make an example of View Model and how the markup is linked through the data-bind attribute in your software?
Yes, of course. Here is the simplest example of developing ViewModel:
var myViewModel =
{
firstName: ko.observable(‘Bob’),
lastName: ko.observable(‘Marley’)
};
Link to input element:
<input data-bind=”value: firstName” />
<input data-bind=”value: lastName” />
Expanding ViewModel by adding computed function fullName:
myViewModel.fullName = ko.computed(function()
{
return this.firstName() + ” ” + this.lastName();
}, myViewModel);
And link it to span element:
<span data-bind=”text: fullName” />
As a result we have a dynamic form, in which the full name will be displayed in span element as we enter name and last name. Please pay attention that only the declarative approach is used – no event processing and other is required.
How do you think, the same things can be done using well-known technologies, for example, HTML/JQuery? Maybe it could be more effective in terms of costs of development of software?
Of course, the same could be implemented using other technologies (clean JavaScript, jQuery, Backbone and other), but, to my opinion, it would complicate the project and would raise the costs of its development.
What did you like about KnockoutJS and what you did not?
I really liked about Knockout that it’s simple and easy to learn and develop, on one hand, but on the other hand the flexibility and gracefulness of incorporated solutions. About its faults I would say – if there are any problems on the project (difficult to implement something on Knockout or there are productivity problems), then probably Knockout is not the instrument to be used in this particular case. I did not face any problems when Knockout was used to complete the tasks it is designed for.
In the project that I was talking about – we are responsible for the choice of platform. There are not so many forms on the project, but these forms are rather complicated. We’ll have to implement the tabs switching, several tables on one form, editing of tables, and validation on forms. What would you suggest in this case?
For complicated forms, I would recommend using some fully-featured MVC framework, for example, Angular or Backbone, because the options of Knockout may not be enough for such functionality.
I did not mention the back-end in my questions so far. What server technology was used on your project and why?
For web platform, the ASP.NET MVC5 framework was chosen, but the interaction of the client and server was done by using SignalR, because the project required the interactive communication between the client and the server, calling the client’s code form the server, etc. As a DB (database) server, the MS SQL Server 2012 was used.
SignalR – it is a separate and also quite interesting topic. Sergey, can you tell which advantages of this technology were used on your project?
On our project, we used the basic advantage of SignalR – the possibility of interactive two-way communication between the client (browser) and server. Due to the technical peculiarities of the project, it was necessary to emulate the work of desktop application in the browser. However, due to limitations of HTTP-protocol, it was extremely difficult to do using a traditional approach of developing web-applications. But SignalR really saved our time and resources during the completion of this task.
Connection of ASP.NET MVC5 – SignalR – KnockoutJS. Are there any obvious disadvantages?
I cannot mark any substantial disadvantages. I would only like to turn your attention to two issues connected with using SignalR:
• SignalR does not provide any authentication or authorization mechanisms, that's why this task will have to be solved by additional means (read more here http://www.asp.net/signalr/overview/signalr-20/security/introduction-to-security);
• SignalR is not designed for transmitting of large volumes of data (for example when on your form you have a big table with many lines), you should take this into account while doing application design, and in such cases provide some mechanisms of data spooling on the form.
Thank you for your time, Sergey. You helped us all to know more about SignalR, KnockoutJS and their peculiarities when choosing architecture for business-applications. I personally understood that AngularJS and Knockout are not competitors, but provide an implementation of somewhat different tasks.
The last question: You have 8 knockout js developers in DiatomEnterprises team. For some of them, Knockout was a new technology. How many weeks, to your opinion, were necessary to get to know the technology and start fully functional and effective software development?
If we speak only about KnockoutJS, having basic knowledge of JavaScript and HTML we can count the days, not weeks. One of the advantages of Knockout is its simplicity, understandability, good documentation with examples, support from developers’ community side, many examples on field-oriented resources. To my opinion, two-three days are completely enough for advanced usage of KnockoutJS in real projects.
Thanks one more time, and I hope to meet you again as soon as you finish your next project!
Diatom Enterprises is a Latvia based custom outsource software development company producing software for a wide variety of industries. Our customers around the globe find our Angular software development services to be of outstanding quality at an affordable price.
