#speakgeek - angular js

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

Upload: derek-chan

Post on 15-Aug-2015

41 views

Category:

Software


2 download

TRANSCRIPT

Page 1: #speakgeek - Angular JS

HQ Dev Team: Ala Gamal Al-Shargabi •Ivan Peh

KnockOutJS vs AngularJS

Page 2: #speakgeek - Angular JS

How the topiccome around…

SecureSite (KnockoutJS – 2.1)

HQ(recently migrated to Angular 1.3)

We want to share it

with you!

Page 3: #speakgeek - Angular JS

How it all begin…

Page 4: #speakgeek - Angular JS

Before we start..

Page 5: #speakgeek - Angular JS

SIMILARITIES

Page 6: #speakgeek - Angular JS

Both are great JS library to create rich and responsive UI.

Both can be integrated reasonably easy with 3rd party components/frameworks

Page 7: #speakgeek - Angular JS

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.

Page 8: #speakgeek - Angular JS

COMPARING FEATURES

Page 9: #speakgeek - Angular JS

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

Page 10: #speakgeek - Angular JS

Data BindingLet’s see how to declare and apply bindings in HTML using both libraries:

Page 11: #speakgeek - Angular JS

Data Binding

Page 12: #speakgeek - Angular JS

SHUT UP &SHOW ME THE CODE!!

Fine Fine...Jeez!

Page 13: #speakgeek - Angular JS

Validation

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

Form validation

Page 14: #speakgeek - Angular JS

Angular

The usual suspects - Attributes

Page 15: #speakgeek - Angular JS

Angular

Input type

Page 16: #speakgeek - Angular JS

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.

Page 17: #speakgeek - Angular JS

PRIOR TO 1.3 HALF – BAKED ??

Page 18: #speakgeek - Angular JS

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

Page 19: #speakgeek - Angular JS

What ??Model HTML

ViewCSS

ControllerBrowser

Page 20: #speakgeek - Angular JS

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

Page 21: #speakgeek - Angular JS

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

Page 22: #speakgeek - Angular JS

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.

Page 23: #speakgeek - Angular JS

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

Page 24: #speakgeek - Angular JS
Page 25: #speakgeek - Angular JS

ASYNCHRONOUS VALIDATION

Page 26: #speakgeek - Angular JS

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.

Page 27: #speakgeek - Angular JS
Page 28: #speakgeek - Angular JS

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

Page 29: #speakgeek - Angular JS

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

Page 30: #speakgeek - Angular JS

Keep in MIND!!

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

Page 31: #speakgeek - Angular JS

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.

Page 32: #speakgeek - Angular JS

YES! YES! YES!

ANGULARJS ?

Page 33: #speakgeek - Angular JS

OUR TAKE

Page 34: #speakgeek - Angular JS

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

Page 35: #speakgeek - Angular JS

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

Page 36: #speakgeek - Angular JS

Question ? ?

Page 37: #speakgeek - Angular JS

THANK YOU