Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
•
5 likes•5,588 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Similar to Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA) (20)
More from Alessandro Nadalin
More from Alessandro Nadalin (20)
Recently uploaded
Recently uploaded (20)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
- 1. AngularJS is the future Alessandro Nadalin - Montreal, February 2014
- 2. AngularJS
- 4. 2009
- 5. SPA
- 10. Killer Features
- 11. Killer Features 2-way data binding
- 12. Model changes the View
- 13. View changes the Model
- 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" />' } }
- 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(); }
- 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; } } });
- 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
- 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...
- 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
- 108. try to stay under ~800 watchers
- 109. UI screws for real at ~2000 ;-)
- 110. ehm...
- 111. but also…
- 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
- 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