Angular Standards and Naming Conventions

Senwes Applications use Angular as the main front end Framework. Please keep all bundles sizes under 2MB. Please note that the more packages a project uses, the bigger in size. Weigh the pros and cons of a package against ease of use vs size and data speeds.

Site Standards

Always work from the original template from the site you are working with. Layouts and ideas can be used that is in the template. The site must have the same look & standard. An easy example is modals, rather use the one that the template has then to import a new one that will increase the compiled application size. Clone the project from Azure DevOps. Angular Startup Project.

Senwes Applications make use of Syncfusion keep under release version 19.? and Nebular third party components, with Font Awesome and Eva Icons.

General

Private variables start with an underscore and lowercase then pascalCase.

Example: private bool _isVisible;
Paramenters must be descriptive (do not use: int value) and start with lowercase then pascalCase.

Example: (int entityNumber)
Methods give descriptive names as simple as possible. Starts with lower letter then pascalCase.

Example: getEntity(int entityNumber)

Basic Types

Arrays
let entities: Array = [];

Iterators For each: A for each is different from the one in C# even though it will still work. Rather use how typescript prefers it to be used.

Example:

entities.forEach((item) => {
// do foreach
});

Optimizing your app size

Start by removing unused imports if the Visual Studio Code is up to date it will indicate unused code by dimming it out, the example can be seen in the picture below “ReactiveFormsModule” is not being used in the component. image info

When it comes to the larger module you can also reduce the size by including only the module you need within the main module instead of including the main module only. See the example below:

import { FilterSettingsModel, GridComponent, PageSettingsModel, ToolbarItems, ExcelQueryCellInfoEventArgs, TextWrapSettingsModel, SearchEventArgs } from ‘@syncfusion/ej2-angular-grids’;

This will compile the entire module that can take up an unnecessary size in the application.

Rather specify the specific module you will be going to use.

import { FilterSettingsModel, GridComponent, PageSettingsModel } from ‘@syncfusion/ej2-angular-grids’;

Organizing your Angular Component(typescript) Readability will already make the next developers life so much easier that needs to work on your code.

Organize your properties by data type keeping it all together and splitting it up with a new line.

Example:

objectOne: any = [];
objectTwo: any = [];

isTrue: boolean;
isFalse: boolean;

name: string = ‘John’;
surname: string = ‘Doe’;

age: number;

Indicate on functions if it is public or private. Move all private functions to the button of the component keep what is private sperate from the public functions.