Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)

5,045 views

Published on

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.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
5,045
On SlideShare
0
From Embeds
0
Number of Embeds
539
Actions
Shares
0
Downloads
40
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)

  1. 1. AngularJS is the future Alessandro Nadalin - Montreal, February 2014
  2. 2. AngularJS
  3. 3. 2009
  4. 4. SPA
  5. 5. example.org/#!/about
  6. 6. history.pushState(...)
  7. 7. Killer Features
  8. 8. Killer Features 2-way data binding
  9. 9. Model changes the View
  10. 10. View changes the Model
  11. 11. http://jsfiddle.net/WLUPj/2/
  12. 12. function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; }
  13. 13. <div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>
  14. 14. <div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>
  15. 15. <div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>
  16. 16. function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; }
  17. 17. <div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>
  18. 18. function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; } Title: <input ng-model="title">
  19. 19. function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; } Title: <input ng-model="title">
  20. 20. <div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>
  21. 21. directive('zippy', function(){ return { restrict: 'A', replace: true, scope: { title:'=zippy' }, template: '<input type="text" ng-model="title" />' } }
  22. 22. directive('zippy', function(){ return { restrict: 'A', replace: true, scope: { title:'=zippy' }, template: '<input type="text" ng-model="title" />' } }
  23. 23. directive('zippy', function(){ return { restrict: 'A', replace: true, scope: { title:'=zippy' }, template: '<input type="text" ng-model="title" />' } }
  24. 24. http://docs.angularjs.org/guide/databinding
  25. 25. Killer Features Dependency Injection
  26. 26. function Ctrl($scope) { // WHAT THE HECK SHALL I DO HERE??? }
  27. 27. function Ctrl($scope, $location) { // WHAT THE HECK SHALL I DO HERE??? }
  28. 28. function Ctrl($scope, $location) { // WHAT THE HECK SHALL I DO HERE??? }
  29. 29. function Ctrl($scope, $location) { $scope.whereAmI = $location.host(); }
  30. 30. http://jsfiddle.net/9J7u5/2/
  31. 31. Killer Features Support
  32. 32. https://github.com/angular/protractor
  33. 33. Killer Features Directives
  34. 34. <div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div> </div>
  35. 35. <div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div> </div>
  36. 36. <div ng-app="confoo"> <div ng-controller="Ctrl"> <div menu></div> </div> </div>
  37. 37. <div ng-app="confoo"> <div ng-controller="Ctrl"> <div data-menu></div> </div> </div>
  38. 38. var links = { home: { link: 'http://example.com', title: 'Home' }, about: { link: 'http://example.com/about', title: 'About Us' } };
  39. 39. var links = { home: { link: 'http://example.com', title: 'Home' }, about: { link: 'http://example.com/about', title: 'About Us' } };
  40. 40. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
  41. 41. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
  42. 42. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
  43. 43. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
  44. 44. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
  45. 45. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
  46. 46. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
  47. 47. <div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div> </div>
  48. 48. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
  49. 49. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
  50. 50. <div ng-app="confoo"> <div ng-controller="Ctrl"> <div data-menu /> </div> </div>
  51. 51. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
  52. 52. <div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div> </div>
  53. 53. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
  54. 54. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
  55. 55. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
  56. 56. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
  57. 57. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
  58. 58. <body ng-app="confoo"> <confoo-header> <div> <div ng-controller=”MainCtrl”> <confoo-sidebar> </div> <confoo-footer> </div>
  59. 59. <body ng-app="confoo"> <confoo-header> <div> <div ng-controller=”MainCtrl”> <confoo-sidebar> </div> <confoo-footer> </div>
  60. 60. <body ng-app="confoo"> <confoo-header> <div> <div ng-controller=”MainCtrl”> <confoo-sidebar> </div> <confoo-footer> </div>
  61. 61. <body ng-app="confoo"> <confoo-header> <div> <div confoo-main-content> <confoo-sidebar> </div> <confoo-footer> </div>
  62. 62. http://jsfiddle.net/Lj6CH/6/
  63. 63. “Controllers, Directives and Services” http://is.gd/QlGYID
  64. 64. and much much more :)
  65. 65. Why do we like AngularJS?
  66. 66. Solid and clear foundation
  67. 67. $routeProvider.when(‘/about’, { templateUrl: '/views/about.html', controller: 'AboutController', }); Solid and clear foundation
  68. 68. $http({ method: 'GET', url: '/milk.html }). success(function(...) { alert(‘YEAH!’); }). error(function(...) { alert(‘AWWW, SNAP!’); }); Solid and clear foundation
  69. 69. Works well with the JS ecosystem
  70. 70. Works well with the JS ecosystem
  71. 71. .container(data-bindonce) .row #my-whatever p {{ myModel.text }} Works well with the JS ecosystem
  72. 72. .container(data-bindonce) .row #my-whatever input(ng-model=”myModel”) Works well with the JS ecosystem
  73. 73. Modern API-oriented architectures
  74. 74. APIfy everything
  75. 75. Easier to scale
  76. 76. No sessions on the servers
  77. 77. mantain state on the client (LS)
  78. 78. What will you hate about AngularJS?
  79. 79. ehm...
  80. 80. https://www.destroyallsoftware.com/talks/wat
  81. 81. Watchers
  82. 82. lotsa bindings, lotsa watchers
  83. 83. lotsa watchers, lotsa computation
  84. 84. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
  85. 85. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul> prepare for N...
  86. 86. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul> N*1
  87. 87. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul> N*2
  88. 88. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} <menu ng-if=”item.links” links=”item.links” /> </a> </li> </ul>
  89. 89. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} <menu ng-if=”item.links” links=”item.links” /> </a> </li> </ul>
  90. 90. use 1-way data binding if possible
  91. 91. https://github.com/Pasvaz/bindonce
  92. 92. try to stay under ~800 watchers
  93. 93. UI screws for real at ~2000 ;-)
  94. 94. ehm...
  95. 95. but also…
  96. 96. memory, rendering, ...
  97. 97. they don’t just render anymore
  98. 98. The browser is your platform
  99. 99. and the VM on which your application runs
  100. 100. is implemented in different ways, based on the browsers themselves
  101. 101. Is AngularJS the future?
  102. 102. Maybe.
  103. 103. Or, I mean...
  104. 104. We will still need backends
  105. 105. or use WP a lot ;-)
  106. 106. but
  107. 107. Natural evolution, decoupled apps
  108. 108. Handy solution for some scenarios
  109. 109. It is a future
  110. 110. 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/
  111. 111. ...yawn...
  112. 112. Alessandro Nadalin
  113. 113. Alessandro Nadalin @_odino_
  114. 114. Alessandro Nadalin @_odino_ Namshi | Rocket Internet
  115. 115. Alessandro Nadalin @_odino_ Namshi | Rocket Internet VP Technology
  116. 116. Alessandro Nadalin @_odino_ Namshi | Rocket Internet VP Technology odino.org
  117. 117. Thanks! Alessandro Nadalin @_odino_ Namshi | Rocket Internet VP Technology odino.org
  118. 118. By the way
  119. 119. Wanna join?
  120. 120. We are looking for talented nerds!
  121. 121. We are looking for talented nerds! frontend engineer
  122. 122. We are looking for talented nerds! frontend engineer data engineer
  123. 123. We are looking for talented nerds! lead frontend engineer data engineer
  124. 124. Thanks! Alessandro Nadalin @_odino_ Namshi | Rocket Internet VP Technology odino.org
  125. 125. 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/

×