Since bumping into AngularJS a few months ago, we decided to invest more and more time developing with it: coming from a PHP background, the shift of paradigm easy due to the use of patterns and intuitive flows: even though this won’t be a very in-depth technical talk, we are going to see why you should consider working with angular: fast single-page apps, DI, ease of testing, being asynchronous, scaling on the clients. Welcome to the future.

1. AngularJS is the future
Alessandro Nadalin - Montreal, February 2014

2. AngularJS

4. 2009

5. SPA

6. example.org/#!/about

8. history.pushState(...)

10. Killer Features

11. Killer Features
2-way data binding

12. Model changes the View

13. View changes the Model

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30. Killer Features
Dependency Injection

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

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

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

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

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

38. Killer Features
Support

46. https://github.com/angular/protractor

47. Killer Features
Directives

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

78. and much much more :)

79. Why do we like
AngularJS?

80. Solid and clear foundation

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

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

83. Works well with the JS ecosystem

84. Works well with the JS ecosystem

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

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

87. Modern API-oriented architectures

88. APIfy everything

90. Easier to scale

91. No sessions on the servers

92. mantain state on the client (LS)

93. What will you hate
about AngularJS?

94. ehm...

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

96. Watchers

97. lotsa bindings, lotsa watchers

98. lotsa watchers, lotsa computation

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

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

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

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

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

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

106. use 1-way data binding if possible

107. https://github.com/Pasvaz/bindonce

108. try to stay under ~800 watchers

109. UI screws for real
at ~2000
;-)

110. ehm...

111. but also…

113. memory, rendering, ...

114. they don’t just render anymore

115. The browser is your
platform

116. and the VM on which
your application runs

117. is implemented in
different ways, based on
the browsers themselves

119. Is AngularJS the future?

120. Maybe.

121. Or, I mean...

122. We will still need backends

123. or use WP a lot ;-)

124. but

125. Natural evolution, decoupled apps

126. Handy solution for some scenarios

127. It is a future

128. 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/

129. ...yawn...

130. Alessandro Nadalin

131. Alessandro Nadalin
@_odino_

132. Alessandro Nadalin
@_odino_
Namshi | Rocket Internet

133. Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology

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

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

136. By the way

137. Wanna join?

138. We are looking for talented nerds!

139. We are looking for talented nerds!
frontend engineer

140. We are looking for talented nerds!
frontend engineer
data engineer

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

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

143. 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/