AngularJS: the Good, the Bad and the Ugly

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

57c612ae64ddcfae16b2965087da71d9?s=128

Gilles Ruppert

May 14, 2014
Tweet

Transcript

  1. AngularJS The Good, The Bad & The Ugly

  2. None
  3. WHO AM I

  4. None
  5. None
  6. None
  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)

  14. None
  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’)

  37. None
  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

  72. None
  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

  82. None
  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