Mastodon hachyterm.io

Notes on the Pluralsight course “Angular Best Practices” by Jim Cooper

Notes File and Folder Structure LIFT: Locate code quickly, Identify code at a glance, Flattest structure possible, Try to be DRY organize …

Last modified:

Notes

File and Folder Structure

  • LIFT: Locate code quickly, Identify code at a glance, Flattest structure possible, Try to be DRY
  • organize code into feature areas
  • one item (service/component/directive) per file

General Coding Practices

  • Single Responsibility Principle (example: re-factor data access service to separate services for user and catalog)
  • prefer immutability
  • use small functions

Angular Module Organization

  • App Module
  • Core Module: shared singleton services, app-level components (e.g. navigation bar)
  • Shared Module: shared components, directives, and pipes (e.g., loading spinner)
  • Feature Modules: feature-level services, components, directives, and pipes

Angular Components Best Practices

  • use a prefix selector that matches the feature area of the component
  • guideline: move HTML and CSS to separate files if they are more than 3 lines long
  • declare input and output properties with decorators: @Input and @Output
  • delegate complex logic to separate services
  • class members order: put properties at the top, so they are easy to see
  • class members order: public class members first, private methods later
  • implement the interface for the lifecycle hooks
  • don’t get too granular with creating components (example: HTML attributes that will be hidden behind a component)

Angular Services Best Practices

  • extract data access into services
  • services provided (injected) into a lazy feature module create their own instance of the injector: for singleton services create a separate “core” module (eagerly loadeded) that contains the root injector

Performance Best Practices

  • use AOT (Ahead-of-time) Compilation (use --production flag)
  • use lazy loading
  • OnPush Change Detection can help improve the performance, but it’s not recommended to use it for the complete application (Angular will look at reference changes instead of property changes)
  • pipes are pure per default

Source