Post on 15-Aug-2015
HQ Dev Team: Ala Gamal Al-Shargabi •Ivan Peh
KnockOutJS vs AngularJS
How the topiccome around…
SecureSite (KnockoutJS – 2.1)
HQ(recently migrated to Angular 1.3)
We want to share it
with you!
How it all begin…
Before we start..
SIMILARITIES
Both are great JS library to create rich and responsive UI.
Both can be integrated reasonably easy with 3rd party components/frameworks
Screwdriver
VSTool box
A data-binding solution framework which will allow the application structure to be entirely up to you.
A full fledged framework, which allows you to build a whole web application with Angular and only Angular. As it offers a lot of built-in features.
COMPARING FEATURES
Data BindingLet’s have a look at how data binding is done for both libraries, we will assume that out underlying model is this:
Data BindingLet’s see how to declare and apply bindings in HTML using both libraries:
Data Binding
Validation
If there’s one thing that takes probably most of the work when building forms, it’s validation.
Form validation
Angular
The usual suspects - Attributes
Angular
Input type
Built-In Form ValidationBuilt-in validations are nice, but in some cases we need validations that go far beyond the basic functionality we get out of the box.
And this is where custom validations come in.
PRIOR TO 1.3 HALF – BAKED ??
$formatters and $parsersIn versions before 1.3, we were able to implement custom validations by using:
$formatters and $parsers
Designed to convert the view value into a different model value.
for converting the model value into the appropriate view value.
What ??Model HTML
ViewCSS
ControllerBrowser
ExampleAngular internally handles date based input elements.
The view value (entered by the user) is a string based value, but when it reaches the scope the value itself is an instance of Date. parser Example
ExampleFormatters work in the opposite way. So if we wanted to convert a date to a properly formatted string.
So, it is a model to view update.formatter Example
Meet the $validators pipelineAngular 1.3 introduces yet another pipeline, the $validators pipeline, which is rather used than $parsers + $formatters.
Unlike parsers and formatters, the validators pipeline has access to both, viewValue and modelValue, once $parsers and $formatters has been successfully run.
The validation pipeline has been added to the existing pipeline. It is basically there, so developers can explicitly distinguish between validations and parsing/formatting related functionality.
$validators is not an array, but an object with each member describing a validator.
An Improvement
ASYNCHRONOUS VALIDATION
With 1.3, Angular makes asynchronous validations possible.
For e.g. Imagine the case you have an input field for a user name and whenever a user types in a name, you need to perform some validity checks on your server. The application needs to wait until the server responses.
$asyncValidatorsAsynchronous validators work pretty much like synchronous validators except that they are asynchronous and therefore promise based.
Instead of returning true or false, we return a promise that holds the state of an asynchronous code execution.
When the promise fulfills itself then the validation is successful and when it rejects then a validation error is registered.
Keep in MIND!!
Asynchronous validations will NOT run unless all of the prior normal validators (the validators present inside of ngModel.$validators) have passed.
One thing …This restriction allows for the developer (yes you) to prevent the validator from making excessive backend calls when the input data is invalid. validators Example
Only once all of the normal validators and the async validators have successfully passed then the model value will be written to the scope.
YES! YES! YES!
ANGULARJS ?
OUR TAKE
• Pure SPA is evil.• Being the screwdriver that is it,
KnockOut has a lot of bundled plugins to support the missing parts of the puzzle.
• KnockOut has higher learning curve (blessing in disguise).
• KnockOut is great for fast development from scratch.
•Angular has much more testability.•More structured and best Practices mainly due to wider adoption.• Angular breaks change.
Question ? ?
THANK YOU