Angular Best Practices Cheatsheet

1
Angular Best Practices
2
Tables Of Content

• 1 Features Of Angular
• 2 Best Practices Of Angular
• 3 Best Angular Security Practices

3
Features Of Angular

• 1Angular Material
• 2 Modular Structure
• 3Component - Based Architecture
• 4Angular CLI
• 5TypeScript
• 6Angular Universal
• 7Angular Router

4
Angular Material

• Angular Material is a UI component library for
  Angularjs developers.
• It is a finished library of reusable UI parts.
• Angular Material parts help in building
  appealing, predictable, and utilitarian website
  pages and web applications while holding fast to
  current website architecture standards like
  program movability, gadget autonomy, and smooth
  debasement.

5
Modular Structure

• The modular structure of Angular arranges the
  code into different modules so all services and
  components are divided into different groups.
• In Angular coding, you can isolate usefulness
  into reusable bits of code.

6
Component - Based Architecture

• Component based development is an approach to
  software development that focuses on the design
  and development of reusable components.
• These components follow a hierarchical structure.
• We can accumulate components with comparative
  functionalities, use segments orders and convert
  them into all around characterized angular
  segments

7
Angular CLI

• Angular CLI(Command Line Interface tool) helps in
  developing, scaffolding, testing, and deploying
  angular applications.
• CLI itself is quite something to learn about, it
  makes Angular development workflow much easier
  and faster.
• It can create another rakish application and
  documents, execute a precise application, run
  tests, and construct applications for their
  organization

8
TypeScript

• One of the unmistakable superscripts of
  JavaScript is Typescript.
• It has numerous in-assembled libraries and gives
  various functionalities to an Angular
  Application.
• Either the default TypeScript Checker can be
  used, or the Babel compiler can be invoked to
  convert TypeScript to JavaScript.

9
Angular Universal

• Angular Universal also known as server-side
  rendering is tool which allows server to
  pre-render Angular application while user hits
  your website for first time
• Web Application will become more engaging and
  user- friendly with the use of Angular Universal.

10
Angular Router

• The Angular Router is a center part of the
  Angular stage. It empowers engineers to construct
  Single Page Applications with various
  perspectives and permit route between these
  perspectives.
• Acquiring all in-built Routing and Navigation
  features, Angular works best for all businesses

11
Best Practices Of Angular

1. Use Lazy Load Module Feature
2. Avoid Use Of any Type
3. Use ES6 Features
4. Use trackBy with NgFor
5. Use Environment Variable
6. Using Async Pipe
7. Always Document

12
Lazy Load Module

• Lazy loading is a technique in Angular that
  allows you to load JavaScript components
  asynchronously based of currently activated
  route.
• It Basically works to Lower startup time, which
  results in easy and fast loading of the
  application.
• The great advantage of a lazy loading approach is
  that we can load our resources on demand and not
  all at once.
• Since lethargic stacking separates the
  application into numerous modules (consistent
  pieces of code) and loads those modules just when
  they are needed by the client (contingent upon
  where the client explores inside the application)

13
Avoid Use of any Type

• Staying away from the utilization of 'any' type
  can conceivably bring down the quantity of
  startling issues.
• Likewise, not utilizing any sort in our
  application will make the refactoring simple.
• The problems can be restricted by typing the
  specific variables and keeping others away.

14
Use ES6 Feature

• ES6 stands For ECMAScript 6.
• ES6 brings new language structure and new amazing
  highlights to make your code more present day and
  more lucid.
• It allows you to write less code and do more.
• ES6 highlights like Let and Const, Arrow
  Functions, Object Literals string insertion makes
  JavaScript programming simpler.

15
Use of trackBy with NgFor

• Utilizing just ngFor mandate without trackBy work
  in angular application will eliminate all the
  DOM components and afterward it will reproduce
  the DOM components again in the DOM tree.
• So in any event, when a similar information is
  getting utilized, it'll moderate the application
  execution when there is a ton of information.
• The NgFor directives is used to loop over a
  collection (or an array) in your application to
  render a piece of UI repeatedly.

16
Use Environment Variable

• At the point when we construct projects utilizing
  Angular (or some other innovation ), it's normal
  for engineers to have numerous application forms
  that target various conditions for example
  improvement and creation.
