Let's build clean and Fast Angular application

The wait is over and Angular 7 is out, finally time has come to write about some tips to build fast angular application.In this blog i will share my experience with practices that you need to follow when you are starting a new project.

There are three primary things important when you are starting to build an application with Angular.

1. Project Architecture
2. Application Infrastructure
3. Conventions,Formating and Tooling

CONVENTIONS,FORMATTING AND TOOLING : 

Always place the Angular application outside your backend code

Keep the application in its own repository so that can be deployed/versioned separately. It will also help in tooling. One key rule is to treat it as a real application.

Use VS Code for best experience 

Encourage your team to switch to VS Code which has immense support for development with Angular. It has strong support for extensions used in Angular projects and well regarded by front end community.

Use Tooling

It will kill all the disagreements. Use VS Code extensions such as TSLint, Angular Language service, Prettier, EditorConfig and SCSS intellisence. 

Naming and Syntax Conventions

Always use Singular for Modules and Singular or Plural for components/services/directives and pipes

Use Angular style commit messages

Examples :

'feat(notification.service): add display param'

'refactor(order models): rename couponId to couponCodeId

Use Codelyzer to do statistical analysis on Angular/Typescript code

It's a set of tslint rules for static code analysis of Angular TypeScript projects. If you are doing Continous deployment configure with your pipeline.

Follow Consistent component/directive/service/module

If you are using Angular-Cli always follow the same pattern to generate the necessary files so that it will be consistent throughout the application.

Absolute path for ES Modules

Alwasy use absolute path that would help in refactoring(moving files around or renaming) and very easy to organize files.

Do not use null and assign default values 

In the templates always use safe navigation type operator which can help in preventing the following annoying erros "cannot read property "name" of undefined"

Choose intelligent defaults and be consistent with them 

'' for string - declare string with default value ""

0 for number - declare numbe with default value 0

[] for arrays - declare array with default value []

Build small reusable components

Dont make your component code go more than 300 lines. Split the pieces that can be reused in a component and make them as a new component. The component should be made as dumb as possible. It should not dependent on any inputs or outputs provided it , it should work simple. General rule of thumb is to make the last child in the component tree to be the dumbest. Reusable components reduce the duplication of code and you can make changes easily.

Components should deal only with the presentation logic Dont have logic other than the presentation logic. Components are designed for presentational purposes and only should focus on what the view should do.Business logics should be separated out to services/methods from the presentation/view logic.

Use trackBy in ngFor Loops 

DOM manipulations are always expensive, immutable practices always generate a new collection which will result in bad performance. When your array changes, Angular will be rendering the whole DOM tree, when you use trackBy, it will know which elements has changed and will make changes only to those particular elements.

const vs let 

Make use of let and const wherever its appropriate. It will help a lot in identifying issues when a value is resassigned to a constant accidently with a compile error and it improves the readability of the code.

Pipeable operators 

With Angular version above 5.5 , you can use pipeable operators which are tree-shakable (only the code need to execute will be included when they are imported) and it will be easy to identify unsed code in the component files.

Subscribe in template 

Rather than subscribe in service or async popes unsubscribe themself automatically it will make the code simpler by stopping the need to manually manage subscriptions which could cause a memory leak. When using subscribe, the risks can be eliminated by using a lint rule to detect unsubscribed observables.

Clean up subscriptions 

When you subscribe in the component to observables, make sure you unsubscribe from them completely with operators like take,takeUntil,Unsubscribe etc

Use appropriate Operators 

switchMap: when you want to ignore the previous emissions when there is a new emission

mergeMap: when you want to concurrently handle all the emissions

concatMap: when you want to handle the emissions one after the other as they are emitted

exhaustMap: when you want to cancel all the new emissions while processing a previous emisssion

Stop using any:type everything in the code

Always declare variables or constants with a type other than any. This is the advantage that you have with Typescript when you have good typings in your application which makes refactoring easier and safe and also avoid unintented issues.

Use lint rules as you need

TSLINT has various options built in already like no-any, no-magic-numbers, no-console, etc that you can configure in your tslint.json to enforce certain rules in your code base

Dont Repeat Yourself 

One of the common mistake that i did as a developer was copy paste the same code in all components. Do not repeat or have the same code in different places in the code base. Extract the repeating code and make them as a generic method which could be used in diferent components.

Avoid Logic in component templates

Place the logic in the component file rather than on the template such as && condition since it cannot be possible to unit test also it is prone to more bugs when changing template code

APPLICATION INFRASTRUCTURE

Lazy load everything - When you are building application with large number of modules always do lazy loading which could improve your application performance by large margin. Angular CLI makes this easy and helps break up your app into logical bundles. With Lazy loading users only pay for what they want. For example, Sensitive (admin only) code will not be downloaded for users that don't have access.

