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.

Period.

---

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

PORTFOLIO | GITHUB | BLOG

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 ☕