"Outside-in" by Namogoo

Angular JS: Six Tips and Tricks from Namogoo’s Playground

AngularJSPostPic
Angular JS is a structural framework for dynamic web apps. It simplifies both the development and the testing by providing a framework for client-side Model–View–Controller (MVC) and Model–View–ViewModel (MVVM) architectures.
For Namogoo, Angular JS offers a significant advantage and enabled us to build a stable, beautiful and high performance web app, and continue to expand it and add new capabilities on a day-to-day basis.
Here are a few performance and design tips and tricks that made our development process more effective and efficient:

Tip # 1 – ngIf vs. ngShow

ngIf directive removes or recreates a portion of the DOM tree based on the expression and ngShow shows or hides the given HTML element based on the expression. Thus, by using ngShow you won’t render the DOM again and again with every expression change.
See angular docs for further reading:
https://docs.angularjs.org/api/ng/directive/ngIf
https://docs.angularjs.org/api/ng/directive/ngShow

Tip # 2 – Chrome Profiling Tool

Use the Chrome’s profiling tool to identify which functions are problematic from a performance point of view and deserve more work.

For further instructions and learn how to do that read Google docs:
https://developer.chrome.com/devtools/docs/cpu-profiling

Tip # 3 – Minimize the Use of Watchers

Reduce the use of watchers as much as possible, especially in large applications.
Here are a few examples of watchers:

  • {{ }} type bindings
  • Filters {{ value | myFilter }}
  • ng-show

Every time a “watched” object is updated, either through a user input in the View, or via a service input to the Controller – Angular runs a process called a ‘Digest’ cycle: this cycle goes through all of the watchers and bindings of the app and updates them.
The more watchers you have in this loop – the longer it will take for the cycle to run, impacting heavily the performance.

Tip # 4 – Deal with Asynchronically Returned Data

The ability of Angular to run functions asynchronously can sometimes be a pickle when we want to show some sections only after the data is fetched. In order to deal with it, compile the HTML sections only after the data is fetched:

In HTML:

In Controller:

Tip # 5 – Prefer Using Directives

If you need a UI widget (e.g., a date picker or a pie chart), think “directive”. Wrap all your third party components in directives for an easy reuse. We also recommend to make your app as modular as you can, in order to achieve maximum flexibility and robustness.
Directives should now be used for almost everything because Angular 2 has no controllers – only directives (renamed to components).

Tip # 6 – Unit Testing

Last but not least – the most important tip is to write your own unit tests! It will help you save time and resources of ongoing tests and bug fixing.
Angular offers some pretty convenient tools to do this, such as Jasmine or Karma.

See the documentation to learn how to use them:
http://jasmine.github.io/1.3/introduction.html
https://karma-runner.github.io/0.8/index.html

References:
https://docs.angularjs.org
https://en.wikipedia.org/wiki/Main_Page

Leave a comment
Subscribe for Blog updates