Category: Software

Software development and delivery have to keep up with ever-increasing user demand for speed. Testing processes have to keep up right along with it. The question is – can testing prevent from missing major defects and making mistakes? Certainly yes, especially thanks to using the right test management tools that can effectively reduce the number of bugs that are overlooked.

What are test management tools?

Before I get into why you need a test management tool, let me explain what test management tools are. Software development teams use test management tools to keep all the things they need to manage, plan, run, and report tests. There are many different test management tools out there, but most of them facilitate both manual and automated test management. Many of these tools also allow you to manage test environments. In addition to planning, managing, auditing and running tests, test management tools also play another key role — they’re an efficient repository for defects that must then be managed.

To decide on a tool, carefully consider your needs.

First of all, you shouldn’t choose a tool for everything. Just because a tool has the most options doesn’t mean it will also work for your project. Sometimes it’s worth choosing something simpler, easier to implement and cheaper. Focus on achieving a real benefit for you and the team developing your application.

So what should you think about when deciding which test management tool to choose?

• Number of target users
• Ease of implementation
• Integrations with other tools supporting software development
• Test case grouping
• Task monitoring
• Visual reporting and analysis
• Integration with frameworks and automated tests
• Continuous integration
• Ability to import/export files
• Storage plan
• Traceability matrix
• Integration with API tests
• Support
• Price

It’s not accidental that I mention the price at the end. The price is a relative concept and depending on your needs, the amount you pay for the tool may turn out to be too high or just right for other projects.

Of course, your requirements may change. Therefore, when choosing a tool, you should also take into account the ease of changing or adding new modules.

Reasons to implement test management tools

So if you’re not already using test management tools, here are some reasons why you should consider implementing some.

First, you want to improve the quality of your software. If you’re reading this article, it means that you want to ensure the quality of your application. By providing high-quality software, you meet the needs and requirements of your application users. This is probably one of your most important goals. Test management tools are a great support for project teams and avoid missing errors that have been saved “somewhere in the excel file.”

Human error, especially software development errors, are inevitable. Fortunately, test management tools make it easy to cover as much of your application functionality as possible. Imagine working without the right test management tool. You save all errors in a text or calculation file. People at different levels in the organization can run on the same file at the same time. They can simultaneously edit this file, add data and delete it. In this case, there is a high probability that testers will miss a critical error or a critical test.

On the other hand, such tools will allow you to avoid repeated testing of the same errors by preparing clear and accurate documentation. Accurate documentation saves the team a lot of time to identify where the error occurs in the application and facilitate its reproduction.

Because you want to be up to date with everything. Building software isn’t all about code writing and testing. Creating software includes development, design, programming and testing. Reports on the current situation at every stage of software development allow for a quick reaction and possible transfer of forces to the right place. Reports on previous tasks are equally important. When building an application, it often happens that you have to go back to previous documentation or encountered errors
because you want to know what tests were carried out and when.

A test management tool will allow you to view the tests at every stage. By understanding the testing stage of your project, you can make key decisions more easily. A thorough analysis of the tests carried out will allow you to find out at what stage your project is. It may happen that on this basis you want to speed up or delay the release of the current version of the application because you want to increase the efficiency of the team and avoid repeating the same work.

In poorly managed projects, it happens that several people do the same job, or one person does something they did last week and has already forgotten about it due to the sheer volume of work. Avoiding repetition will allow your team to be more productive and efficient, especially if the project uses an agile approach. Test management tools allow you to automate many processes, which reduces the time needed to perform more important tasks because you want to manage access to documents, reports and want your project and test data to be safe. Test management tools have the ability to grant permissions to users for different levels. Thanks to this, you can be sure that only the right people have access to the right data. Below, I propose three interesting test management tools.

Download our resource and learn how to set up the ROI for testing services and what are the main reasons why not to skimp on it

PractiTest

PractiTest is a SaaS quality management tool. This tool is among the most advanced and functional test management tools available on the market.
It integrates with bug tracking tools like JIRA, Pivotal Tracker, Redmine ora Bugzilla, as well as various automation tools like Selenium or Jenkins. PractiTest API allows you to further customize the tool to your needs.

PractiTest is one of the most secure test management tools on the market today. The PractiTest support team is renowned for providing great support

Pros:

