10 ترفند Angular برای بهبود وب اپلیکیشن

 
// 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;
}

 
 "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";

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

 
// 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;
}

 
"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

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;
 }
}

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