Why Angular

• Just another JS framework
  • Modularity
  • Observables
  • Routing
  • HttpClient Module
  • Shadow DOM
  • Templating
  • Change Detection
  • Typescript
  • PWA

What is Coding Style

• • How and when to use comments,
  • Tabs or spaces for indentation (and how many spaces),
  • Appropriate use of white space,
  • Proper naming of variables and functions,
  • Code grouping and organization
  • File Structure
  • Patterns to be used,
  • Patterns to be avoided.

Contents

• Single responsiblity
• Naming
• Coding Conventions
• Structutre and NgModules
• Components
• Directives
• Services
• Data Services
• Lifecycle Hooks

Single Responsiblity

• Rule Of One
• Small Functions

Rule of One

• Do define one thing, such as a service or component, per file.
• Consider limiting files to 400 lines of code.
• Who cares

Why 101

One component per file -

• Easier to read, maintain, and avoid collisions with teams in source control.
• Avoids hidden bugs when combining components - share variables, create unwanted closures, coupling with dependencies.
• default export for its file - lazy loading with the router.

Small Functions()

• Do define small functions
• Consider limiting files to 70 lines
• Not possible

Why small()

Small functions() -

• easier to test, when they do one thing and serve one purpose
• Avoids hidden bugs that come with large functions - share variables, create unwanted closures, coupling with dependencies.

Naming

• Use dots and dashes
• quickly identify what is in the file
• pattern matching for any automated tasks
• search

Custom prefix for components

Custom prefix for directives

Coding convention

• Classes
• Constants
• Interfaces
• Properties and Methods
• Import line spacing

• UpperCamelCase for class names
• lowerCamelCase for const
• UpperCamelCase for interfaces (I)
• lowerCamelCase for property and methods(_)
• separate your stuff from their stuff.

Application structure and NgModules

• Locate
• Identify
• Interfaces
• Flat
• T-DRY

kaboom