Thursday, December 12, 2013

Things need to know about angularjs :
Data copied from http://codigovivo.com/2013/06/09/what-to-know-to-be-an-expert-in-angularjs/

In Angularjs we need to know its “core” very well. i.e. Dependency Injection, Double binding, Directives.
I think of them as the three pillars of AngularJs

Dependency Injection

It´s the heart of angular used to organize the code in single units of functionality/responsibility and to make it Testable!!!!
               What is the minimum you should know?
      1. The Concept: What is IoC? Martin Fowler has a great blog entry where he explains what it is and what are its benefits regarding other mechanisms like the service locator for example.
      2. You need to understand what are the modules, what is the difference between calling ‘value’, ‘factory’, ‘service’, ‘constant’, ‘directive’.
      3. Understand providers, and how to use them to configure your injectable objects in the modules’ config function.
      4. Know all the important services that are provided by angular like the $http, $route, $location, etc…..
        I personally recommend to read and understand the code of these services. The documentation is not always the best and as we all know, the only documentation that never gets outdated it´s the code itself.
      5. Learn to develop OO this may seem obvious but I´ve found many developers especially on the frontend that are not use to OO.
        You need to know how to decouple the code into single units of responsibility.  I don´t want to start a OO discussion here but I will give you two rules that I always try to follow to keep my code readable and maintainable.
        - Keep the things that change together as close as possible and try to decouple them as much as possible from other functionalities.
        - Do not let your objects know too much about the insides of other objects.
      6. Design patterns are a plus Not much to say. If you don´t know what I´m talking about go to amazon type ‘Design Patterns’ and buy the book that fits your taste better.
      7. Learn to use $q promises whenever asynchrony is involved. A promise is the result of an asynchronous execution. Angular use them on many different services and you should to. Once you´ve master them it will be much more easier to deal with JavaScript non-blocking nature and asynchrony in general.

Double Binding

                 Angular double binding is one of the concepts that people get sooner but at the same time don´t really fully understand how to use it.
What is the minimum you should know?
      1. Understand the reason behind it. Angular´s double binding take out DOM manipulation from the logic of our app.  I´m sure some minds are about to explode with what I´m about to say but jQuery is not really needed anymore with Angular. Ok. I have to say that I do still use jQuery in my apps but that is because of its plugin libraries like jQueryUI or twitter bootstrap.
        My point is that jQuery is a DOM manipulation framework that abstracts you from the insane differences that you find in the different browsers out there. And for that you have the scopes, you should rely on double binding whenever you need to update the DOM.
      2. Understand scopes hierarchies and the difference between an inherited scope and an isolated scope.
      3. Learn to use controllers. Maybe it´s better if I say learn the MVC Pattern. Controllers are there to prepare the model of a certain part of the view.
        They should not contain DOM manipulation of any kind (DOM manipulation should go into directives) or any kind of business rules/server communication in them (business rules and server communication should go into different services that can be reused among the different controllers)
        Your controllers should be small and simple. They are there to prepare the model and maybe to format the data before is displayed on the view. For anything else you should rely on injectable services..
      4. Learn to use $cope events to communicate with controllers and directives.
      5. Try to keep your scopes small and simple, the less functions it contains, the better.
        Angular uses dirty checking to do the double binding so if you put a function make sure it does not do any heavy processing. Otherwise you´ll end up with some serious performance problems.

Directives

Directives are hard to build, to maintain and to some extend to test.
Many people ask how can you build complex directives and In my opinion the best answer is Don´t build complex directives.
I should clarify this a bit. I´m not saying that you must not build complex UI components, all I´m saying is that you must keep the directive part of the component small. Whenever possible abstract all the business rules into different services and make the directive use those services.
Complex UI components should be seen as a set of directives and services that work together to bring the components’ functionality to work. Do not try to build a complex ui component in a single directive. I´ve done it and it´s hell.
What is the minimum you should know?
      1. Understand all the possible properties of a directives definition object. You can use Angular´s documentation  except for the part where it talks about transcludes I think is great and with great examples.
      2. Understand transcludes and the difference between transcluding the ‘content’ or the ‘element’ itself.
      3. Learn to take advantage of the directives controller. Unlike the linking function this only gets executed one time and it is great to share data and functionalities with child directives.
      4. Understand the difference between the compile function and the linking function.
      5. Understand how the ngModel and the ngModelController work. They are used to format data from the model to the view and to parse data from the view to the model.  They are also used in the validation.  A good understanding of both will help you develop better directives.
      6. Understand Angular’s validation. Like in the previous point, its understanding will help you build better directives.  A hint, take a look at the form directive and the formControllers code.
      7. Instead of using the $rootScope to communicate with your controllers and services, learn to use scope events and specific services to communicate.

Unit Testing

I know I said there were three pillars but testing is inherent to all of them. You must unit test your code as much as possible, even directives.
I´ve said unit testing because that is the minimum you should have. Integration tests and E2E test are also very important but they should come once you have your suite unit tests.  They will help you deal with all the inconsistences of the different browsers your app may need to support.
Here you have a great link from ‘year of moo’ that explains how to test your Angular app.
I hope you guys enjoyed this post and I would love to know what you think about it.

No comments:

Post a Comment