DEV Community

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

12 Best Practices to build the "Scalable Angular Application"

vatsal2210 profile image Vatsal Shah Updated on ・2 min read

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


Editor guide