#speakgeek - angular js

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

SHUT UP &SHOW ME THE CODE!!

Fine Fine...Jeez!

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