Hey there folks, I am Abhishek Sinha pursuing Web Master Plus course, just completed another popular content in programming i.e. Angular (A JavaScript Framework) from ADMEC Multimedia Institute, New Delhi. And as usual, I was given a blog to explain my own views, this time on Angular. The topic of the blog is “5 best performance tips for Angular Developers”. Let’s talk about what is Angular.
What is Angular?
Angular is basically typescript which is again JavaScript. As all JavaScript developer knows that it’s pretty basic and less object-oriented, very few would have ever used classes and objects in it, but typescript is completely object-oriented and compiled language.
Note: No browser understands the typescript so compiler converts it into JavaScript.
Angular is a framework of JavaScript which is mostly used for single page application development. Yes, it’s also a Camel Case. It has only one main index.html file rest are just its components. Many people know AngularJS as Angular but it’s completely wrong AngularJS is a past version of Angular from where it has lifted and it has come a long way, its latest version is 9.x.x.
Before joining any Angular course make sure to have basic knowledge of JavaScript and You will learn typescript during the Web design course. I guess I have blabbered a lot about Angular and JavaScript. Let’ get to the point then.
Important Tips for Angular Developers
1. Do not use vanilla JavaScript
People who aren’t known to term Vanilla JavaScript its plain or pure JavaScript without the usage of JQuery. So, do not use plain JavaScript in your typescript instead use property and define its type it’s a good practice to run by rules if you’ll just use JavaScript there then what’s the point of learning Angular course do it using normal HTML CSS and JavaScript. The last thing try to write a code which is dynamic and good.
2. Usage of service
Service is a very important part of Angular it makes your methods and data usable across the children of the component you have injected it in. Yes, its hierarchy based, means that if you have injected a particular component then only its child can access the information provided in that service so always be careful when you are injecting it. If one has created service using the terminal, then by default it’s provided in-root which means it is accessible to everywhere and you can change it as per your need.
There are several rules which every coder has to follow like not creating unnecessary codes, do not repeat yourself. So if you think any method has to manipulated across the application then make it in service then call it and also make all the important methods related to that particular service.
3. Usage of ngOnDestroy
When you fetching the data from the server, you subscribe it to get the data. Any component in angular has a lifecycle which is managed by Angular but in some cases, the user has to destroy it, otherwise, it will always be there which will slow your application.
But if you are using any given component provided by Angular then it will be monitored, like in the case of Activated Routes Angular itself unsubscribes but if you want, you can also do it just use ngOnDestroy lifecycle hooks and yes don’t forget to implement it and import from angular/core. Although if don’t implement, it will work but it’s a good practice to use ngOndestroy.
4. Using an Arrow Functions
I would also recommend to use this in Vanilla JavaScript but let’s focus here writing an arrow function. At first, it might look tough or not easily understandable but it’s quite easy once you get the practice of it. Let’s take an example of setTimeout Function:
Without Arrow Funtion:
setTimeOut( function(){
//code
}, time)
With Arrow Funtion:
setTimeOut( ()=>{
//code
}, time)
Now, when you are using in general and only have one parameter then you can also remove the parenthesis and write directly
Parameter => {
//code
}
Pretty easy huhhhh..
5. Using Angular Material
The Angular Material is like a library for the Angular itself to provide a material design to the Angular based applications, not only it contains style but it also has many in-built components that you’ll just feel WOW about it and the most important thing about Angular Material is that it’s all written in typescript so no impact on the speed of the application.
The Angular Material itself is quite big and takes a lot of time if you want to become fluent in it. It has so many components like Data Table and everyone knows it’s such ….. Let’s not go there, Angular Material provided with pagination search and wait for it… column sorting just one line of code, and you are done.
It also has a component for a modal or dialog box which is very helpful. If anyone has to make dialog box let’s say will take a good amount of time. It also has theme option when you’ll proceed, it will ask for it and yeah it can be customized.
Learn Angular in detail with our Angular Master Plus course
Some extra tips from my side can’t help it:
Using Flex Layout
Flex Layout here is third party library which helps in making angular applications responsive. Yes, I know you can bootstrap but it won’t give you that performance as it uses display flex property and typescript to make the layout responsive it quite fast.
Using VS Code IDE
Although there are a lot of code editors in the market but I would recommend using VS Code as it has built-in the terminal which will make compiling and creating the components using cli a lot easier and there are also several extensions which you can download and use.
So there you go, I gathered all the information as per my best knowledge, it was just 5 tips but I kept on writing and I actually forgot the number so some extra tips.
Yes, I really want to thank the faculty who has been taking our classes Mr. Ravi Bhadauria it was fun learning Angular course with you looking forward for more.
