1. Hey, I just met
AngularJS!
Alessandro Nadalin, NAMSHI.com - Madrid, November 2014

2. small, internal tools

3. mobile

4. checkout.namshi.com

5. Killer Features

6. Killer Features
2-way data binding

7. Model changes the View

8. View changes the Model

10. http://jsfiddle.net/okL0e297/

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

12. <div ng-app="myModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
Title again: <input ng-model="title">
</div>
</div>

13. <div ng-app="myModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
Title again: <input ng-model="title">
</div>
</div>

14. <div ng-app="myModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
Title again: <input ng-model="title">
</div>
</div>

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

16. <div ng-app="myModule">
<div ng-controller="Ctrl">
Title: <input ng-model="title">
<hr>
Title again: <input ng-model="title">
</div>
</div>

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

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

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

21. Killer Features
Dependency Injection

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

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

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

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

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

29. Killer Features
Support

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

38. Killer Features
Directives

39. <div ng-app="sf-con">
<div ng-controller="Ctrl">
<menu />
</div>
</div>

40. <div ng-app="sf-con">
<div ng-controller="Ctrl">
<menu />
</div>
</div>

41. <div ng-app="sf-con">
<div ng-controller="Ctrl">
<div menu></div>
</div>
</div>

42. <div ng-app="sf-con">
<div ng-controller="Ctrl">
<div data-menu></div>
</div>
</div>

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

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

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

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

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

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

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

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

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

52. <div ng-app="sf-con">
<div ng-controller="Ctrl">
<menu />
</div>
</div>

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

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

55. <div ng-app="sf-con">
<div ng-controller="Ctrl">
<div data-menu />
</div>
</div>

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

57. <div ng-app="sf-con">
<div ng-controller="Ctrl">
<menu />
</div>
</div>

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

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

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

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

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

63. <body ng-app="sf-con">
<sf-con-header>
<div>
<div ng-controller=”MainCtrl”>
<sf-con-sidebar>
</div>
<sf-con-footer>
</div>

64. <body ng-app="sf-con">
<sf-con-header>
<div>
<div ng-controller=”MainCtrl”>
<sf-con-sidebar>
</div>
<sf-con-footer>
</div>

65. <body ng-app="sf-con">
<sf-con-header>
<div>
<div ng-controller=”MainCtrl”>
<sf-con-sidebar>
</div>
<sf-con-footer>
</div>

66. <body ng-app="sf-con">
<sf-con-header>
<div>
<div sf-con-main-content>
<sf-con-sidebar>
</div>
<sf-con-footer>
</div>

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

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

69. and much much more :)

70. Why do we like
AngularJS?

71. Solid and clear foundation

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

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

74. Works well with the JS ecosystem

75. Works well with the JS ecosystem

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

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

78. Modern API-oriented architectures

79. APIfy everything

80. Easier to scale

81. No sessions on the servers

82. maintain state on the client (LS)

84. What will you hate
about AngularJS?

85. ehm...

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

87. Watchers

88. lotsa bindings, lotsa watchers

89. lotsa watchers, lotsa computation

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

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

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

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

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

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

97. use 1-way data binding if possible

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

99. try to stay under ~800 watchers

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

101. Will probably be able to
turn watchers off in
Angular 2.0

102. ehm...

103. but also…

105. memory, rendering, ...

106. they don’t just render anymore

107. The browser is your
platform

108. and the VM on which
your application runs

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

111. What will you need to
know about AngularJS?

112. “Best way to serve AngularJS
from a Symfony2 app?”

115. Angular 1.3

116. Terrific performance
improvements (at a cost)

117. Homogeneous VS heterogeneous team

118. Learning curve might be harder than
what you think

119. The asynchronous trap

120. Get someone to dive into DevTools

121. Get someone to dive into DevTools
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1

122. Get someone to dive into DevTools
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
http://devtoolsecrets.com/

123. Get someone to dive into DevTools
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
http://devtoolsecrets.com/
http://devtoolstips.com/

124. Get someone to dive into DevTools
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
http://devtoolsecrets.com/
http://devtoolstips.com/
http://addyosmani.com/blog/tag/devtools/

126. (almost) no question

127. Testing will always be hard

128. AngularJS 2.0

129. Controllers, Directive Definition,
$scope, angular.module, jqLite

130. http://www.infoq.com/news/2014/10/angular-2-atscript

131. AtScript
https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit#heading=h.c5wfaadh5aor

132. Angular design documents
https://drive.google.com/drive/u/0/#folders/0BxgtL8yFJbacUnUxc3l5aTZrbVk

133. Shit’s gonna change

134. Is AngularJS the future?

135. Maybe.

136. Or, I mean...

137. We will still need backends

138. Or use WordPress a lot

139. but

140. Natural evolution, decoupled apps

141. Handy solution for some scenarios

142. It is a future

144. Isomorphic apps, “same” code on the
client and the server

145. Feedback?

146. AngularJS has served as a great introduction
to scaling on the client.
A good team will find it easy after a couple weeks.
On a larger scale you might want to
look into something less full-stack.

147. AngularJS has served as a great introduction
to scaling on the client.
A good team will find it easy after a couple weeks.
On a larger scale you might want to
look into something less full-stack.

148. AngularJS has served as a great introduction
to scaling on the client.
A good team will find it easy after a couple weeks.
On a larger scale you might want to
look into something less full-stack.

149. Without paying too much attention,
performances are very decent.
Very easy for a backend / HMVC guy
to understand how it works.
Tooling is extremely powerful.

150. Without paying too much attention,
performances are very decent.
Very easy for a backend / HMVC guy
to understand how it works.
Tooling is extremely powerful.

151. Without paying too much attention,
performances are very decent.
Very easy for a backend / HMVC guy
to understand how it works.
Tooling is extremely powerful.

152. Write smaller apps without getting
tangled in a single codebase, reuse modules.
Decouple, decouple, decouple.
Decouple again.

153. Write smaller apps without getting
tangled in a single codebase, reuse modules.
Decouple, decouple, decouple.
Decouple again.

154. Write smaller apps without getting
tangled in a single codebase, reuse modules.
Decouple, decouple, decouple.
Decouple again.

155. ...yawn...

156. Alessandro Nadalin

157. Alessandro Nadalin
@_odino_

158. Alessandro Nadalin
@_odino_
Namshi

159. Alessandro Nadalin
@_odino_
Namshi
VP Technology

160. Alessandro Nadalin
@_odino_
Namshi
VP Technology
odino.org

161. Thanks!
Alessandro Nadalin
@_odino_
Namshi
VP Technology
odino.org

162. tech.namshi.com/join-us
we are hiring!
tech.namshi.com
github.com/namshi
twitter.com/TechNamshi