Analyze your bundle - If you are using any bundling mechanism always analyze the size of the bundle generated. You can use webpack-bundle-analyzer for example and you can improve the performance there on.

Install source map explorer

npm install -g source-map-explorer

Build with source map

ng build --prod -sm

Inspect your bundle

source-map-explorer dist/vendor*.js

Debug.Service.ts - It is always good to have a common debug service to assist with the development. This service could replace the calls to console.log.  You can use Visual studio extension codelens to track down the calls with console.log.This service can be toggled at run time with local storage value and needs to be switched off with production builds.

RxJs Operators: When using it becomes handy to handle so many operations with Rxjs operators. Always remember to include/import only the things you need. Also make sure to add noUnusedLocals in the tsconfig.

Use ES Modules for helper functions: With ES Modules it is really easy to import only available when thy are needed.

Keep environment values in environment files: It becomes really easy and very helpful to manage environment values when it comes to continous improvement and continous deployment. 

Avoid Bas classes / Inheritance: Even though Angular is build with Typescript, many of the developers tend to use services from a base class. This should be only if necessary. It will result in restricting the flexibility as when your app grows and use cases changes.

Also create a utility.services.ts to contain all the base helper services. For ex: debug.service.ts , notification.service.ts  session.service.ts can be placed within utility.service.ts which helps in preventing app wide changes to base constructor.

Use Obseravable/State Management Patterns: It is really important to follow Redux patern (RxJS) to have a better state management in application. Also in components use ngUnsubscribe for complex Observable management in Components. Use shareReplay operator and/or async pipe for simpler cases

More things to consider on Application : Always consier browser caching and application versioning. Test the update process and the experience across browsers. Always figure out user experience and continously work on it. Use global error handler to store repor errors to API and do not access Document or Window Objects manually.

ARCHITECTURAL THOUGHTS &  PROJECT STRUCTURE 

• One of the primary thing that you need to consider before starting a project is the architecture on how to build flexible,simple,fast application. It needs lot of planning and consistency to get the basement correct. Building things is really hard enough. When it comes to building Angular application i would recommend to follow the following Guidelines
• One best place to start with good practices is by following the recommended style guide. You need to take what works for your team and skip what does not work. Also try to learn from others mistakes or any other projects that you've already worked with. 
• While designing module,s it is really important to know about how to structure your modules and what should go under Feature/Core/Shared Modules.

• Keep a flat file structure as long as possible which means you should not add hierarchy with less than 20 files and you can always move files as the app grows larger.
• Maintain your application version using the package.json which could be embeded in your app.
• Use package management toolingto guarantee reproducible dev environment and builds.
• Set custom host for the application by changing the default url.
• Use proxies if you are integrating with an API. 
• Lets look at what you can do while implementing the above architecture in your application

Follow this repository in order to get started

The above are the some of the most important practices that you need to follow when you are starting a  new project with Angular. Hope this helps someone out there. 

Ace Angular Interview in 20 minutes - PART1

This should help all the Angular developers out there to test yourself on the knowledge on Angular. I have listed down the concepts/questions from various sources such as Stackoverflow,Medium etc. Will be continuing this with 2 more posts.

1. What's new in Angular 6

• Angular Elements - Angular Elements is a project that lets you wrap your Angular components as Web Components and embed them in a non-Angular application.
• New Rendering Engine: Ivy - increases in speed and decreases in application size.
• Tree-shakeable providers - a new, recommended, way to register a provider, directly inside the @Injectable() decorator, using the new providedIn attribute
• RxJS 6 - Angular 6 now uses RxJS 6 internally, and requires you to update your application also. RxJS released a library called rxjs-compat, that allows you to bump RxJS to version 6.0 even if you, or one of the libraries you’re using, is still using one of the “old” syntaxes.
• ElementRef - in Angular 5.0 or older, is that the said ElementRef had its nativeElement property typed as any. In Angular 6.0, you can now type ElementRef more strictly.
•  Animations - The polyfill web-animations-js is not necessary anymore for animations in Angular 6.0, except if you are using the AnimationBuilder.
• i18n - possibility to have “runtime i18n”, without having to build the application once per locale

2. Difference between "Constructor" and "ngOnInit

• The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses.

• ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component. We have to import OnInit in order to use like this (actually implementing OnInit is not mandatory but considered good practice).

3. Difference between "declarations", "providers" and "import" in NgModule

• imports makes the exported declarations of other modules available in the current module. It is also used to import supporting modules likes FormsModule, RouterModule, CommonModule, or any other custom-made feature module.
• declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.
• providers are to make services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency.

A special case for providers are lazy loaded modules that get their own child injector. providers of a lazy loaded module are only provided to this lazy loaded module by default (not the whole application as it is with other modules).

Example : 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

