DEV Community

Cover image for 12 Best Practices to build the "Scalable Angular Application"
Vatsal Shah
Vatsal Shah

Posted on • Updated on

12 Best Practices to build the "Scalable Angular Application"

Apply LIFT Principle:

L - Locating our code is easy
I - Identify code at a glance
F - Flat structure as long as we can
T - Try to stay DRY (Don’t repeat yourself)

Meaningful Names:

  • Assign methods, variables and parameters names so easy to read and understand by name
  • Don't try to add any jargons or technical wordings into names.

P.S: I personally struggled a lot but it'll improve with the practice only.

Create 5-10 seconds Rule:

If you can’t understand and explain your code in 5 to 10 seconds; probably need a refactor or rename the names.


Component Design:

What goes into components first?

  • Properties follow by methods (Input(), Output())
  • Groups and sorted
  • Variables

Don't define variables randomly. Follow the structure which will help on a long run.

How to "Import components" into file:

  • External imports come first
  • Give a blank line before the import files from our own app

P.S An easy way to identify the external and app files.

Components members sequences

  • Public methods must be declared before private once
  • Easy to read and find private vs public methods
  • Define private method; if necessary

Create Smaller Function (Must):

Why ?

  • Easy to read and understand the purpose of a function
  • If a function has more than 10-15 lines; ASK YOURSELF if it would be better to break it into smaller functions

P.S Kindly think about other developers in a team.

Provide clarity through code:

  • Explain in code; No need of unnecessary comments Folded hands
  • Write self-describing code
  • Replace technical terms with simple naming convention (Point 2)

When to use comments?

If you really want to add comments, only do for following:

  • Explain “WHY” you do that?
  • Any consequences of a method or function

How to design services and components?

  • Don’t add any complex logic to components. NO!
  • Keep components to receive and send requests
  • No more than 2 to 5 line of complex logic in components
  • Add API call, local storage, structure in services

Symbol Naming:

  • Properties and methods must be camel case (e.g. currentUser)
  • Classes (components, services, directives) must be upper camel case, called Pascal case (e.g. UserComponent)

Recommended CS Code Extensions:

  • @PrettierCode
  • @geteslint
  • @materialtheme
  • Auto Import
  • Angular 10 Snippets - Typescript
  • Auto Rename Tag (Productivity)
  • Auto Close Tag (Productivity)
  • Bracket Pair Colorizer

P.S: I would recommend to try @wakatime


If you like my stuff and hate spam, I can send my upcoming articles to your inbox. One-click unsubscribe anytime — Click here to join my newsletter 💌

If you’re feeling generous today, you can buy me a coffee

Top comments (0)