Performance analysis of a shopping process

I wanted to try something a bit different and here is my “so called creativity”. :)

Before I go into the story I just want to introduce a term called “Performance analyst” which I’ve never heard under software job titles  here in our country(It must be a sub category under software quality engineering anyway)but let it be an imaginary one where software  performance and cost factors will be analyzed.

A software engineer (male) is asked to go for a grocery shopping and once he comes back to home, his wife who is an experienced and exceptional performance analyst gives him a detailed report on how effective the shopping process was.

Here is the report

Dear XXXX,

The overall performance of the shopping process was quite ok and all the assigned tasks have been completed. But there are few concerns let me point them out.

     Time consumption - The grocery shop is only X km away from here and you have taken a taxi when returning. So it would have taken only Y mins even if you crawl from home to the shop and to come back. It seems some additional processes like sighting girls on the way or at the grocery shop which is completely irrelevant to the given task were going on and it should be avoided in the future to achieve the super performance.

     Cost - effectiveness – The costly wheat flour that was bought violates the policy on cost effectiveness. I would like enforce the idea here again that whatever we buy should be in a high quality with a reasonable price. We cannot afford to go for the costliest brands. 

     Cost of Transport – The taxi has been used to carry the items to the home which is considered to be the cheaper way normally but not in today’s case.

As a normal taxi was taken rather than meter taxi, again the best possible option was not considered and it costed x bucks more.

    Selection of best providers -. Fruits were not in a very good condition which could have been avoided by going to some other place. It is great to buy everything at one place but it is not quite practical and we need to be aware of the specialized providers. 

    Quality– The vegetables seem to be affected by worms and extra care must be given on finding worm free veges.

Please keep these concerns in the mind and please make sure that you will get a highly positive feedback on your next shopping process.

Angular JS vs Ember JS

 There are wide varieties of java script frame works used in the software industry nowadays. While I was learning one of those frameworks called “Angular JS” I got to know a bit about one other framework called “Ember JS”. I have played a bit around angular code but when it comes ember JS I’m yet to go into detail of how to implement/ how to write code in ember JS.

Anyway let me share what I have found on “Angular JS vs Ember Js”. And this basic understanding might help us to choose among multiple available frameworks.

Common features of Angular and Ember

1)      Two way binding- In two way binding the view and the model is fully synchronized. That means when we update the view the model will be updated automatically and vice versa. Only a few java script frameworks support two way binding and angular & Ember are among them.

2)      Routing support – Angular and Ember both support routing but having said that Ember has a robust routing process.

Strengths of Angular JS

1.  Clear separation of view and model- Our html code and java script code is not mixed as in Jquery.      We  put the script logic/model in separate file(s) and bind them to the html using some angular tags called “directives”.
2.     Code Expressiveness – There is a feature called “Template expanding directives” in angular which helps developers to move a part of html code to a new html file and allow us to load that sub html file dynamically in the main file. This increases the readability of the code. And it makes the code reusable.
3. Simple bootstrapping- Angular has the simplest bootstrapping process of any modern framework I can think of. Just include one JS file, and add an ng-app directive to the page and you're in business.   
4. Constructor-based Dependency Injection- This framework is built around its own IOC container that actually uses a pseudo-constructor-based DI approach that is generally preferred by developers from most contemporary backgrounds (such as Java or C#). This makes Angular highly testable, as well as providing the ability for Angular to easily detect circular dependencies.
5. Reusable components –Please refer the second point #2 above. 
6. Easy to learn

Strengths of Ember JS

1.  Standard code – In angular the developer has more flexibility and the developer might end up writing in-efficient or not so good quality code. But in Ember JS the frame work itself forces us to write a good code.
2.  Support for old browsers
3.  Robust routing 
4.  Convention over configuration- Ember uses convention to help the developer organize their code. For example, a route named "test" would automatically look for a "test.js" file under the controller’s directory, and a "test.hbs" Handlebars template under the templates directory. Likewise with files for models and the route itself.

When we consider the performance of the application, theoretically it is said that Ember is better than angular because of its two way data binding process.

Angular uses a mechanism called “Dirty checking”.

What is dirty checking and how it’s done in angular application?

               Like we have private, public and other scopes in our programs, there is a concept called scope in angular too. It’s basically the same as our DOM structure. When an angular application loads, all the directives (angular binders which used to bind the behavior to the view (html) file) will be registered to the particular scope ($scope) and watch ($watch) will be created to watch all the expressions (fields) inside the scope. When an event like key down (typing some input) or click is detected the event will be passed to the angular context and it will trigger a process called “digest cycle” which will check the current values of the objects with the previous set of values (angular keeps track of old values of data) and if there are any changes it will call the update process. The issue with this approach is every time it’s going to go through the loop of all objects in the scope and do the check where we might expect a performance problem.

In Ember JS it doesn’t use dirty checking but it uses assessors and change listeners to update the changes in two way binding.

Even though dirty checking approach seems inefficient having said that if we have more than 2000 objects in a page only we may experience/notice the performance issue and in most of the practical applications it may not be the case. Anyway there are several ways to overcome this. One is to identify that kind of situations and use non-angular way to do the binding there.

You may refer these links

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

http://java.dzone.com/articles/improving-angular-dirty

 

Hope this gave at least an idea about angular and ember.