Discussing the benefits of using Angular (i.e. Code Reduction, Two-Way Binding, Validation with version 1.3). Speakers: Ivan, Ala

1. HQ Dev Team: Ala Gamal Al-Shargabi •Ivan Peh
KnockOutJS vs AngularJS

2. How the topic
come around…
SecureSite
(KnockoutJS – 2.1)
HQ
(recently migrated to
Angular 1.3)
We want to share it
with you!

3. How it all begin…

4. Before we start..

5. SIMILARITIES

6. Both are great JS library to
create rich and responsive UI.
Both can be integrated
reasonably easy with 3rd party
components/frameworks

7. Screwdriver
VS
Tool 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.

8. COMPARING FEATURES

9. Data Binding
Let’s have a look at how data binding is done for both libraries, we
will assume that out underlying model is this:

10. Data Binding
Let’s see how to declare and apply bindings in
HTML using both libraries:

11. Data Binding

12. SHUT UP &
SHOW ME THE CODE!!
Fine Fine...Jeez!

13. Validation
If there’s one thing that
takes probably most of the
work when building forms,
it’s validation.
Form validation

14. Angular
The usual
suspects -
Attributes

15. Angular
Input type

16. Built-In Form Validation
Built-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.

17. PRIOR TO 1.3
HALF – BAKED ??

18. $formatters and $parsers
In 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.

19. What ??
Model
HTML
View
CSS
Controller
Browser

20. Example
Angular 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

21. Example
Formatters 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

22. Meet the $validators pipeline
Angular 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.

23. 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

25. ASYNCHRONOUS VALIDATION

26. 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.

28. $asyncValidators
Asynchronous 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.

29. When the promise fulfills itself then the validation is
successful and when it rejects then a validation error is
registered.

30. Keep in MIND!!
Asynchronous validations
will NOT run unless all of
the prior normal
validators (the validators
present inside of
ngModel.$validators)
have passed.

31. 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.

32. YES! YES! YES!
ANGULARJS ?

33. OUR TAKE

34. • 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.

35. •Angular has much more testability.
•More structured and best Practices
mainly due to wider adoption.
• Angular breaks change.

36. Question ? ?

37. THANK YOU