lundi 5 mars 2018

Enforcing consistent component behavior in Angular applications

What techniques do people use to achieve consistency in behaviors that Angular components should have within an application? Especially with projects that are very large or have geographically distributed teams? Things like:

  • All components should set the page title
  • All top level components should be resilient to page refreshes
  • All components should ensure that they unsubscribe to things on ngOnDestroy()

Is it worth putting some of these things into an abstract base component? Something that gets injected with Title and ActivateRoute and a subscription tracker, and provides the base implementation for ngOnInit() and ngOnDestroy(), and forces subclasses to implement methods like title(): string and subscriptions(): any[]?

Is this a better thing for composition? If so, how do you enforce components written by a distributed team of engineers to inject (and appropriately use) a TitleService, or RefreshManager, or SubscriptionTracker?

Is it sufficient to preach convention on the team? Define code structure standards that all top level components must follow? If so, how are these enforced?

Decorators seem like the could be useful in addressing some of this problem space. Creating a decorator like:

@PageTitle("Foo Title")
@Component({...})
export class FooComponent {
}

that is backed by a function that wraps ngOnInit() with code to store existing title and set "Foo Title", and then code that wraps noOnDestroy() to restore the original title. But limitations of decorators seem to preclude injecting services, and the above example would still require that the FooComponent implements OnInit, OnDestroy for the decorator to be correctly applied at build time.

So to summarize: how are people currently solving this problem?

  1. Abstract base component of all common functionality
  2. Several common utilities injected into every component
  3. Coding standards that enforce consistent (duplicate) code across components
  4. Something else

Aucun commentaire:

Enregistrer un commentaire