42. Direct HTML and JavaScript Integration

The Problem

Existing HTML pages and JavaScript code should be usable without rewriting the UI into a framework-specific rendering syntax.

The Angular Difficulty

Angular can integrate legacy DOM code through `ElementRef` and lifecycle hooks, but developers must respect Angular's rendering and cleanup conventions.

Angular Approach

@ViewChild("legacyButton") button!: ElementRef<HTMLButtonElement>;

ngAfterViewInit() {
    this.button.nativeElement.addEventListener("click", this.onClick);
}

ngOnDestroy() {
    this.button.nativeElement.removeEventListener("click", this.onClick);
}

MS Approach

ManySet provides a direct runtime-oriented approach for this recurring business-application task.

<button id="legacyButton">Legacy Button</button>

<script>
    ms.id("legacyButton").addEventListener(
        "click",
        () => console.log("clicked")
    );
</script>

Why this way is useful in business applications :

The comparison is intended to show where ManySet supplies a business-application abstraction around a recurring task, while keeping HTML and JavaScript visible and directly usable.

Key Point :

ManySet reduces the amount of framework-specific composition required for this particular task, without requiring the React/Angular mechanism to be represented as inherently wrong or incapable.