AngularJS is the future
Alessandro Nadalin - Montreal, February 2014

AngularJS

2009

SPA

example.org/#!/about

history.pushState(...)

Killer Features

Killer Features
2-way data binding

Model changes the View

View changes the Model

http://jsfiddle.net/WLUPj/2/

function Ctrl($scope) {
$scope.title = 'Lorem Ipsum';
}

<div ng-app="zippyModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
<div data-zippy="title"></div>
</div>
</div>

<div ng-app="zippyModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
<div data-zippy="title"></div>
</div>
</div>

<div ng-app="zippyModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
<div data-zippy="title"></div>
</div>
</div>

function Ctrl($scope) {
$scope.title = 'Lorem Ipsum';
}

<div ng-app="zippyModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
<div data-zippy="title"></div>
</div>
</div>

function Ctrl($scope) {
$scope.title = 'Lorem Ipsum';
}
Title: <input ng-model="title">

function Ctrl($scope) {
$scope.title = 'Lorem Ipsum';
}
Title: <input ng-model="title">

<div ng-app="zippyModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
<div data-zippy="title"></div>
</div>
</div>

directive('zippy', function(){
return {
restrict: 'A',
replace: true,
scope: {
title:'=zippy'
},
template: '<input type="text" ng-model="title" />'
}
}

directive('zippy', function(){
return {
restrict: 'A',
replace: true,
scope: {
title:'=zippy'
},
template: '<input type="text" ng-model="title" />'
}
}

directive('zippy', function(){
return {
restrict: 'A',
replace: true,
scope: {
title:'=zippy'
},
template: '<input type="text" ng-model="title" />'
}
}

http://docs.angularjs.org/guide/databinding

Killer Features
Dependency Injection

function Ctrl($scope) {
// WHAT THE HECK SHALL I DO HERE???
}

function Ctrl($scope, $location) {
// WHAT THE HECK SHALL I DO HERE???
}

function Ctrl($scope, $location) {
// WHAT THE HECK SHALL I DO HERE???
}

function Ctrl($scope, $location) {
$scope.whereAmI = $location.host();
}

http://jsfiddle.net/9J7u5/2/

Killer Features
Support

https://github.com/angular/protractor

Killer Features
Directives

<div ng-app="confoo">
<div ng-controller="Ctrl">
<menu />
</div>
</div>

<div ng-app="confoo">
<div ng-controller="Ctrl">
<menu />
</div>
</div>

<div ng-app="confoo">
<div ng-controller="Ctrl">
<div menu></div>
</div>
</div>

<div ng-app="confoo">
<div ng-controller="Ctrl">
<div data-menu></div>
</div>
</div>

var links = {
home: {
link: 'http://example.com',
title: 'Home'
},
about: {
link: 'http://example.com/about',
title: 'About Us'
}
};

var links = {
home: {
link: 'http://example.com',
title: 'Home'
},
about: {
link: 'http://example.com/about',
title: 'About Us'
}
};

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>

angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});

angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});

<div ng-app="confoo">
<div ng-controller="Ctrl">
<menu />
</div>
</div>

angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});

angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});

<div ng-app="confoo">
<div ng-controller="Ctrl">
<div data-menu />
</div>
</div>

angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});

<div ng-app="confoo">
<div ng-controller="Ctrl">
<menu />
</div>
</div>

angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});

angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>

angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});

<body ng-app="confoo">
<confoo-header>
<div>
<div ng-controller=”MainCtrl”>
<confoo-sidebar>
</div>
<confoo-footer>
</div>

<body ng-app="confoo">
<confoo-header>
<div>
<div ng-controller=”MainCtrl”>
<confoo-sidebar>
</div>
<confoo-footer>
</div>

<body ng-app="confoo">
<confoo-header>
<div>
<div ng-controller=”MainCtrl”>
<confoo-sidebar>
</div>
<confoo-footer>
</div>

<body ng-app="confoo">
<confoo-header>
<div>
<div confoo-main-content>
<confoo-sidebar>
</div>
<confoo-footer>
</div>

http://jsfiddle.net/Lj6CH/6/

“Controllers, Directives and Services” http://is.gd/QlGYID

and much much more :)

Why do we like
AngularJS?

Solid and clear foundation

$routeProvider.when(‘/about’, {
templateUrl: '/views/about.html',
controller: 'AboutController',
});
Solid and clear foundation

$http({ method: 'GET', url: '/milk.html }).
success(function(...) {
alert(‘YEAH!’);
}).
error(function(...) {
alert(‘AWWW, SNAP!’);
});
Solid and clear foundation

Works well with the JS ecosystem

Works well with the JS ecosystem

.container(data-bindonce)
.row
#my-whatever
p {{ myModel.text }}
Works well with the JS ecosystem

.container(data-bindonce)
.row
#my-whatever
input(ng-model=”myModel”)
Works well with the JS ecosystem

Modern API-oriented architectures

APIfy everything

Easier to scale

No sessions on the servers

mantain state on the client (LS)

What will you hate
about AngularJS?

ehm...

https://www.destroyallsoftware.com/talks/wat

Watchers

lotsa bindings, lotsa watchers

lotsa watchers, lotsa computation

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>
prepare for N...

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>
N*1

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
</a>
</li>
</ul>
N*2

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
<menu
ng-if=”item.links”
links=”item.links”
/>
</a>
</li>
</ul>

<ul>
<li ng-repeat="item in items">
<a href="{{ item.link }}">
{{ item.title }}
<menu
ng-if=”item.links”
links=”item.links”
/>
</a>
</li>
</ul>

use 1-way data binding if possible

https://github.com/Pasvaz/bindonce

try to stay under ~800 watchers

UI screws for real
at ~2000
;-)

ehm...

but also…

memory, rendering, ...

they don’t just render anymore

The browser is your
platform

and the VM on which
your application runs

is implemented in
different ways, based on
the browsers themselves

Is AngularJS the future?

Maybe.

Or, I mean...

We will still need backends

or use WP a lot ;-)

but

Natural evolution, decoupled apps

Handy solution for some scenarios

It is a future

Javascript Frameworks And Data Binding
http://tunein.yap.tv/javascript/2012/06/11/javascript-frameworks-and-data-binding/
Angular, Backbone, CanJS and Ember
http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

...yawn...

Alessandro Nadalin

Alessandro Nadalin
@_odino_

Alessandro Nadalin
@_odino_
Namshi | Rocket Internet

Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology

Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology
odino.org

Thanks!
Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology
odino.org

By the way

Wanna join?

We are looking for talented nerds!

We are looking for talented nerds!
frontend engineer

We are looking for talented nerds!
frontend engineer
data engineer

We are looking for talented nerds!
lead frontend engineer
data engineer

Thanks!
Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology
odino.org

Image credits
https://www.flickr.com/photos/santheo/374630020/sizes/l/
http://www.flickr.com/photos/spunkinator/3050946547/sizes/o/in/photostream/
https://www.flickr.com/photos/savidgefamily/6873109431/sizes/l/
https://www.flickr.com/photos/safari_vacation/7496765660/sizes/o/
https://www.flickr.com/photos/fensterbme/439758782/sizes/l/
https://www.flickr.com/photos/dkrape/5154684383/sizes/l/
https://www.flickr.com/photos/kingstongal/2101194332/sizes/o/
https://www.flickr.com/photos/thescott365/3186150930/sizes/l/