Interoperability of Declarative (JSX) and Imperative (DOM) Coding in Fortis

In web development, the choice between declarative and imperative coding approaches can significantly impact your project's maintainability, performance, and development speed. Fortis, a JavaScript project that uses JSX for building user interfaces, offers a unique opportunity to seamlessly blend the declarative power of JSX with the imperative control of the Document Object Model (DOM). In this article, we'll explore the interoperability of declarative JSX and imperative DOM coding in Fortis, showcasing a practical example to demonstrate how these two paradigms can harmoniously coexist.

The Power of Fortis JSX

Fortis leverages JSX to define the structure of user interfaces, following a convention where HTML attributes are used as they are, without camelCase conversion. This approach makes it easier to write intuitive and consistent code. The f factory in Fortis returns native DOM elements, ensuring that the resulting components are fully compatible with the DOM.

A Practical Example

Let's dive into an example to showcase how declarative and imperative coding can work together within Fortis:

interoperability.tsx

import {f, FunctionComponent} from "fortis";
 
const Component: FunctionComponent<{rank: number}> = ({rank}) => {
    // Create a DOM element imperatively
    const div = document.createElement("div");
 
    return (
        <section onclick={() => div.innerText = `id-${rank + Math.random()}`}>
            {rank}
            {div}
        </section>
    );
};

In this example, we define a Fortis component named Component. Within the component, we blend declarative and imperative approaches seamlessly. Here's how it works:

We start by importing the necessary modules, including the f factory from Fortis.
In the Component function, we receive a rank prop, which is used within the component's JSX.
Imperatively, we create a DOM element div using the document.createElement method. This div will be controlled imperatively to update its innerText.
In the JSX section, we declare a <section> element. Inside the onclick event handler, we use imperative code to update the div's innerText. This action is triggered when the <section> is clicked.
We also include the rank prop and the div element within the <section> to create a user interface that combines declarative and imperative elements.

This example demonstrates how Fortis allows you to create dynamic and interactive user interfaces by combining declarative JSX with imperative DOM manipulation. This flexibility is particularly useful when you need to handle complex interactions or integrate third-party libraries that require imperative coding.

Benefits of Interoperability

The interoperability of declarative and imperative coding in Fortis offers several advantages:

Fine-Grained Control: You can take full control of specific DOM elements when needed, enabling you to implement complex behaviors that are not easily achievable with a purely declarative approach.
Performance Optimization: Imperative coding can be more efficient in certain scenarios, allowing you to optimize your application's performance.
Third-Party Integration: When using third-party libraries or APIs that require imperative interactions, Fortis' interoperability makes it easier to integrate such components into your application seamlessly.
Transition Flexibility: You can smoothly transition from a declarative approach to an imperative one and vice versa, adapting your coding style to the requirements of your project.

In conclusion, Fortis provides a powerful platform for creating web interfaces that can seamlessly blend the best of both declarative and imperative coding. This flexibility empowers developers to craft user experiences that are not only expressive and intuitive but also dynamic and responsive. The example presented here illustrates how you can harness the strengths of both paradigms to build robust and feature-rich web applications.

Attributes Nesting