AngularJS: the Good, the Bad and the Ugly

Looking at Angular with its quirks. Presentation given at JSDay 2014 at Verona (http://2014.jsday.it). Video of the presentation: https://vimeo.com/104093926

Transcript

1. AngularJS The Good, The Bad & The Ugly
3. WHO AM I
7. A pre-alpha version
8. v0.0.0
9. The Ugly
10. APIs and naming
11. –Phil Karlton “There are only two hard things in Computer Science: cache invalidation and naming things.”
12. –unknown “and off-by-1 errors.”
13. Service / Factory / Provider (and value)
15. Highlights all singletons service function is instantiated with new factory returns the value that is returned provider is like factory/service but can be configured service, factory, and value are all derived from provider. http://stackoverflow.com/questions/15666048/angular-js- service-vs-provider-vs-factory
16. var app = angular.module(‘examplesApp')! ! app.service('MyService', function () {! this.name = '';! this.greeting = function () {! return 'Hello' +! (this.name ? ' ' : ‘') +! this.name + '!';! };! this.setName = function (name) {! this.name = name;! }! });!
17. var app = angular.module('examplesApp')! ! app.factory('MyFactory', function () {! return {! name: '',! greeting: function () {! return 'Hello' +! (this.name ? ' ' : '') +! this.name + '!';! },! setName: function (name) {! this.name = name;! }! };! })
18. var app = angular.module('examplesApp')! ! app.provider('MyPerson', function () {! var name = '';! this.setDefaultName = function (n) {! name = n;! };! ! this.$get = function () {! return {! name: name,! greeting: function () {! return 'Hello' + ! (this.name ? ' ' : '') + this.name + '!';! },! setName: function (name) {! this.name = name;! }! };! };! })! ! app.config(function (MyPersonProvider) {! MyPersonProvider.setDefaultName('Provider');! })
19. Directives API
20. API properties restrict ‘AEC’ isolate scope =, @, & transclusion link vs compile function
21. Minification
22. // Example code. Isn’t it pretty?! function HelloCtrl($scope) {! $scope.message = 'Normal JS!';! }
23. // Actual project code… HELP!!!! angular.module('myApp', [])! .controller(! 'HelloCtrl',! [! '$scope',! function ($scope) {! $scope.message =! ! ! ! ! ! 'Where is the normal JS?';! }! ]! );
24. Data-binding not always so magic…
25. ! ! app.controller('MainCtrl', function (! $scope,! MyService! $timeout! ) {! MyService.setName('Service');! $scope.greeting = MyService.greeting();! ! $timeout(function () {! MyService.setName(‘JSDay 2014’);! $scope.greeting = MyService.greeting();! }, 5000);! ! });
26. ! ! app.controller('MainCtrl', function (! $scope,! MyService! $timeout! ) {! MyService.setName('Service');! $scope.greetingService = MyService;! ! $timeout(function () {! MyService.setName(‘JSDay 2014');! }, 5000);! });
27. $emit vs $broadcast
28. $scope events 2 different directions: going down & up the scope tree similar to capture and bubble in regular events why expose different API? leads to $rootScope.$emit(‘JUST_SEND_ME_EVERYWHERE’);
29. jsonp implementation
30. generates functions such as angular.callbacks._0 breaks a lot of APIs that don’t handle object notation angular({ JSON_RESPONSE: ‘HERE’ }); alternative: write your own or use jQuery…
31. Monolithic
32. A bit monolithic jqLite $q utility methods (forEach, etc) modules
33. The Bad
34. Directives API
35. Directives API transclusion isolate scope nested directives => to which scope does the code point?
36. wrapping existing plugins manage $scope lifecyle $scope.$apply() $scope.$watch() $scope.$destroy() $scope.$on(‘$destroy’)
38. You’re on your own
39. Modules implementation
40. Modules implementation no dependency manager no AMD or CJS hard to find dependencies which module contains ‘carousel’?
41. Angular Namespace pollution of angular namespace overwrite other factories/directives/services/constants manually namespacing is so PHP 5.2… ng-href, ng-src, etc ng-WTF?
42. Slow with lots of data
43. ! ! ! ! ! ! ! ! ! http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933
44. –Misko Hevery “Unfortunately it is way too easy to add slow comparison into angular, so it is easy to build slow apps when you don't know what you are doing.” emphasis added by presenter
45. Where is the ‘M’?
46. Where is the M? There is no real ‘model’ ngresource helps with loading no convention for modelling your data
47. Browser support
48. https://docs.angularjs.org/guide/ie AngularJS 1.3 is dropping support for IE8 AngularJS 2.0 ‘modern browsers only (auto-update)’ Chrome, FireFox, Opera, Safari, and IE10/11, modern mobile browsers
49. NetMarketShare Screenshot: 8th May 2014, Data for April 2014
50. NetMarketShare Screenshot: 8th May 2014, Data for April 2014
51. Hard to debug
52. Hard to debug point of entry can be hard to find difficult to check output with debugger dedicated tool to debug says it all… (batarang) declarative style can be hard with large html files
53. Teams
54. Teams no conventions no structure no guidelines best practices not well defined (yet?) 1 module per file? Per folder? Per app?
55. The Good
56. Data-binding
57. Data binding very powerful and easy scopes are in the prototype chain complex, auto-updating UIs easy components
58. // data binding! ! function MainCtrl($scope) {! $scope.isOpen = false;! $scope.toggle = function () {! $scope.isOpen = !$scope.isOpen;! };! }! ! ! <div ng-controller="MainCtrl">! <button ng-click="toggle()">Toggle</ button>! <div ng-show="isOpen">! I'm hidden by default!! </div>! </div>
59. // data binding (simpler)! ! function MainCtrl($scope) {! }! ! <div ng-controller="MainCtrl">! <button ng-click="isOpen = !isOpen”>! Toggle! </button>! <div ng-show="isOpen">! I'm hidden by default!! </div>! </div>
60. POJ Plain Old JavaScript
61. POJO as view models lean RESTful APIs old legacy APIs convoluted structures deep trees very flexible and easy to use
62. DSL for your app
63. DSL for your app custom elements html macros leads to consistency once build, easy to create more pages/widgets
64. <product ng-repeat=“product in products” />
65. <article class=“product”> <img ng-src=“smith-wesson.jgp” alt=“Smith and Wesson Gun> <h1>Smith and Wesson Gun</h1> <p>Blondie liked it, so will you!</p> </article>
66. Security
67. Popularised important concepts
68. Popularised important concepts Dependency Injection web components testing package management
69. Great tooling
70. Tooling ngdoc protractor (modern version of scenario runner) karma test runner
71. Active community
73. Documentation is improving a lot!
74. Google
75. AngularJS 2.0 written in ES6 (transpiled into ES5) better D.I. system ES6 module system more modular better performance simpler
76. Conclusion
77. Easy to get started
78. Difficult to master
79. – thinkster.io “The learning curve of AngularJS can be described as a hockey stick. Initially getting off the ground with apps featuring basic functionality is delightfully easy.”
80. –thinkster.io “However, when apps eventually grow large or complicated, structure without heed to Angular’s inner workings will cause development to become awkward and cumbersome.”
81. http://nathanleclaire.com/images/smooth-angular-tips/js-learning-curves.jpeg
83. http://romajs.org
84. –Blondie “You see, in this world there’s two kinds of people, my friend: Those with loaded guns and those who dig. You dig.”
85. Thank you gillesruppert