DEV Community

Cover image for Keeping View Logic Clean
John Peters
John Peters

Posted on

Keeping View Logic Clean

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

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);
   });
}
Enter fullscreen mode Exit fullscreen mode

JWP2020 Clean Views

Top comments (0)