Skip to content

GAVS – Global IT Consulting

Menu
  • Platforms & Products
    • Platforms & Products

      GAVS’ products will help change how you organize your IT Operations, bring meaningful and actionable insights to speed up network fixes, provide real data as quantifiable justification to adopt strategies that foster business improvements.

      • ZIF
      • Products
        • zDesk – Remote, Secure Desktop-as-a-Service (VDI+)
        • zIrrus
        • GTOps
        • TruOps
        • Close
    • Products & Platforms
      • Reimagining your Digital Infrastructure with Zero Incident FrameworkTM

        Read more
    Close
  • Services & Technologies
    • Services & Technologies

      GAVS is a global IT services provider with focus on AI-led Managed Services and Digital Transformation. GAVS’ AIOps platform, Zero Incident Framework ™ (ZIF), enables proactive detection and remediation of incidents and increases uptime, helping organizations drive towards a Zero Incident Enterprise™ . GAVS has transformed IT Enterprise delivery through ZIF’s Discover, Monitor, Analyze, Predict, and Remediate modules, to optimize business services continuity.

      • Digital Services
        • Auto Discovery and Dependency Mapping
        • Cloud Enablement
          • Cloud Advisory and Transformation
          • Close
        • Automation
        • Blockchain
        • Close
      • Cyber Security Services
        • Assessment & Advisory
        • Identity & Access Management (IAM)
        • Managed Detection & Response (MDR)
        • Managed Security Services (MSS)
        • Security Automation
        • Risk & Compliance
        • Close
      • Data Privacy Services
      • Consulting & Implementation Services
        • Cloud Advisory and Transformation
        • Data Center Assessment
        • Data Center-as-a-Service (DCaaS)
        • Infrastructure re-engineering
        • Data Center Consolidation & Migration
        • Close
      • Application Services
      • Enterprise Support Services
        • Managed Infrastructure Support
        • Remote Infrastructure Monitoring
        • End User Monitoring
        • Close
      • Microsoft Services
    • Services &Technologies
      • Reinforcement Learning- The Art of Teaching Machines

        Read more
    Close
  • Industries
    • Industries

      GAVS Technologies focuses on serving various industry verticals in their digital transformation through infrastructure solutions, adopting innovation and technologies in different domains. We offer services and solutions aligned with technology trends to enable enterprises to take advantage of futuristic technologies like DevOps, Smart Machines, Cloud, IoT, Predictive Analytics, Managed Infrastructure Services, and Security services.

      • Industries Overview
      • Healthcare
      • Banking & Financial Services
      • Manufacturing
      • Media & Publishing
    Close
  • Inside GAVS
    • Inside GAVS

      GAVS is a global IT services provider with focus on AI-led Managed Services and Digital Transformation. GAVS’ AIOps platform, Zero Incident Framework™ (ZIF), enables proactive detection and remediation of incidents and increases uptime, helping organizations drive towards a Zero Incident Enterprise™ . GAVS has transformed IT Enterprise delivery through ZIF’s Discover, Monitor, Analyze, Predict, and Remediate modules, to optimize business services continuity.

      • About Us
      • Client Speak
      • Alliances & Partnerships
      • Leadership Team
      • Social Responsibility
      • Events
      • Locations
      • Contact Us
      • Press Releases
      • Media Mentions
      • Awards and Recognitions
      • In Memoriam
      • Covid Care
    Close
  • Insights
    • Insights

      We bring you discerning insights on technology trends, innovation and organization culture, thru our collection of articles, blogs and more. Insights reflects our passion in driving advancements as we move forward creating new paradigms in business and work culture. You would find our thoughts on a variety of topics ranging from evolving technologies and ways it affects businesses and lives, transformational leadership, high impact teams, diversity, inclusion and much more.

      • Blogs
      • Articles
      • White Papers
      • Brochures
      • Videos
      • Case Studies
      • enGAge Magazine
    • insights
      • Seven Tips for Leading IT Modernization and Digital Transformation

        Read more

    Close
  • Work With Us
    • Work with us

      What it means to be a GAVSian?

      If you rate high on our SWAT test (Smart, Hardworking, Articulate, Technologically curious), GAVS’ hiring profile, we promise you excitement, inspiration and the freedom to succeed in our flat organization. Being a GAVSian, you would represent our cutting edge in technological advancement while we help you hone yourself into the person you aspire to be. That’s the level of personal interest we invest in you.

      • Career with GAVS
      • Company Culture
      • Diversity @ GAVS
      • Building a respectful workplace
    Close
