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 React Difficulty

React expects UI to be expressed through JSX or compatible component abstractions. Existing DOM-oriented JavaScript can be integrated, but developers often need refs, effects, or wrapper components.

React Approach

function LegacyButton() {
    const ref = useRef(null);

    useEffect(() => {
        const button = ref.current;
        const handler = () => console.log("clicked");
        button.addEventListener("click", handler);
        return () => button.removeEventListener("click", handler);
    }, []);

    return <button ref={ref}>Legacy Button</button>;
}

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.