• We can even add more environments, or add new
  variables in existing environment files.
• Development and Manufacturing are default angular
  environment.
• Programming interface endpoints, application
  variants, datasets, and so on Rakish gives
  climate setups to proclaim factors remarkable for
  every climate.

17
Using Async Pipe

• I generally use async pipe whenever the situation
  allows and possibly use .Subscribe in when the
  result is a flat out need.
• You probably heard that the AsyncPipe withdraws
  from Observables when the segment gets
  annihilated. In any case, did you likewise know
  it Unsubscribes when the reference of the
  articulation changes?
• In addition to the fact that this makes our code
  quite perfect, but on the other hand it's
  shielding us from unpretentious memory spills.

18
Always Document

• Alway document your code as much as possible.
• Composing remarks inside the code helps different
  designers associated with the undertaking
  improvement a great deal and comprehend the
  reason and rationale of the composed code.
• It deals with the code and adds to the clarity
  of the code.
• It is a decent practice to archive the
  utilization and part of every factor and
  technique. For techniques, every boundary ought
  to be characterized utilizing multi-line remarks
  and it ought to likewise be characterized what
  task precisely the strategy achieves.

19
Best Angular Security Practices

1. Forestalling Cross-Site Scripting
2. HTTP-related Vulnerabilities
3. Use Route Guards on the Navigation
4. Continue To Update Angular Libraries

20
Forestalling Cross- site Practices

• In web applications to forestall malignant
  assaults, Cross-Site Scripting(XXS) for security
  weakness can be utilized.
• This interaction will send a content to the
  assailant and the client both simultaneously and
  keeps the client from tolerating the malevolent
  content unconsciously into a confided in site.
• The noxious content that executes on the site may
  cause an issue as beneath
• The DOM tree might be changed by modifying the
  HTML page
• Access data from treats and meetings.
• Aggressors can send their content if the site
  isn't getting away from the HTML content Tags.

21
HTTP- Related Vulnerabilities

• Two types of vulnerabilities are cross-site
  request forgery (CSRF or XSRF) and cross-site
  script inclusion (XSSI), where an attack could
  occur to access web app data.
• 1. CSRF (Cross-site request forgery)
• 2. XSSI (Cross-site Script Inclusion)

22
CSRF(Cross - Site Request Forgery)

• Via this form of vulnerability, with the aid of
  any authenticated user of that domain, attackers
  send HTTP protocol requests to the server.
• In this method, the attacker acts as a secret
  mediator.
• For instance, if an authenticated user logs into
  his/her website, the attacker tries to make an
  HTTP request by clicking on an unknown connection
  and can access secret information from that r.

23
XSSI(Cross-site Script Inclusion)

• This technique is used by attackers using
  insecure scripts.
• Do not use any third-party script that comes from
  an untrusted domain, because if it is not stable,
  the hacker may add any executable code to that
  script and we can compromise any critical
  information during the execution of this script
  in our domain.

24
Use Route Guard on Navigation

• Firstly, by operating on the route guard
  interface, we can accept or refuse permission to
  navigate the URL requested by users.
• Route guards use a Boolean rule, such that if
  they all return true value, then the user will
  navigate to the requested URL and the user will
  be stopped from navigating that URL if any of
  them returns a false value.
• CanActivate Checks whether the component can be
  accessed or not
• CanActivateChild Checks whether the child
  component can be accessed or not
• CanDeactivate It asks for permission to discard
  the changes
• CanLoad Checks before load feature module

25
Continue To Update Angular Libraries

• Angular improves day-by-day and regularly
  delivers updates to strengthen current features
  and to deliver the best results.
• Updates keep coming every now and then with fixed
  bugs and providing good security reasons, so keep
  upgrading your libraries to keep your systems
  flexible and take full advantage of the angular
  architecture.

26
Conclusion

• It's a constant journey to create apps, and
  there's always space to enhance things.
• This list of optimisations is a good place to
  start, and it will make your team happy to
  implement these patterns consistently. With your
  less buggy and powerful application, your users
  would also love you for the nice experience.

27
References

• https//www.tatvasoft.com/blog/angular-optimizatio
  n-and-best-practices