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
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)