Keeping View Logic Clean

   async ngAfterViewInit() {
      if (this.persons?.length > 0) {
         await funcSetEMCData(this);
         return;
      }
      await funcGetPersons(this);
      await funcHookPlusEventClicked(this);
   }

The code above demonstrates the first-class nature of Javascript functions. Each of these functions are closely coupled to this view. Close Coupling is usually not good, but not always.

For example, a car has a engine and tires which must be created and installed for the car to function. When they are installed, for that car, they are closely coupled.

What makes the code above closely coupled is passing the parameter "this". It is saying for this view these are things that must be done. It keeps our view code very clean.

The functions themselves can call other 'more generic' functions which would be the reusable layer.

export async function funcGetPersons(
  ec: ECMainComponent) { 
   ec              // this is closely coupled
    .httpService   // globally reusable service
    .getPersons()  // a reusable Function
    .subscribe((persons) => {
      // a property in ec
      ec.personCache = new BehaviorSubject(persons);
      // another property
      ec.persons = persons;
      // this function is close coupled                   
      funcSetEMCData(ec);
   });
}

JWP2020 Clean Views