Wednesday 20 February 2013

Developer Diary - AngularJS: Writing Directives

Continuing the AngularJS research, I have written a summary of this video on Writing Directives:
http://www.youtube.com/watch?v=WqmeI5fZcho

Compile vs Link Functions

  • The compile function:
    • has no access to the scope
    • called once only
    • accesses the template and modifies it
    • contains common elements that is in all instances
  • The link function:
    • has access to the scope
    • called per instance
      • i.e. n times for a n-object repeater
    • links template instances to the scope
  • An object orientated analogy is that:
    • compile works on the template "class"
    • link works on the template "object" (instances)

Updating Angular

  • When updating the scope outside of the Angular world, you need to inform Angular of the change (so that Angular updates the UI).
      1. $scope.$apply(function doStuff() {  
      2.     // do stuff that updates the scope  
      3.  });  
  • Within the "doStuff" function, you can use parameters via $parse
      1. // parse returns a "class" which has functions to read/write to the given scope parameter.  
      2. $parse("paramterName")  
      3.     .assign(scope, value);  
  • Outside the Angular world typically means calling jQuery, handling non-angular events, etc. from inside a directive.

Scopes

  • Directives should ideally have isolated scopes for better encapsulation
  • These scopes can also inherit and interact with a parent scope
    • This is achieved through using "@", "=" and "&" symbols....
      • Not 100% on how it works exactly, but found information on it here: http://docs.angularjs.org/guide/directive
      • '@' seems to copy the given value from parent scope
      • '=' forms a bi-directional relationship between the directive scope and parent scope
      • '&' is a bit of an enigma to me, I don't quite get it....
        • "provides a way to execute an expression in the context of the parent scope"???

Transclusion

  • Transclusion can be used to nest directives/components
    • This could potentially be used to nest views
    • To do this, the transclude flag needs to be true
    • The position where the transcluded stuff is located is specified with the "ng-transclude" attribute.
  • A transcluded component is given a specific scope
    • This scope is a sibling to the scope of the directive it is contained in.
      • This ensures the transcluded component's scope is enscapsulated away from the directive's scope and visa versa.
    • The transcluded component's scope and the directive's scope share the same parent.
      • Typically this parent is the controller's scope.

Developer Diary - AngularJS: Best Practices

Recently I have been exploring AngularJS as our new "weapon of choice" for UI development at work. Learning it can be difficult as the documentation is a bit dense. However I have found some awesome videos given by the makers on YouTube!

In these series of posts I will be giving my take on the videos and I welcome any feedback!

Summary of key points I found in this video on Best Practices:

Application Structure

  • Use a standard, it helps!
  • Google recommend Yeoman
    • This looks absolutely awesome but it doesn't work in Windows atm :(

Script Loading

  • Asynchronous loaders cannot use ng-app attribute to initialise your application
  • Require.js comes recommended for dependency management

Model

  • When changing the model outside of Angular, use $apply function so Angular is notified and updates the UI

Deployment

  • Minification may have limited benefit in Angular because files should already be small (in theory).
    • However minification may help, you need to measure and test this yourself.
  • Similarly concatenation may have limited benefit (again measure and test across multiple browsers).
  • Ensure the server is "gzip" enabled
  • index.html file should be non-cacheable
  • Cache by these by version (I don't really understand this...):
    • views
    • code
    • images
    • css

Separation of Concerns

  • Controllers should focus on:
    • what HAPPENS when a user does something
    • where to GET data from
  • Services should be:
    • Singleton
      • allowing for caching of data which is not destroyed between navigation
    • Hold logic required in multiple locations

Scope

  • Views should treat scope as read-only
  • Controllers should treat scope as write-only
  • Scope != Model, scope just references your model.

Performance

  • For optimum performance, ensure $watch getter function is:
    • Fast
    • Idempotent
    • Does not contain mutating logic
  • The number of bindings per page also heavily affects the performance.
  • Doing ng-hide doesn't actually remove the hidden component
    • This can lead to slow performance.
    • Use ng-include and ng-view instead
  • Avoid having >100 items in a repeater
    • The performance may suffer
    • Also UX may suffer, humans aren't good at taking in that much information at once.
  • Filters can be expensive
    • Recommended that an "intermediate model" is used instead.

Directives

  • These maybe simplified in Angular 2.0
  • For IE compatibility, the best form of directive to use is attribute.

Other Points

  • {{ }} should be avoided on the index.html because it can cause "screen flash" as the binding is updated after angular is loaded
    • ng-bind should be used instead
  • Angular 2.0 has some potentially interesting features:
    • Simplification of directives
    • Animations built in
    • Server-side pre-rendering of views

Thursday 14 February 2013

A Good Day To Die Hard

When the tag line reads: "Like Father, Like Son, Like Hell" you immediately know this film is going to dreadful and somewhat awesome at the same time. Sadly for me it was just mostly mediocre and dissatisfying.

What was most frustrating thing about the film was the lack of effort. Despite being a Die Hard film there is very little "full on action", there is just loads of shooting and things just mostly crash and/or explode. There is neither any grittiness or grandeur to the whole affair.

It goes without saying that this film is a no-brainer but the whole thing is just massive face-palm. The plot is thread bare at best and the dialogue is diabolically bad. You don't want forced and painful bonding in a Die Hard film, especially when it is self depreciating. Throwing it in people's faces that you are making people cringe just adds insult to injury.

The whole sentiment is probably all summed up by a piss poor attempt to sexualise the film with the introduction of Yuliya Snigir's character. I have to say that she is probably one of the worst actresses I have seen in a long time, stick to the modelling...

Long story short, passable film if you enjoy Die Hard and you are literally paying no money to watch it... Otherwise just wait until you come across it on TV and there is nothing better to do >.<