Explore TargetJS on GitHub.

Introduction

Most modern frameworks model the UI as a function of state: When state changes from A → B, the UI immediately jumps to B. But user experiences expect a smooth transition something like: A → transition → B. Coordinating that transition often feels like a fight with the framework.

Moreover, a simple sequence like "Click → Animate → Fetch → Transition to new result → highlight one item" is handled by multiple concepts or APIs such as event handling, animation library, fetch logic, and timing mechanism. This often also requires extra glue code to piece all the parts together.

Lastly, the code structure does not naturally follow the UI sequence. This is an overlooked issue in software architecture, as the structure often depends more on the developers than on a standardized model provided by the framework.

Introducing TargetJS: State as a Destination and Predictable Execution Flow

TargetJS takes a different approach. Instead of treating state as a static value, it treats state as a destination. Values are not only assigned. They are targets that are approached over configurable steps and intervals. Every state change effectively can be turned into a transition or animation.

Execution flows strictly from top to bottom, following the order in which the code is written. This makes the flow predictable and visible directly in the code. The execution units (see next section), which are often methods, have their own internal state and lifecycles. Their order matters because they execute according to their position in the code.

These execution units can also be reactive. They can wait for the previous execution units to fully complete (including their children). They can also execute every time the previous execution unit executes.

This automatic execution model and built-in reactivity reduce the need for glue code and directly mirrors the UI sequence it defines. It also helps manage asynchronous operations without await chains.

TargetJS: Unit of Execution

To bridge the gap between static code and fluid UI, TargetJS evolves the standard class methods and fields into "Target".

A Target is more than a variable or method. It is an autonomous unit of logic. It doesn't just hold a value. It knows its destination, how fast to get there, and how to react to the progress of the Targets that came before it.

See it in action: Search and Fetch

The following example demonstrates this sequence: click → animate → fetch → replace results.

The fetch target is initially set to active: false, which means it waits for an explicit trigger. When the user clicks, the fetch target is activated. TargetJS understands that fetching data is an asynchronous operation.

The $$ postfix means that a target waits for the preceding sibling targets to complete before running. In this example, removeChildren$$ waits for fetch to complete before it begins. addChildren$$ begins after both fetch and removeChildren$$ are completed.

Notice how fetch, removeChildren$$, and addChildren$$ appear in the same order as the UI sequence. The code is organized around the experience itself.

import { App } from "targetj";

App({
    searchButton: {
        element: 'button',
        type: 'button',
        y: 20, x: 20,
        width: 220, height: 60, lineHeight: 60,
        borderRadius: 10, border: 0, backgroundColor: '#f5f5f5',
        cursor: 'pointer', textAlign: 'center',
        html: 'Search',
        onClick() {
            this.setTarget('scale', {value: [1, 1.15, 1], steps: 8, interval: 12 });
            this.setTarget('backgroundColor', {value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12});
            this.parent.getChild('users').activateTarget('fetch', { reset: true });
        }
    },
    users: {
        y: 90,
        x: 20,
        gap: 10,
        containerOverflowMode: 'always',
        fetch: {
            active: false,
            value: 'https://targetjs.io/api/randomUsers'
        },
        removeChildren$$() {
            this.removeChildren();
        },
        addChildren$$: {
            cycles() { return this.val('fetch').length; },
            value(i) {
                const user = this.val('fetch')[i];
                return {
                    width: 360,
                    backgroundColor: "#fafafa",
                    scale: {value: {list: [0.8, 1]}, steps: 14},
                    boxShadow: "0 6px 16px rgba(0,0,0,.08)",
                    containerOverflowMode: 'always',
                     userName: {
                        padding: 10,
                        height: 30,
                        fontWeight: 600,
                        opacity: { value: [0, 1], steps: 50 },
                        html() { return user.name; }
                    },
                    userEmail: {
                        padding: 10,
                        opacity: { value: [0, 0.7], steps: 50 },
                        html() { return user.email; }
                    }
                };
            }
        }
    }
}).mount('#app');

Final example

Let's expand on the previous example to implement the UI sequence that we mentioned in the introduction: Click → Animate → Fetch → Transition to new result, highlight one item.

We can implement the sequence by adding two targets at the end of the users object: pause$$ and highlightOne$$. pause$$ adds a short pause before highlighting the first user with an animation. setTarget is an imperative way to implement targets within methods.

import { App } from "targetj";

App({
    searchButton: {
       // …same as the previous example…
    },
    users: {
        // …same as the previous example…
        addChildren$$: {
            // …same as the previous example…
        },
        // Wait for children to render, then pause for 150ms
        pause$$: { interval: 150 },
        highlightOne$$() {
            const user = this.getChild(0);
            user.setTarget('backgroundColor', { value: ['#fff7cc', '#fff1a8'], steps: 14 });
            user.setTarget('scale', { value: [1, 1.04, 1], steps: 14 });
            user.setTarget('boxShadow', '0 10px 24px rgba(0,0,0,.14)');
        }
    }
}).mount('#app');

By treating state as a destination and execution as a predictable flow, TargetJS allows developers to write programs that mirror the user experience with significantly less code. Instead of scattering a UI sequence across event handlers, animation logic, fetch calls, and timing utilities, the sequence is defined directly in the structure of the code, like Lego pieces.

Ready to see to learn more?

🔗 Visit: GitHub Repo
🔗 Site: targetjs.io