Category: Technology

2020 has been full of uncertainty as the global COVID-19 pandemic has slowed many sectors. One place it hasn’t slowed is software development. New products and services have to keep up with changing consumer habits. This year saw lots of development in online shopping as well as video conferencing. Have you already been thinking about next year’s trends in development technologies and skills needed to create the most innovative solutions? Well, we’ve been thinking about what kind of new skills are in demand in 2021 and which way we should develop our tech pool to stay competitive. So, here we have come up with a short list of skills that we think will be in high demand in the new year!

Along with the dynamic development of new technologies, there is still a need for new developers in the IT job market. The most in-demand developers are those who have unique expertise adapted to the current and future needs of the ever-changing market. Do you know which skills will be most favored by employers in the coming year? Read on for our forecasts for 2021!

Private blockchain technology

Blockchain is a technology that will undoubtedly have a huge impact on the next generation of the internet. Blockchain proponents want to revolutionize how we organize data and will continue to inspire further changes.

Even though development has slowed since its height in 2017, many large enterprises are testing private blockchains to handle back-office processes and cut administrative costs. Demand for blockchain programmers in 2021 will only continue to rise. Developers will have to know cryptographic algorithms coding and be able to build distributed and decentralized databases. Certainly, the knowledge of technologies such as C ++, JavaScript, Python or Solidity will still be vital. AWS Kubernetes integration is also a highly valuable skill for developers entering this field. 

Dynamic development in the blockchain niche has led to increased interest from businesses. Knowledge of blockchains and of database architecture will continue to grow in 2021 and beyond.

And, what’s the outcome of this trend? First of all, more traditional enterprises will have to change to stay relevant or will be edged out by companies ready to take full advantage of blockchain technology.

Fintech knowledge

Financial technology aim to improve various financial services, such as online payments, currency exchange or online banking. The branch is developing very dynamically. The fintech market will grow to more than $300 billion by 2025 according to a recent report from Market Data Forecast. It’s easy to guess that as an area directly related to finance, it may also generate huge profits. People crave convenience and will flock to products and services that give it to them.

According to “THE BANK OF THE FUTURE: The ABCs of Digital Disruption in Finance” report, the biggest role in the financial revolution is access to powerful databases. Investment in development will create new tools that startups and tech giants can gain new users.

Fintech may be a competition for traditional banks, but this is not the only option. The more optimistic option assumes that fintech companies will be open to cooperation. Regardless of what the future of traditional banks will look like, the development of new technologies and, consequently, the introduction of such solutions as mobile wallets or automated consultants will increase the demand for programmers who can create such innovative products in line with the needs of this dynamically growing market.

Machine Learning and Artificial Intelligence

Another area worth paying attention to in 2021 is artificial intelligence and machine learning. Machine Learning is a concept within the field of artificial intelligence, which means algorithms that process and learn from collected data. Marketers, for example, could use machine learning to match relevant ads based on a user’s search results. They are also used in applications with functions such as facial recognition, speech or text recognition, navigation, and recommendation systems.

The problem in finding programmers in the field of AI is that since it’s a relatively young field, it’s challenging to find senior specialists. In other words, the barrier to entry is much higher than for other IT fields such as web programming or mobile applications.

One reason is the deep mathematical knowledge this specialization requires. If you work in machine learning, it’s essential to be familiar with numerical methods, linear algebra, probability and statistics. Additionally, experience with libraries such as NumPy or SciPy is useful. Python and R are some of the most common programming languages  for AI and machine learning.

Employers looking for AI specialists concentrate in finance and big tech according to the McKinsey report the report “Artificial Intelligence. The Next Digital Frontier.” Companies in these fields have the greatest need for qualified specialists with the knowledge in the field of machine learning.

Problem-solving skills

Obviously tech skills are crucial in-demand skills. But it’s not the whole picture. Soft skills are just as crucial for developers.  Negotiation, leadership and creative problem solving are just a few of the soft skills employers look for. critical thinking has long ranked among the top skills for developers. “2018 Developer Skills Report” prepared by the HackerRank portal reveals that the most desired skill is creative problem solving.

Nearly 95% of the surveyed employers indicated this particular skill. This naturally should not be surprising, because solving problems is an inseparable part of a programmer’s everyday work. If a developer possesses such a skill, the gaps in the knowledge of a given technology or programming language will be quickly filled.

The key element while working in IT is to identify and understand a problem, and then break it down into smaller tasks so that as many tasks as possible can be solved. Only in this way, the programmer will be able to cope with large tasks. Analyzing the development of technologies such as blockchain and artificial intelligence mentioned above, you can notice how dynamically the IT market is evolving and changing. This means that programmers will face increasingly difficult and complex tasks that have never been encountered before.

What’s more, it has been emphasized that the knowledge of programming languages is not the only job requirement when it comes to programmers. In order to perform well, they must follow the latest trends and know what solutions will meet the users’ expectations. It is also necessary to have an innovative and creative mind that will help design applications. Creating new solutions that will be able to improve the quality of a given software, as well as the best user experience would not be possible without problem-solving.

2021 will not be different. Even as technology changes, core people skills will not.

Remote working skills

As the nature of work changes, we’ll have to adapt to new realities. Along with the creative problem-solving skills, working on a team remotely is going to be increasingly important in 2021 and beyond. Over-communication and enthusiastic team connection is vital to maintain team cohesion and productivity. Developers should develop these people skills to stay competitive in the job market.

Using videoconferencing and other communicators effectively is one key skill. People want to see other people’s faces, even if they can’t be together in the same place. Letting your team and clients know when you’re available — and when you’re not is also a great thing to keep on mind. Setting a status on platforms such as Slack is one part of working remotely effectively.

Even as COVID-19 subsides, remote work will stick around in some form or another. So plan to develop these skills for the near future.

Conclusion

The IT industry has been developing dynamically for many years and we have no doubt that it will still be evolving even faster in the 2021. The knowledge of innovative technologies, but above all, tracking and following the latest trends constantly are the skills that are, and will be, increasingly in demand. Next year the most important issue will be to understand the customers’ and users’ needs. This is a basis on which software will be developed that has to be adapted to and suited to the latest trends of the constantly changing market.

See also: How to hire developers! Tips for 2018/2019

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.