$30 off During Our Annual Pro Sale. View Details »

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

Gilles Ruppert

May 14, 2014
Tweet

More Decks by Gilles Ruppert

Other Decks in Technology

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