Photo by Sardar Faizan on Unsplash

Wrapping Components in Front-end Development

As a Software Engineer, you probably heard about the adapter pattern which is a software design pattern that allows the interface of an existing class to be used as another interface. It is often used to make existing classes work with others without modifying their source code.

Adapter pattern example from www.geeksforgeeks.

Wrapping components is a common practice in front-end development that follows the adapter pattern. It involves surrounding a component with another higher-level container component typically to provide additional functionality or styling, and to create modular and reusable code.

Assume that we have the following angular component without wrapping:

<div>
  <mat-checkbox
    (change)="changeCostFactor()"
    [(ngModel)]="costFactorModel"
     disabled="false"
  >
    <div>
      Cost Factor
    </div>
  </mat-checkbox>
</div>

Let us think about the following questions:

• What if you want to apply styling to the checkbox label across the whole system?
• How could you enforce the use of a specific type for the model in all usages?
• What if the checkbox is used in multiple screens in your system and the syntax is changed due to a library upgrade?

To wrap a component, simply create a new component that accepts the original component as a prop. The new component can then render the original component, along with any additional functionality or styling that it provides.

For example, the following code shows a simple wrapper component:

import {
  Component,
  EventEmitter,
  Input,
  Output
} from '@angular/core';import {
  Component,
  EventEmitter,
  Input,
  Output
} from '@angular/core';

@Component({
  selector: 'shared-check-box',
  templateUrl: './shared-check-box.component.html',
  styleUrls: ['./shared-check-box.component.scss']
})
export class SharedCheckBoxComponent {
  @Input() label;
  @Input() model: boolean;
  @Input() isDisabled: boolean = false;

  @Output() modelChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  changeModel() {
    this.modelChange.emit(this.model);
  }
}

<div>
  <mat-checkbox
    (change)="changeModel()"
    [(ngModel)]="model"
    [disabled]="isDisabled"
  >
    <div class = 'label'>
      {{ label }}
    </div>
  </mat-checkbox>
</div>

.label {
  height: 20px;
  font-size: 12px;
  line-height: 26px;
  color: #706e6b;
}

<shared-check-box
    [(model)]="costFactor"
    [label]="'Cost Factor'"
    [isDisabled]="isCostFactorDisabled"
  >
</shared-check-box>

Therefore,

• If you want to apply styling to the checkbox label across the whole system, you can just modify the SCSS file in the wrapped component.
• The model is initialized in the wrapped component as a boolean so all usages can only use boolean models.
• If the syntax has changed due to a library upgrade, you can change it in one place, which is the wrapped component that reflects all usages accordingly.

Benefits of Wrapper Components

There are many benefits of wrapper components in front-end development, including:

• Reusability: can be reused throughout your codebase, which can save you time and effort.
• Maintainability: make your code more maintainable by isolating components from each other and encapsulating common functionality.
• Styling: can be used to apply consistent styling to a group of components.
• Testing: break down your application into smaller, isolated, more manageable components, each with a specific responsibility. It becomes easier to write tests for those components.

Challenges of Wrapper Components

There are a few challenges that can arise when using wrapper components in frontend development:

• Increased complexity: add complexity to your code, especially if you are wrapping many components or if you are using complex wrapper components. This can make your code more difficult to read and understand.
• Performance impact: have a negative impact on the performance of your application. This is because wrapper components can add additional overhead to the rendering process.
• Time-consuming: by nature, building wrapping components consumes time. So, we must compare the benefits of wrapper components versus using the library components directly, as it can vary depending on the situation and project size.

Conclusion

Wrapping components is a powerful technique for improving the reusability, maintainability, and styling of your front-end code. By following the tips in this article, when working on large systems that involve many components or complex code, it is recommended to use wrapping components. However, for small projects, it may not be necessary to put in the effort of wrapping.

Written by Yara Ameen, Technical Lead of the Ninjas squad at Kites Software. 🥷