4. Ahead Of Time Compilation (AOT)

 Angular Ahead-of-Time compiler pre-compiles application components and their templates during the build process.Apps compiled with AOT launch faster for several reasons

• Application components execute immediately, without client-side compilation.
• Templates are embedded as code within their components so there is no client-side request for template files.
• You don't download the Angular compiler, which is pretty big on its own.
• The compiler discards unused Angular directives that a tree-shaking tool can then exclude.
• Also has small bundle size and faster load time.

5. Need of lazy loading modules in Angular.

Lazy loading is useful when the application size is growing. In lazy loading, feature module will be loaded on demand and hence application start will be faster.To load a feature module lazily we need to load it using loadChildrenproperty in route configuration and that feature module must not be imported in application module. 

Build Web Applications With Angular 5 Using Visual Studio Code

My first post for the year 2018 and i wanted to write something about a technology in which i have vast experience and passionate about. This blog will be very useful for those who want to start with angular for developing web applications.In this blog i am going to set up Angular 5 app using Visual Studio Code. I will be using Angular CLI for our sample application. The following are the steps needed to create your first angular application using angular5.

Steps

• Install Node.js.
• Install Angular CLI.
• Design our  Angular App.
• Launch  App in the browser.
• Displaying our custom information on a page.

1. Install Node.js

In this approach, the first step is to install Node.js. If you have not installed nodejs in your machine visit the website and download according to your OS. You will see the following display.

Download and install the latest LTS version as per the configuration of your machine. The current version of Node LTS is 8.9.3. Installing node.js will also install npm (node package manager) on your system.

Next step is to make sure everything related to node is installed, To check the version of node and npm installed on your machine, run the following command in command prompt.

• node -v 
• npm -v

which will be as follows,

2. Install Angular CLI

We are done with the step1, next is to install angular cli. For those who are very new to angular , angular cli is a command line interface for angular applications. After installing node and npm, the next step is to install Angular CLI. Run the following command in a command window.

• npm install -g @angular/cli

The above command will start Angular CLI installation on your machine. This might take bit of time  based on the internet connectivity.

 3. Design our  Angular App.

That's all folks, we have setup the necessary environment to start coding. Lets create our application in a folder named Angular5Demo. Run the following command to create a folder for our application.

• mkdir Angular5Demo

lets navigate to our created folder, so run the following command.

• cd Angular5Demo

we are in the same folder where our application resides, so lets create our template/structure for our application using angular cli. run the following command

• ng new myFirstApp

if you have missed anything the following screen shows the steps and the output.

Lets see the code in visual studio code editor. Type code. in the command prompt.

• code .  

Which will open up the code in the visual studio code. And that’s it.  You can see the following file structure in Solution Explorer. We have created our first Angular app using VS Code and Angular CLI.

4. Launch  App in the browser

 To launch the application and to start the web server run the following command 

• ng serve 

After running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

We'll leave the web server as it is while we look into the code of this application. Again open the code inside the path by typing the foolwoing command.

      code .

5. Displaying our custom information on a page.

Now, Let's display a message saying "" using JSON data on the page instead of the message “Welcome to app!”. To achieve this, open /src/app/app.component.ts file. Change it as follows or according to the data you want to see on the page.

and HTML template as,

Change the value of title property to a JSON object as shown above.  You can see the updated web page as shown below.

With angular cli If the web server is running and you make any changes in the Angular application, then you don’t need to refresh the web page. It will automatically update itself as you save the application code file. You can now play with the appellation by using various JSON objects also by making requests.

That's it folks, we have learned about creating our first Angular 5 app using VS Code and Angular CLI. Please post your valuable feedback in comments section.  

Angular Language Service - A handy extension for angular developers

Even though there have been plenty of tools/extension to check the typescript/javascript code, but there have not been any extension to validate the HTML code or related features to it. Angular Language Service was released to make the developers more productive and reduce the errors by offering better code completion. This service is available in the market place for installation for the Visual Studio as well as other code editors that support Type Script. Errors can be detected at the time of code creation . Hints are also provided for code completion. This effectively allows us to use the Intellisence for variables defined and used in the template. The navigation service is provided to link properties and their definition. This extension provides a rich editing experience for Angular templates, both inline and external templates including:

• Completions lists
• AOT Diagnostic messages
• Quick info
• Go to definition

The language service is developed by the Angular core team. At the time of writing, it is ready to use in VSCode, Sublime Text and WebStorm.

Language service uses the Angular compiler for parsing our application and producing diagnostics. It decorates the TypeScript language service in and uses its logic again. The coolest feature about the service is that it is not coupled to a specific Angular version and can be used in any text editor and IDE as soon as there’s an available plugin.

More about the language service can be found in the ng-conf talk by Chuck Jazdzewski (the creator of the language service) “Using the Angular Template Language Service”.

Start using in your angular projects and be more productive. Cheers!