AngularJS is the futureAlessandro Nadalin - Montreal, February 2014

AngularJS

2009

SPA

example.org/#!/about

history.pushState(...)

Killer Features

Killer Features2-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 FeaturesDependency 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 FeaturesSupport

https://github.com/angular/protractor

Killer FeaturesDirectives

<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

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!’);});

Works well with the JS ecosystem

Works well with the JS ecosystem

.container(data-bindonce).row

#my-whateverp {{ myModel.text }}

Works well with the JS ecosystem

.container(data-bindonce).row

#my-whateverinput(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 hateabout 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 realat ~2000

;-)

ehm...

but also…

memory, rendering, ...

they don’t just render anymore

The browser is your platform

and the VM on whichyour 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 Bindinghttp://tunein.yap.tv/javascript/2012/06/11/javascript-frameworks-and-data-binding/

Angular, Backbone, CanJS and Emberhttp://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!

frontend engineer

We are looking for talented nerds!

frontend engineer

We are looking for talented nerds!

data engineer

lead frontend engineer

We are looking for talented nerds!

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/