Back to blogs

Ways to Catalyze your Angular App

Apr 08, 2019
SHARE

In this blog post

  • Load Time Performance
  • Run Time Performance

By Poojitha Srinivasan

Angular is a great framework which is well suited for developing large app built to get the highest performance on the web. But sometimes as a developer we end up doing things which result in poorly performing app. This blog is mainly about Angular specific best practices to have best load time and runtime performance.

Load Time Performance

  1. Ahead Of Time (AOT) Compilation: On the contrary to JIT (Just In Time) Compilation where the compilation is done in the browser, AOT also called offline compilation which compiles the code during the build process thus reducing much of the processing overhead on the client browser. With your angular-cli just specify the “aot” flag (if prod flag is present, then aot flag not required) and AOT will be enabled.
  2. Tree-shaking: This is the process of removing unused code thus resulting in smaller build size. On your angular-cli, Tree-Shaking is enabled by default.
  3. Uglify: In this process the code size is reduced using various code transformations like mangling, removal of white spaces, removal of comments etc. For angular-cli specify the “prod” flag to perform the uglification process.
  4. Prod flag: For production, build specify the “prod” flag in the angular-cli application. It will enable various build optimizations like, AOT, uglify, removal of source maps, service workers (if enabled) producing a much smaller build size.
  5. Build-optimizer flag: If you are using angular-cli make sure you specify “build-optimizer” flag for your production build. It will disable the vendor chunk and will result in more smaller code.
  6. Lazy loading: Lazy loading is the mechanism where instead of loading complete app, we load only the modules which are required at the moment thereby reducing the initial load time. In simple words, it doesn’t load something which you don’t need.
  7. Updating Angular and angular-cli: Updating your Angular and angular-cli regularly gives you the benefit of many performance optimizations, bug fixes, new features, security etc.
  8. RxJS 6: RxJS 6 makes the whole library more tree-shakable thereby reducing the final bundle size. RxJS is a library for reactive programming which uses Observables, to compose asynchronous or callback-based code.
  9. Third party packages: Review the third party packages you are using and see if better and smaller alternative is available as it may reduce the final size of your build. If you include a third-party package just to for a small functionality which could be easily done natively with JavaScript or Angular then you are adding unnecessary size overhead to your app that could have been easily saved. For example, if you are including Lodash just to do a simple object filtering then it is totally unnecessary as you could achieve the same natively in JavaScript.
  10. Updating Third Party Packages: Make sure you are regularly updating your third party packages. Many of newer packages may contain many performance improvements including smaller size and other build time performance optimizations (e.g. RxJS 6). Also by updating the packages regularly, you may get many improvements related to the bug fixes, security vulnerability fixes, fixes related to package compatibility etc.
  11. Compressing images: It’s a good idea to compress the images without losing much of the quality thereby saving the bytes transferred over the network improving the build time. There are many tools available to achieve this. Visual Studio Code extension called TinyPNG can be used to compress Jpeg and PNG images without losing much of the quality.
  12. Remove unused fonts: It’s a good idea to remove the unused fonts which may help you save few bytes over the network.
  13. Slow DNS and SSL: Sometimes your DNS and SSL provider could be the reason for slow load time. So make sure the DNS and SSL are fast and configured properly.

