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
   

   View Slide

2. View Slide

3. WHO AM I
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. A pre-alpha version
   

   View Slide

8. v0.0.0
   

   View Slide

9. The Ugly
   

   View Slide

10. APIs and
    naming
    

    View Slide

11. –Phil Karlton
    “There are only two hard things
    in Computer Science: cache
    invalidation and naming things.”
    

    View Slide

12. –unknown
    “and off-by-1 errors.”
    

    View Slide

13. Service / Factory / Provider
    (and value)
    

    View Slide

14. View Slide

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
    

    View Slide

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;!
    }!
    });!
    

    View Slide

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;!
    }!
    };!
    })
    

    View Slide

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');!
    })
    

    View Slide

19. Directives API
    

    View Slide

20. API properties
    restrict ‘AEC’
    isolate scope
    =, @, &
    transclusion
    link vs compile function
    

    View Slide

21. Minification
    

    View Slide

22. // Example code. Isn’t it pretty?!
    function HelloCtrl($scope) {!
    $scope.message = 'Normal JS!';!
    }
    

    View Slide

23. // Actual project code… HELP!!!!
    angular.module('myApp', [])!
    .controller(!
    'HelloCtrl',!
    [!
    '$scope',!
    function ($scope) {!
    $scope.message =!
    ! ! ! ! ! 'Where is the normal JS?';!
    }!
    ]!
    );
    

    View Slide

24. Data-binding not always so
    magic…
    

    View Slide

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);!
    !
    });
    

    View Slide

26. !
    !
    app.controller('MainCtrl', function (!
    $scope,!
    MyService!
    $timeout!
    ) {!
    MyService.setName('Service');!
    $scope.greetingService = MyService;!
    !
    $timeout(function () {!
    MyService.setName(‘JSDay 2014');!
    }, 5000);!
    });
    

    View Slide

27. $emit
    vs
    $broadcast
    

    View Slide

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’);
    

    View Slide

29. jsonp implementation
    

    View Slide

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…
    

    View Slide

31. Monolithic
    

    View Slide

32. A bit monolithic
    jqLite
    $q
    utility methods (forEach, etc)
    modules
    

    View Slide

33. The Bad
    

    View Slide

34. Directives API
    

    View Slide

35. Directives API
    transclusion
    isolate scope
    nested directives
    => to which scope does the code point?
    

    View Slide

36. wrapping existing plugins
    manage $scope lifecyle
    $scope.$apply()
    $scope.$watch()
    $scope.$destroy()
    $scope.$on(‘$destroy’)
    

    View Slide

37. View Slide

38. You’re on your own
    

    View Slide

39. Modules implementation
    

    View Slide

40. Modules implementation
    no dependency manager
    no AMD or CJS
    hard to find dependencies
    which module contains ‘carousel’?
    

    View Slide

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?
    

    View Slide

42. Slow with lots of data
    

    View Slide

43. !
    !
    !
    !
    !
    !
    !
    !
    !
    http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933
    

    View Slide

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
    

    View Slide

45. Where is the ‘M’?
    

    View Slide

46. Where is the M?
    There is no real ‘model’
    ngresource helps with loading
    no convention for modelling your data
    

    View Slide

47. Browser support
    

    View Slide

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
    

    View Slide

49. NetMarketShare
    Screenshot: 8th May 2014, Data for April 2014
    

    View Slide

50. NetMarketShare
    Screenshot: 8th May 2014, Data for April 2014
    

    View Slide

51. Hard to debug
    

    View Slide

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
    

    View Slide

53. Teams
    

    View Slide

54. Teams
    no conventions
    no structure
    no guidelines
    best practices not well defined (yet?)
    1 module per file? Per folder? Per app?
    

    View Slide

55. The Good
    

    View Slide

56. Data-binding
    

    View Slide

57. Data binding
    very powerful and easy
    scopes are in the prototype chain
    complex, auto-updating UIs
    easy components
    

    View Slide

58. // data binding!
    !
    function MainCtrl($scope) {!
    $scope.isOpen = false;!
    $scope.toggle = function () {!
    $scope.isOpen = !$scope.isOpen;!
    };!
    }!
    !
    !
    !
    Toggle
    button>!
    !
    I'm hidden by default!!
    !
    
    

    View Slide

59. // data binding (simpler)!
    !
    function MainCtrl($scope) {!
    }!
    !
    !
    !
    I'm hidden by default!!
    !
    
    

    View Slide

60. POJ
    Plain Old JavaScript
    

    View Slide

61. POJO as view models
    lean RESTful APIs
    old legacy APIs
    convoluted structures
    deep trees
    very flexible and easy to use
    

    View Slide

62. DSL for your app
    

    View Slide

63. DSL for your app
    custom elements
    html macros
    leads to consistency
    once build, easy to create more pages/widgets
    

    View Slide

64. ng-repeat=“product in products”
    />
    

    View Slide

65. 
    alt=“Smith and Wesson Gun>
    Smith and Wesson Gun
    Blondie liked it, so will you!
    
    

    View Slide

66. Security
    

    View Slide

67. Popularised important
    concepts
    

    View Slide

68. Popularised important
    concepts
    Dependency Injection
    web components
    testing
    package management
    

    View Slide

69. Great tooling
    

    View Slide

70. Tooling
    ngdoc
    protractor (modern version of scenario runner)
    karma test runner
    

    View Slide

71. Active community
    

    View Slide

72. View Slide

73. Documentation
    is improving
    a lot!
    

    View Slide

74. Google
    

    View Slide

75. AngularJS 2.0
    written in ES6 (transpiled into
    ES5)
    better D.I. system
    ES6 module system
    more modular
    better performance
    simpler
    

    View Slide

76. Conclusion
    

    View Slide

77. Easy to get started
    

    View Slide

78. Difficult to master
    

    View Slide

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.”
    

    View Slide

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.”
    

    View Slide

81. http://nathanleclaire.com/images/smooth-angular-tips/js-learning-curves.jpeg
    

    View Slide

82. View Slide

83. http://romajs.org
    

    View Slide

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.”
    

    View Slide

85. Thank you
    gillesruppert
    

    View Slide