• Reuses existing tests and compares the results with previous trials
• Detects and prevents duplicate issues
• Enables graphical visualization of reports
• Reports errors directly from email
• Integrates with automation tools and C
• Manages tests and requirements seamlessly
• Manages tests based on cycles and sprints
• Integrates with Slack

Cons:

• Pricey
• No SDK feature to support mobile app testing
• No Mobile App
• Only a cloud-based option

TestRail

TestRail allows you to manage your tests in real time. It works great in both small and very large teams. TestRail works both on a local server and in the cloud. It also integrates seamlessly with bug tracking and test automation tools.

Pros:

• Document test cases with full details
• Tracks the time spent on performing individual tests
• Allows detailed filtering
• Tracks the resources and time commitment of the team
• Creates a coverage report from performed tests
• Offers an open API

Cons:

• No automation support or selenium integration
• No mobile app
• No defect management module
• Doesn’t detect and prevent duplicate issues
• No Slack integration
• Doesn’t report issues directly from emails

XRAY

XRAY is a Jira add-on for test managment. All test management and testing happens on Jira. One major pro is that the tool is budget-friendly. XRAY enables testing in accordance with the assumptions of BDD and seamlessly integrates with automation tools and devops using the API. It is the most functionally limited of the tools I propose, however. It can’t manage requirements and user stories.

If you’re looking for a tool that relies entirely on Jira, then XRAY is a decent choice. XRAY already has 4,000 customers in 65 countries. It is the fastest-growing application for Jira.

Pros:

• Has traceability between requirements, tests, defects, executions
• Organize tests in folders and test sts
• Tracks progress with test plans
• Allows you to write test scenarios in BDD in Jira
• Integrates with automation frameworks (Selenium, JUnit, Robot)
• Provides REST-API
• Integration with CI
• Budget friendly

Cons:

• Doesn’t detect and prevent duplicate issues
• No slack integration
• Doesn’t report issues directly from emails
• Doesn’t manage requirements and user stories
• Doesn’t have an external dashboard

Conclusion

The fact is that test management tools make it very easy to manage the development process of both simple and the most complex software. Most of the tools on the market are designed to integrate with other tools that you may be using today. If you want your processes to be even more efficient, flexible and at the same time absorb the least financial resources, then a test management tool is a must for you.

See also:

• Good reasons not to skimp on QA testing
• Is web application testing worth the expense?
• Test Automation Tips: Everything You Need to Know Before Running Application Automated Tests
• TOP 5 Analytics tools to Measure App Success

Angular shortens development time for applications, reducing the time it takes to deliver custom software. Improving your app’s performance is vital to staying competitive and profitable. Here are 30 Angular tips.

Time and time again companies have trusted us as a software development provider. Read more about some of our projects and find out why.

1. Define form parameters before Component definition. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    
   export const FORM_PARAMS = {
    status: 'status',
    classification: 'classification',
    note: 'note'
   };
   
   
   
   @Component({
    selector: 'app-preview',
    templateUrl: './preview.component.html',
    styleUrls: ['./preview.component.scss']
   })
   
   
   
   this.form = this.formBuilder.group({
    [FORM_PARAMS.status]: [false],
    [FORM_PARAMS.classification]: [null],
    [FORM_PARAMS.note]: [null, Validators.required]
   });
   
   
   
   this.form.patchValue({ [FORM_PARAMS.status]: 'status' });
   

   [/dm_code_snippet]

    

2. Use renderer addClass, removeClass where possible. It will prevent too many change detection checks. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    
   // SLOWER

    

   collapseRow(rowIndex: number) {
    this.setRowCollapsed(rowIndex);
   }
   
   
   // FASTER

   collapseRow(event, rowIndex: number) { 
     this.setRowCollapsed(rowIndex);
     this.render.removeClass(event.target, 'arrowDown');
     this.render.addClass(event.target, 'arrowRight');
   }

   [/dm_code_snippet]

3. Try to use get, set on Input() instead ngOnChanges. When you have many Inputs in the ngOnChanges, each “if” has to be checked. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    
   // SLOWER when many ifs
   ngOnChanges(changes: SimpleChanges) {
    const data: SimpleChange = changes.data;
    if (data && data.currentValue) {
      this.data = [...data.currentValue];
    }
    if (configuration && configuration.currentValue) {
      this.config = configuration.currentValue;
    }
   }	
   
   
   
   // FASTER
   
   
   
   public _config: Config;
   @Input('configuration')
   set configuration(value: Config) {
    this._config = value;
   }
   
   
   
   get configuration(): Config {
    return this._config;
   }
   
   
   
   _data: Data;
   @Input('data')
   set data(value: Data) {
    this._data = [...value];
   }
   
   
   
   get data(): any[] {
    return this._data;
   }
   

   [/dm_code_snippet]

    