Run Time Performance

  1. Change Detection: By default on each asynchronous event, Angular does a dirty checking by performing a change detection for the whole component tree. Such dirty checking could be a lot computational heavy for a medium to large apps. You can drastically reduce this by setting “ChangeDetectionStrategy” to “OnPush”. Thus By setting the “onPush”change detection strategy we are signing a contract with Angular that obliges us to work with immutable objects.
  2. Detach Change Detector: We can completely detach the component from change detection thereby giving a developer the control to inform Angular as to when and where to perform the change detection.
  3. trackBy: Manipulating the DOM is an expensive task, and this can be very evident when it comes to rendering long lists of items, usually achieved by using the *ngFordirective. By default, *ngFor identifies object uniqueness by reference. If the object reference is broken while updating the content of the object, Angular removes the related DOM node completely and recreate it again even though the actual change required is for only a small part of the DOM node. This issue can be solved by using trackBy.
  4. Pure Pipes: In the “@Pipe” decorator you can specify “pure” flag as true. This flag indicates that the pipe is not dependent on any global state and is side effect free. It enables Angular to cache the outputs for all the input parameters the pipe has been invoked with and thus allows to reuse the values instead of recomputation. This can lead to massive reduction in the duplicate operations performed in many cases thus hugely improving the performance.
  5. Avoid complex computations in the template: Avoid doing complex calculation in the HTML template (ex. calling the component method inside the template), instead leverage the use of pure pipes which takes the advantage of Angular caching and hence avoiding duplicate operations. If the use of pipe is not possible, we can pre-calculate the values and then directly bind values instead of calling the component method in the template.
  6. Unsubscribing Observables: Observables can create memory leak issue. Hence it is better to unsubscribe them when they are not needed anymore. However, you don’t have to unsubscribe all observables used. Unsubscribing explicitly is only required when a subscription is created inside a component which is destroyed before the observable completes.
  7. Observable share() operator:If you have subscribed the observable at multiple locations/components, then each subscription will try to produce the data even though the data is duplicate. We can avoid the processing of duplicate data across subscriptions using the “share()” operator.

So these are the tips you should follow to write a high performance Angular app. Hopefully, this will help you fine tune your Angular app. Also make sure you do proper performance analysis and audit for your app using different tools like Chrome/Edge/Firefox JavaScript Profiling tool, Chrome Lighthouse etc. to make proper judgment of what exactly is causing the issue.



Enterprise IT Support Services in the USA
Platforms using Distributed Ledger Technology (DLT)
Read More
aiops consulting
Introduction to Behavioral Health
Read More
IT Automation with AI
Why Do We Need Lean, Six Sigma, and Kaizen For Our Organizations?
Read More
GAVS – Global IT Consulting

Copyright © 2022, GAVS Technologies.

  • Privacy Policy
  • Cookie Policy
  • Terms of use
  • Contact Us
  • Platforms & Products
    • Platforms & Products
    • Products
      • Zero Incident Framework ™
      • Products
      • zDesk – Remote, Secure Desktop-as-a-Service (VDI+)
      • GTOps
      • TruOps
      • zIrrus
  • Services & Technologies
    • Services & Technologies
    • Digital Services
      • Digital Services
      • Auto Discovery and Dependency Mapping
      • Cloud Enablement
        • Cloud Advisory and Transformation
      • Automation
      • Blockchain
    • Data Privacy Services
    • Cyber Security Services
      • Cyber Security Services
      • Risk and Compliance
      • Security Automation
      • Managed Security Services (MSS)
      • Managed Detection and Response (MDR)
      • Identity and Access Management
      • Assessment and Advisory
    • Consulting & Implementation Services
      • Consulting & Implementation Services
      • Cloud Assessment & Advisory
      • Data Center Assessment
      • Data Center-as-a-Service (DCaaS)
      • Infrastructure re-engineering
      • Data Center Consolidation & Migration
    • Application Services
    • Enterprise Support Services
      • Enterprise Support Services
      • Managed Infrastructure Support
      • Remote Infrastructure Monitoring
      • End User Monitoring
    • Microsoft Services
  • Industries
    • Industries Overview
    • Healthcare
    • Banking & Financial Services
    • Manufacturing
    • Media & Publishing
  • Inside GAVS
    • Inside GAVS
    • About Us
    • Industries
    • Client Speak
    • Alliances & Partnerships
    • Leadership Team
    • Social Responsibility
    • Events
    • Find us
    • Reaching us
    • Press Releases
    • Media Mentions
    • Awards and recognitions
    • In Memoriam
    • Covid Care
  • Insights
    • Insights
    • Articles
    • Blogs
    • White Papers
    • Case Studies
    • Brochures
    • Videos
    • enGAge Magazine
  • Work with us
    • Work with us
    • Career with GAVS
    • Company Culture
    • Diversity @ GAVS
    • Building a respectful workplace

Schedule a Demo