Your SlideShare is downloading. ×
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

4,208
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 …

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

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,208
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
36
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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