4. Use pipe when rendering content in ngFor. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    
   // Slower
    {{ render(row, column) }}
   
   render(row: any, column: string) {
    return YourService.render(row, column);
   }
   
   
   
   // Faster
    {{ row | render:column }}
   
   
   
   
   @Pipe({
    name: 'render',
   })
   export class RenderPipe implements PipeTransform {
    transform(row: any, column: string) {
      return YourService.render(row, column);
    }
   }
   

   [/dm_code_snippet]

5. Specify baseUrl and module aliases (paths) to your compilerOptions to avoid any inconsistency when importing other files. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    
   {
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@core/*": ["app/*"],
        "@assets/*": ["assets/*"]
      }
    }
   }
   
   
   
   import { Recruitment } from '@core/domain/recruitment';
   
   
   
   instead
   
   
   
   import { Recruitment } from '../../../domain/recruitment';
   

   [/dm_code_snippet]

    

6. Add stylePreprocessorOptions to your angular.json file to avoid inconsistency while importing other files. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    
    "projects": {
      "project-frontend": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "app",
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "stylePreprocessorOptions": { // <--- add this
                "includePaths": [
                  "./src/assets/style/scss"
                ]
              }
            }
          }
        }
      }
     
    @import "variables";
     
    instead
   
   
    @import "../../assets/style/scss/variables";
   

   [/dm_code_snippet]

    

7. Run npm outdated command or add npm-check once a month to keep your dependencies updated. It will definitely help you keep track of changes. It’s much easier to update Angular 5 to 6 than 4 to 6.
8. Run npm audit command once a month to check if any of the libraries has any vulnerabilities. It will help you keep your app secure. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    
   if [[ $(npm audit | grep Critical -B3 -A10) != '' ]]; then exit 1; fi"
   

   [/dm_code_snippet]

    

9. Use parent in form validation instead of this.form which may not be initialised while doing/performing custom validation check. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    
   // Correct 
   
   
   
   static validateEndDate(fc: FormControl) {
    const startDate = fc.parent.get(FORM_PARAMS.startDate);
    if (startDate.value) {
      const diff = fc.value - startDate.value;
      return (diff < 86400) ? { endDateInvalid: true } : null;
    }
    return null;
   }
   
   
   
   // Incorrect 
   
   
   
   static validateEndDate(fc: FormControl) {
    const startDate = this.form.get(FORM_PARAMS.startDate);
    if (startDate.value) {
      const diff = fc.value - startDate.value;
      return (diff < 86400) ? { endDateInvalid: true } : null;
    }
    return null;
   }
   

   [/dm_code_snippet]

    

10. Keep route names as const. It will prevent accidental typos. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

     
    export class ROUTE {
     public static readonly LOGIN = '/login';
     public static readonly RECRUITMENTS = '/recruitments';
     public static readonly RECRUITMENT_EDIT = '/recruitments/:id';
    }
    
    
    
    goToRecruitment($event, id: number) {
     $event.preventDefault();
     this.router.navigate([ROUTE.RECRUITMENT_EDIT.replace(':id', id)]);
    }
    

    [/dm_code_snippet]

     

11. Start using webpack-bundle-analyzer. It will help you detect any fast-growing modules.In our case by mistake main.scss has been included in another file instead variable.scss. It has doubled the size of the bundle! [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

     
    "scripts": {
       "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
    },
    93f72404-b338-11e6-92d4-9a365550a701.gif
    Gif Source: https://github.com/webpack-contrib/webpack-bundle-analyzer
    

    [/dm_code_snippet]

     

12. Use browser Performance tests. 17ms rendering time means you use 60fps. Actions with fewer than 60fps and more than 30fps are ok. Any speed below 30fps makes the user notice the visualized slowdown of the application.
13. Use the Augury chrome extension to track the current state of components.
14. Prettier as code formaterTo prevent conflicts between tslint and prettier use the npm tool. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

     
    // .prettierrc
    {
     "printWidth": 140,
     "parser": "typescript",
     "tabWidth": 2,
     "singleQuote": true,
     "trailingComma": "all"
    }
    

    [/dm_code_snippet]

     

15. Use trackBy in ngFor loops to optimize the re-rendering of iterable.trackByFn is a  function that defines how to track changes for items in the iterable. When items are added, moved or removed in the iterable, only those nodes that have changed are re-rendered.
    Example: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

     

    @Component({
     template: `

    • {{item.id}}

     `,
    })
    export class SampleComponent {
     constructor() {
       this.items = [
         {id: 1},
         {id: 2},
         {id: 3}
       ];
    

    [/dm_code_snippet]

16.  Use a virtualized scroll list like e.g. CDK Virtual Scroll when you need to display a very large records collection. It will render just items that fit within ViewPort in the current scroll position, in comparison to rendering all items at once without virtualization.
    [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

     

    import { ScrollingModule } from '@angular/cdk/scrolling';
     
    @NgModule({
     ...,
     imports: [
       ...,
       ScrollingModule
     ],
     ...,
    })
    export class AppModule { }
     
    @Component({
     template: `

    • {{item.id}}

     `,
    })
    export class SampleComponent {
     constructor() {
       for (let index = 0; index < 10000; index++) {
         this.items.push({ id: index });
       }
     }
     trackByFn(index, item) {
       return item.id;
     }
    }
    

    [/dm_code_snippet]

17. From Angular v9+, use ngZoneEventCoalescing flag to reduce the amount of change detection cycles while Event Bubbling.
    [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

     

    platformBrowserDynamic()
     .bootstrapModule(AppModule, { ngZoneEventCoalescing: true })
     .catch(err => console.error(err));

    [/dm_code_snippet]
    Example: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    platformBrowserDynamic()
     .bootstrapModule(AppModule, { ngZoneEventCoalescing: true })
     .catch(err => console.error(err));
    

    [/dm_code_snippet]

    Normally when we click on the button element, both “childrenFn” and “parentFn” are invoked, causing two change detection cycles. With ngZoneEventCoalescing flag set to true, there is only one change detection cycle to run. 

18. Debugging Angular component in console
    1. Open browser developer tools.
    2. Select element in “Elements” tab
    3. Debug this element in console: ($0 – in this variable is selected element)

    Before Angular v9:[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    const selectedComponent = ng.probe($0).componentInstance;
    selectedComponent.value = "New value";
    ng.probe($0).injector.get(ng.coreTokens.ApplicationRef).tick();

    [/dm_code_snippet]

    From Angular v9+:
    [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    const selectedComponent = ng.getComponent($0);
    selectedComponent.value = "New value";
    ng.applyChanges(myComponent);
    

    [/dm_code_snippet]

    From Angular v9+ it is even better to use this SB Angular Inspector.

19.  Lazy loading in Angular – instead of loading a complete app, Angular loads only the modules which are required at the moment. It reduces the initial load time. 
20. Always keep an eye on your Bundle Size. Depends on the scale of your project, in enterprise apps if your main.*.js file exceeds more than 0.5 MB, you may need to be aware. After your Angular app is deployed check if your cloud platform or CDN, hosts your bundles gzipped. In the network tab in the developer console in Response Headers, you should see the header: “Content-Encoding: gzip.” If you have your own server serving your app and it doesn’t implement gzip compression, you should definitely add those. 
21. While you don’t need to validate or react on every single change of your FormControl, use updateOn: ‘blur’. Event callbacks will be executed on blur events. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    this.email = new FormControl(null, { updateOn: 'blur' });

    [/dm_code_snippet]

     

22. Use Services for any Side Effects.It is a good place for any  HTTP requests, event handlers, time-based events. It reduces the complexity of the component and provides reusability to our codebase. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    @Injectable({
     providedIn: 'root'
    })
    export class UsersService {
     constructor (private http: HttpClient) {}
     
     getUsers() {
       return this.http.get(API_ENDPOINT);
     }
    }
      
    @Component({
     selector: 'app-component',
     template: '

    • {{item}}

    ',
    })
    export class AppComponent implements OnInit{
     constructor(private usersService: UsersService){
     }
     items = [];
      ngOnInit(){
       this.usersService.getUsers().subscribe(items => this.items = items);
     }
    }
    

    [/dm_code_snippet]

23. Use the Angular CLI tool that makes it easy to create your application. With just one command you can generate whatever you want, use analytics, sets project configuration, and many more. Here are some useful commands.
    
    To generate component under desired path with sass style files: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

     

    ng generate component components/yourComponentName --style=sass
     
    Abbreviation:
    ng g c components/yourComponentName --style=sass
    

    [/dm_code_snippet]

    To see what files will be generated without creating them use flag: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    ng g c components/yourComponentName --dryRun=true

    [/dm_code_snippet]

    To generate without tests files: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    ng g c components/yourComponentName --skipTests=true

    [/dm_code_snippet]

     

24. From Angular 6 on, with the help of @angular/elements package you can create custom native components (Web Components) that can be used outside of the Angular. This package provides polyfills to support browsers that don’t support Web Components.To get started, install the package in an Angular project with the following command: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    ng add @angular/elements --name=

    [/dm_code_snippet]

     

25. Use an ErrorHandler from @angular/core to handle errors in your app. With this dedicated service, you can easily manage errors in your entire application. As a default, the service catches the errors and logs them to the console, but it can be extended by additional side effects, whatever you need. It is pretty easy to implement such a service: Simply create a file called e.g. error-handler. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    import { ErrorHandler } from '@angular/core';
     
    class MyErrorHandler implements ErrorHandler {
     handleError(error: any) {
       // do something with the exception
       super.handleError(error);
     }
    }
     
    @NgModule({
     providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
    })
    class MyModule {}
    

    [/dm_code_snippet]

     

26. Add Aliases support to your project. If you think importing your components is ugly, try this. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    import { MyComponent } from '../../../../components/parent-component/my-component'

    [/dm_code_snippet]

    Specify aliases to your project folders in tsconfig.json file: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”markup” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    {
     "compilerOptions": {
       "baseUrl": "src",
       "paths": {
         "@components": "app/components",
         "@services": "app/services"
       }
     }
    }
    

    [/dm_code_snippet]

    And import your code in this way: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    import { MyComponent } from '@components/parent-component/my-component';

    [/dm_code_snippet]

27. Preload your resources and routes to speed up your application.

    Angular has a preloading strategy implemented already in @anuglar/router module. It allows us to preload routes/links but also resources, modules etc. This process speeds uploading and rendering time of the resources, by preloading them to a browser cache. [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    class CustomPreloadingStrategy implements PreloadingStrategy {
     preload(route: Route, fn: ()=> Observable) {
         // ...
     }
    }
     
    RouterModule.forRoot([
     ...
    ], {
     preloadingStrategy: OurPreloadingStrategy
    })
    

    [/dm_code_snippet]
    

28. Do you have a heavy computational function that slows your application down? From default JavaScript is a single-threaded language, so your heavy computations runs along with UI updates, but there is a remedy for it. With help of the Web Workers you can move your heavy non-UI algorithm to run on separate non-UI-blocking thread.Create file with your custom Web Worker (‘./myWebWorker.js’): [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    onmessage = function(e) {
     console.log('Worker: Message received from main script');
     const result = e.data[0] * e.data[1];
     if (isNaN(result)) {
       postMessage('Please write two numbers');
     } else {
       const workerResult = 'Result: ' + result;
       console.log('Worker: Posting message back to main script');
       postMessage(workerResult);
     }
    }
    

    [/dm_code_snippet]

    Then in your component subscribe on it: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    @Component({
     selector: 'app',
    })
    export class App implements OnInit{
     private output
     private webworker: Worker
     ngOnInit() {
         if(typeof Worker !== 'undefined') {
             this.webWorker = new Worker('./myWebWorker')
             this.webWorker.onmessage = function(data) {
                 this.output = data
                 console.log('Message received from worker');
             }
         }
     }
     runHeavyAlgorithm(firstValue: number, secondValue: number) {
         this.webWorker.postMessage([firstValue, secondValue])
     }
    }
    

    [/dm_code_snippet]
    

29.  Use Pure PipesTo specify that your Pipe as “Pure” simply just set the “pure” flag in its configuration: [dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#eeeeee” theme=”dark” language=”javascript” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

    @Pipe({
     name: "units",
     pure: true
    })
    class UnitsPipe implements PipeTransform {
    ...
    }
    

    [/dm_code_snippet]

    In this way any inputs passing through this Pipe is computed only once and cached, next calls with the same inputs will be skipped and returned the cached data.

30. Remove all caret “^” and tilde “~” from your package.json. If you want your project to be stable and not to fail in the future you should stick to specific versions of packages you use.

Go to our expertise page and read more about what we excel at.