DEV Community: Ahmad Wasfi

If you're into building performant UIs, give it a read and let me know what you think!

Ahmad Wasfi — Thu, 31 Jul 2025 23:50:29 +0000

Ahmad Wasfi

Jul 31 '25

Lego-isation of the UI with TargetJS

#webdev #programming #javascript #frontend

Comments

6 min read

Lego-isation of the UI with TargetJS

Ahmad Wasfi — Thu, 31 Jul 2025 23:40:16 +0000

Explore TargetJS on GitHub.

Introduction

Frameworks often promise simplicity, but frequently require extensive boilerplate and libraries as they inherit the same software approach rooted in early programming models and force it to fit building user interfaces by adding more complexity. User interfaces are dynamic and asynchronous and require a different paradigm.

TargetJS adopts a new approach. First, it unifies class methods and fields into a single construct called targets. Each target is given state, lifecycles, timing, iterations, and the autonomy to execute mimicking the behavior of living cells. Targets are essentially self-contained, intelligent blocks of code.

The second challenge is making these targets to fit and work together especially since UI operations are highly asynchronous. Instead of relying on traditional method calls and callbacks that don't address asynchronous nature well, TargetJS allows targets to react to the execution or completion of preceding targets. A subsequent target can run independently, execute whenever the previous one does, or wait until the previous target completes. Targets stack together like snapping Lego pieces. It can address complex asynchronous workflow yet easy to understand.

For example, setting a value can implicitly define an animation, where the current value iteratively progresses until it reaches the new value. When the animation completes, the next target might initiate a fetch API call. Once the data is received, it can trigger another target that creates 10 nodes, each with its own animation and API call. A subsequent target can then be set to run only after all nodes have completed their tasks. Throughout this sequence, no direct method calls are made. Targets simply react and chain together based on how the code is written.

Targets unlock a fundamentally new way of coding that simplifies everything from animation, UI updates, API calls, and state management. It also makes the code significantly more compact.

TargetJS Syntax

To enable a target to react to a preceding one, we use postfixes appended directly to the target name. We could also have implemented targets as objects with special properties specifying their dependencies and reaction timing. However, since one of our goals was to keep the syntax compact and to enforce that targets only react to preceding ones, we adopted a postfix-based approach. Specifically, we use $ and $$ appended to target names to indicate reactive behavior.

$ Postfix (Immediate Reactivity):

A target name ending with a single $ (e.g., height$) indicates that this target will execute every time its immediately preceding target runs or emits a new value. If the preceding target involves an asynchronous operation like an API call, the reactive target activates when the response is received. If there are multiple API calls made, $ postfix ensures that the target reacts to the first API result when it becomes available, then the second, and so on, maintaining a strict, code-ordered sequence of operations.

$$ Postfix (Full Completion Reactivity):

A target name ending with a double $$ (e.g., fetch$$) will activate only after its immediately preceding targets have fully and comprehensively completed all of their operations.

Examples

To demonstrate the power and simplicity of TargetJS, we'll walk through a four examples: We'll start with a simple box animation, scale it up to 10 boxes, extend it to infinite scrolling that generates an unlimited number of boxes, and finally add an API call to populate the visible boxes with details.

1. Growing and Shrinking Box

import { App } from 'targetj';

App({
    background: 'mediumpurple',
    width: [{ list: [100, 250, 100] }, 50, 10], //  width animates through 100 → 250 → 100, over 50 steps with 10ms intervals.
    height$() { // `$` creates a reactive target: the `height` updates each time `width` executes
      return this.prevTargetValue / 2;
    } 
});

Explanation

Before we explain how the program works, it's worth mentioning that the entire UI and its behavior are defined directly within a single JavaScript file. There is no separate HTML or CSS.

As noted in the introduction, targets execute in the order they are defined. Thus, they run in the following sequence:

background: This target runs first, setting the element's background color to mediumpurple. Once the assignment is complete, its lifecycle ends.
width: Next, the width target takes over. It's configured to animate through a list of values (100, 250, 100), performing 50 steps with a 10ms pause between each step, creating a grow-then-shrink effect.
height$: Finally, the height$ target demonstrates TargetJS's reactivity. Because its name ends with a single $ postfix, height$ is explicitly declared to react whenever its immediately preceding target (width) executes on every step. As width animates and changes its value, height$ automatically re-runs, setting its value to half of width's value.

The example above can also be implemented directly in HTML, utilizing tg- attributes that mirror the object literal keys used in JavaScript:

<div
   tg-background="mediumpurple"
   tg-width="[{ list: [100, 250, 100] }, 50, 10]"
   tg-height$="return this.prevTargetValue / 2;">
</div>

2. Creating 10 Growing and Shrinking Boxes

import { App } from 'targetj';

App({
    width: 100,
    children() {
        return Array.from({length: 10}, (_, i) => ({        
            background: 'mediumpurple',
            width: [{ list: [100, 250, 100] }, 50, 10],
            height$() {
              return this.prevTargetValue / 2;
            },
            bottomMargin: 2
        }));
    }
});

In this example, we create 10 instances of the box from the previous example.

Explanation

The children target is a special type that appends a new node or multiple nodes if the value is an array. In our example, it adds 10 nodes to the parent, and its lifecycle ends.

3. Infinite Scrolling

import { App, getEvents } from 'targetj';

App({
    width: 100,
    height: 300,
    domHolder: true,
    preventDefault: true,
    children() {
        return Array.from({length: 10}, (_, i) => ({        
            background: 'mediumpurple',
            width: [{ list: [100, 250, 100] }, 50, 10],
            height$() {
              return this.prevTargetValue / 2;
            },
            bottomMargin: 2
        }));
    },
    onScroll() {
        this.setTarget("scrollTop", Math.max(0, this.getScrollTop() + getEvents().deltaY()));
    },
    onVisibleChildrenChange() {
       return !this.visibleChildren.length || this.getLastChild().getY() < this.getHeight() ? 'children' : undefined;
    }
});

In this example, we expand on the previous one to enable infinite scrolling by adding 10 nodes at a time to fill in the gaps as the user scrolls.

Explanation

domHolder is a special target that indicates the dom of its children should exist within itself. In the previous example, the dom existed at the root level. TargetJS makes the dom containment dynamic and encourages a flat tree structure whenever possible.

onScroll is another special target that gets triggered every time the user scrolls.

onVisibleChildrenChange is a special target that gets triggered when the visibility of the children changes. It returns the children target to activate it, adding another 10 nodes.

The above example could be also written as:

import { App, getEvents } from 'targetj';

App({
    width: 100,
    height: 300,
    domHolder: true,
    preventDefault: true,
    onVisibleChildrenChange() {},    
    children$() {
        if (!this.visibleChildren.length || this.getLastChild().getY() < this.getHeight()) {
            return Array.from({length: 10}, (_, i) => ({        
                background: 'mediumpurple',
                width: [{ list: [100, 250, 100] }, 50, 10],
                height$() {
                  return this.prevTargetValue / 2;
                },
                bottomMargin: 2
            }));
        }
    },
    onScroll() {
        this.setTarget("scrollTop", Math.max(0, this.getScrollTop() + getEvents().deltaY()));
    }
});

In this version, the children target reacts each time onVisibleChildrenChange executes, as it has the $ postfix indicating that it should run whenever the preceding target does.

4. Building Infinite Scrolling with Live Data from APIs

import { App, getEvents } from 'targetj';

App({
    width: 100,
    height: 300,
    domHolder: true,
    preventDefault: true,
    onVisibleChildrenChange() {},    
    children$() {
        if (!this.visibleChildren.length || this.getLastChild().getY() < this.getHeight()) {
            return Array.from({ length: 10 }, (_, i) => ({        
                background: 'mediumpurple',
                width: [{ list: [100, 250, 100] }, 50, 10],
                height$() {
                    return this.prevTargetValue / 2;
                },
                bottomMargin: 2
            }));
        }
    },
    loadItems$$() {
        this.visibleChildren.filter(child => !child.loaded).forEach(child => {
            child.loaded = true;
            fetch(this, `https://targetjs.io/api/randomUser?id=${child.oid}`);
        });
    },
    populate$() {
        this.prevTargetValue?.forEach(data =>
            this.getChildByOid(data.id).setTarget("html", data.name)
        );
    },    
    onScroll() {
        this.setTarget("scrollTop", Math.max(0, this.getScrollTop() + getEvents().deltaY()));
    }
});

In this final example, we enable loading the details of each box by making an API call.

The loadItems target is responsible for making the API calls. Since it ends with $$, it is only triggered after the animation of all children has completed.
The populate target handles populating the received data. It only runs once all API results have been received.

Alternatively, populate can be implemented to react to each individual API result:

populate$() {
    const data = this.prevTargetValue;
    if (data) {
        this.getChildByOid(data.id).setTarget("html", data.name);
    }
}

In this version, populate is executed every time an individual API result is received.

It is worth to mention that TargetJS maintains the order of API results to match the sequence of API calls. For example, if the second box’s API result arrives before the first, populate$ will still wait until the first result is received to preserve order.

Finally, if you want to embed this infinite scrolling component directly into your page without external JavaScript, you can use:

    <div
      tg-width="100"
      tg-height="300"      
      tg-domHolder="true"
      tg-preventDefault="true"
      tg-onVisibleChildrenChange=""    
      tg-children$="function() {
        if (!this.visibleChildren.length || this.getLastChild().getY() < this.getHeight()) {
            return Array.from({ length: 10 }, (_, i) => ({        
                background: 'mediumpurple',
                width: [{ list: [100, 250, 100] }, 50, 10],
                height$() {
                    return this.prevTargetValue / 2;
                },
                bottomMargin: 2
            }));
        }
      }"    
      tg-load$$="function() {
        this.visibleChildren.filter(child => !child.loaded).forEach(child => {
            child.loaded = true;
            TargetJS.fetch(this, `https://targetjs.io/api/randomUser?id=${child.oid}`);
        });
      }"
      tg-populate$$="function() {
        if (this.prevTargetValue) {
            this.prevTargetValue.forEach(data => this.getChildByOid(data.id).setTarget('html', data.name));
        }
      }"
      tg-onScroll="function() {
        this.setTarget('scrollTop', Math.max(0, this.getScrollTop() + TargetJS.getEvents().deltaY()));
      }"
></div>

Ready to see to learn more?

🔗 Visit: GitHub Repo
🔗 Site: targetjs.io

TargetJS: Code-Ordered Reactivity and Targets - A New Paradigm for UI Development

Ahmad Wasfi — Sat, 14 Jun 2025 01:18:13 +0000

Introduction

Reactive methods, where one method runs automatically when another completes, whether synchronous or asynchronous, is a powerful idea. TargetJS introduces a distinctly innovative approach to this concept: it enables methods to react exclusively to their immediately preceding counterparts, fostering a declarative and simple code flow.

TargetJS also brings in a second key concept: it unifies both variables and methods into a new construct called “Targets”. Targets also provide state, loops, timing, and more, whether it's a variable or a function.

When these two ideas are combined: code-ordered reactivity and Targets, they unlock a fundamentally new way of coding that simplifies everything from animations and UI updates to API calls and state management. The result is code that is not only more intuitive to write but also significantly more compact.

Understanding TargetJS Syntax: Reactive Postfixes

TargetJS uses the postfixes $ and $$ appended to target names for defining reactive behaviors. While initially appearing a bit cryptic, this convention provides a compact syntax.

$ Postfix (Immediate Reactivity):

$$ Postfix (Full Completion Reactivity):

A target name ending with a double $$ (e.g., fetch$$) will activate only after its immediately preceding targets have fully and comprehensively completed all of their operations. This includes:

The successful resolution of any timed sequences, such as animations.
The completion and return of results from all associated API calls.
The finalization of all tasks, animations, and API calls initiated by any dependent child targets that were themselves triggered by a preceding target.

Targets: The Building Blocks of TargetJS

Targets provide a unified interface for both variables and methods. Each Target comes equipped with a built-in set of capabilities:

State Management: Targets are inherently stateful, enabling implicit state handling across your application.
Iterations: They can iterate towards defined values, making them perfect for creating animations.
Multiple or Conditional Execution: Targets can execute repeatedly or only under specific conditions.
Execution timing: Targets enable fine-grained control over when they execute.
Code-Ordered Execution: Targets execute sequentially and predictably in the order they are written within a JavaScript object, thanks to ES2015's guaranteed property order.

An All-in-One Solution

The elegance of TargetJS emerges when its two innovations: Reactivity and Targets, work in concert. The combination allows TargetJS to serve as a consistent, all-in-one solution for most front-end development needs:

Declarative UI Rendering: Define your user interface using Targets, and let TargetJS automatically manage rendering updates.
Animations: Leverage a target's built-in iteration, looping, and timing capabilities alongside reactivity to create complex animations with minimal effort.
API Integration: Execute API calls as targets and utilize their reactivity features to automatically process responses.
State Management: With targets inherently managing their own state, application state management becomes implicit.
Event Handling: Attach event listeners directly as targets to work consistently with the rest of the application

Examples in Action

To demonstrate the power and simplicity of TargetJS, let's explore its concepts through practical examples. We'll begin with a simple animation and incrementally expand it to demonstrate API integration, event handling, and dynamic UI updates.

Growing and Shrinking Box: Declarative Animation

import { App } from 'targetj';

App({
    background: 'mediumpurple',
    width: [{ list: [100, 250, 100] }, 50, 10], //  width animates through 100 → 250 → 100, over 50 steps with 10ms intervals.
    height$() { // `$` creates a reactive target: the `height` updates each time `width` executes
      return this.prevTargetValue / 2;
    } 
});

Explanation

Targets execute precisely in the order they are defined:

background: This target runs first, setting the element's background color to mediumpurple. Once the assignment is complete, its lifecycle ends.
width: Next, the width target takes over. It's configured to animate through a list of values (100, 250, 100), performing 50 steps with a 10ms pause between each step, creating a grow-then-shrink effect.
height$: Finally, the height$ target demonstrates TargetJS's reactivity. Because its name ends with a single $ postfix, height$ is explicitly declared to react whenever its immediately preceding target (width) executes on every step. As width animates and changes its value, height$ automatically re-runs, setting its value to half of width's value.

The example above can also be implemented directly in HTML, utilizing tg- attributes that mirror the object literal keys used in JavaScript:

<div
   tg-background="mediumpurple"
   tg-width="[{ list: [100, 250, 100] }, 50, 10]"
   tg-height$="return this.prevTargetValue / 2;">
</div>

Adding an API Call

Let's extend our previous example to demonstrate how TargetJS handles asynchronous operations. We'll fetch user details from an API, but we also want this API call to initiate only after the box animation has fully completed.

import { App } from 'targetj';

App({
  background: 'mediumpurple',
  width: [{ list: [100, 250, 100] }, 50, 10],
  height$() {
    return this.prevTargetValue / 2;
  },
  fetch$$: 'https://targetjs.io/api/randomUser?id=user0', // `$$` ensures this runs only after width and height animation is complete
  html$() { // it runs when the API response is resolved
    return this.prevTargetValue.name; // `prevTargetValue` holds the result from the previous target (i.e., the API response)
  }
});

Explanation

This example introduces two new targets:

fetch$$: fetch target is a specialized target designed to retrieve data when given a URL string. Since its name ends with a $$ postfix, as previously discussed, this indicates that fetch$$ will activate only after preceding targets fully completed all of its operations. This guarantees the API call is initiated just after the animation finishes.
html$: Following fetch$$, the html target is responsible for setting the text content of the div element to the fetched user's name. The $ postfix here signifies that html$ is a reactive target that executes each time its immediately preceding target (fetch$$) provides a result. In this context, this.prevTargetValue will hold the resolved data from the API call, allowing html$ to dynamically display the user's name as soon as it's available.

Together, these targets orchestrate the flow: animation completes, then the API call happens, then the UI updates with the fetched data, all managed declaratively and in code order.

Attaching a Click Handler

Let's expand our box further by adding a click handler. The goal is to change the box's background color to orange when clicked, pause for two seconds, and then revert the background back to its original mediumpurple.

import { App } from 'targetj';

App({
  background: 'mediumpurple',
  width: [{ list: [100, 250, 100] }, 50, 10],
  height$() {
    return this.prevTargetValue / 2;
  },
  fetch$$: 'https://targetjs.io/api/randomUser?id=user0',
  html$() {
    return this.prevTargetValue.name;
  },
  onClick() { // Special target that runs when the element is clicked
    this.setTarget('background', 'orange', 30, 10); // Animates background to orange over 30 steps
  },
  pause$$: { interval: 2000 }, // `$$` ensures this runs ONLY after the preceding 'onClick' animation is fully complete
  purpleAgain$$() { // `$$` ensures this runs ONLY after `pause$$` completes (2-second interval)
    this.setTarget('background', 'mediumpurple', 30, 10); // Animates background back to mediumpurple
  }
});

Explanation:

onClick: This is a special TargetJS function that automatically runs whenever the associated element is clicked. Inside, this.setTarget('background', 'orange', 30, 10) imperatively triggers a new animation, changing the background color to orange over 30 steps.
pause$$: Notice the $$ postfix. This pause$$ target is configured with an interval of 2000 milliseconds (2 seconds). Crucially, its $$ postfix means it will only begin its 2-second pause after its immediately preceding target (onClick) has fully completed its animation of changing the background to orange.
purpleAgain$$: Also ending with $$, this target executes only after the pause$$ target has finished its 2-second execution. It then uses this.setTarget again to animate the background color back to mediumpurple.

This sequence demonstrates how TargetJS allows you to define complex, timed flow with a guaranteeing execution order.

Let's Make it More Complicated :)

Let’s expand the previous example by creating 10 boxes instead of just one. Each box will be added with a slight delay and undergo its own task from the previous example. Once all these individual box processes (creation, animation, and API calls) are complete, we'll trigger a final collective action: changing all their backgrounds to green.

import { App } from 'targetj';

App({
  children: { // A special target that generates a new list of child objects each time it executes
    cycles: 9, // Creates 10 children (from cycle 0 to 9)
    interval: 100, // Adds a new child every 100 milliseconds
    value(cycle) { 
      return {
        background: 'mediumpurple',
        width: [{ list: [100, 250, 100] }, 50, 10],
        height$() { return this.prevTargetValue / 2; },
        fetch$$: `https://targetjs.io/api/randomUser?id=user${cycle}`, // Each child fetches a unique user
        html$() { return this.prevTargetValue.name; },
        onClick() { this.setTarget('background', 'orange', 30, 10); },
        pause$$: { interval: 2000 },
        purpleAgain$$() { this.setTarget('background', 'mediumpurple', 30, 10); }
      };
    }
  },
  greenify$$() { // `$$` ensures this runs ONLY after ALL children have completed ALL their tasks
    this.getChildren().forEach(child => child.setTarget("background", "green", 30, 10)); // Iterates and animates each child's background
  }
});

Explanation:

This advanced example demonstrates TargetJS's capability to manage complex, dynamic UI scenarios:

children: A special target construct used to create a collection of child objects. Each time it executes, the returned object or objects are added to the current one. The cycles property specifies that the value function will run 10 times (from cycle 0 to 9), thus creating 10 individual box elements.
The interval property ensures that each new box is created and added to the UI every 100 milliseconds.
The value(cycle) function return the same object element from the previous example.
greenify$$: This target demonstrates the $$ postfix's full completion reactivity at a higher level. The greenify$$ target will execute only after the entire children target has comprehensively completed all of its work. This includes:

The creation of all 10 child boxes.
The completion of each individual child's width animation.
The successful return of all 10 API calls (fetch) for each child.
The population of all user names (html) for each child.

Only when all tasks initiated by children are finished will greenify$$ runs. It then uses this.getChildren().forEach(child => child.setTarget("background", "green", 30, 10)) to iterate over all the created child boxes and animate their backgrounds to green.

What if greenify ends with only one $?

If greenify ended with only one $ (i.e., greenify$), it would exhibit immediate reactivity to its preceding target children. Instead of waiting for all 10 children to be fully animated, etc, greenify$ would run immediately each time a new child is added.

This example highlights TargetJS's ability to orchestrate complex, dependent operations across multiple elements in a compact, declarative, and code-ordered fashion.

Ready to learn more?

🔗 Visit: GitHub Repo

TargetJS: Unifying UI Dev – Animations, State, APIs

Ahmad Wasfi — Sun, 25 May 2025 02:02:00 +0000

TargetJS offers a fresh approach to UI development: a single, unifying, and consistent method for handling animations, state management, APIs, and event handling.

We've designed TargetJS around a few core ideas:

Variables and methods are unified via an internal wrapper called "targets."
Targets execute sequentially and predictably in the order they are written leveraging ES2015's guaranteed property order.
Reactive pipelines are enabled between adjacent targets.
Lifecycles are added to targets enabling them to behave like living, responsive cells.

Here's a quick example of a growing and shrinking box:

import { App } from "targetj";

App({
    background: "purple",
    // width animates through 50 → 100 → 50, over 50 steps, 10ms interval
    width: [{ list: [50, 100, 50] }, 50, 10], 
    // `$` creates a reactive pipeline: the `height` updates each
    // time `width` executes
    _height$() { 
      return this.prevTargetValue / 2;
    } 
});

Here's what's happening.

Targets run initially in the order they appear in the code, so background runs first, followed by width. The _ prefix indicates that a target is inactive by default, meaning height does not run initially.
background sets the background to purple, and its lifecycle ends.
Then, width animates from 50 → 100 → 50px, in 50 steps with 10ms pauses.
height follows width and scales dynamically with its value. The $ postfix creates a reactive pipeline where the target is triggered each time the preceding target runs. prevTargetValue refers to the previous target's value, which in this case is width.

We can also implement the growing box directly in an HTML element using tg- attributes that mirror object literal keys:

<div
   tg-background="purple"
   tg-width="[{ list: [50, 100, 50] }, 50, 10]"
   tg-_height$="return this.prevTargetValue / 2;">
</div>

API Call Example

In this example, we demonstrate how to integrate with an API: we'll load one user and display their name.

import { App } from "targetj";

App({
  fetch: "https://targetjs.io/api/randomUser?id=user0",
  _html$() {
    return this.prevTargetValue.name;
  }
});

Or in HTML:

<div
   tg-fetch="https://targetjs.io/api/randomUser?id=user0"
   tg-_html$="return this.prevTargetValue.name;">
</div>

Here's what's happening.

fetch is a special target that performs a data fetch when given a URL string.
html sets the text content of the div to the user's name. Since the target name is prefixed with _ and ends with $, it executes only when an API call returns a result.
prevTargetValue refers to the result of the previous target, which, in this case, is the result of the API call.

Click Counter Example

In this example, we demonstrate a click counter, which is commonly used as the ‘Hello World’ example in front-end frameworks.

import { App } from "targetj";

App({
    onClick() {},
    _html$: {
        initialValue: 0,
        value() { return this.value + 1; }
    }
});

Or in HTML:

<div
 tg-onClick=""
 tg-_html$="{
   initialValue: 0,
   value() { return this.value + 1; }
 }">
</div>

Here’s what’s happening.

The onClick target is a special function that runs whenever the <div> element is clicked.
Since the html is prefixed with _ and ends with $, it executes every time onClick runs.
It is also possible to implement the counter update directly within the onClick target, but we wanted to demonstrate the reactive feature between adjacent targets.

Installation

Via CDN
No installation is necessary. Just add the following <script> tag to your HTML to load TargetJS from a CDN (only 44KB compressed):

<script src="https://ltstaticfiles.s3.us-east-1.amazonaws.com/targetjs.js"></script>

This will add TargetJS to the global window object, making it accessible throughout your JavaScript such as TargetJS.app(YourApp).

Via package manager
You can install also TargetJS via npm (note: there’s no “s” at the end):

npm install targetj

Ready to see to learn more?

🔗 Visit: GitHub Repo
🔗 Site: targetjs.io

TargetJS: Rethinking UI with Declarative, Synchronous Pipelines

Ahmad Wasfi — Thu, 03 Apr 2025 17:46:35 +0000

Introduction

Explore TargetJS and contribute on GitHub.

I have always been drawn to the JavaScript literal object. It is expressive, compact, and readable, if only there was a way to execute it. But JavaScript didn’t guarantee property order for a long time, until ES2015, which finally made the order predictable. It also introduced the shorter method syntax. This made the object literal more powerful and even more compact.

This inspired the core idea behind TargetJS:

Provide an internal wrapper (called "targets") for both properties and methods of the literal object.
Execute the targets sequentially in the same order as the code is written, using the framework's execution cycle.
Enable a functional pipeline between adjacent targets.
Add lifecycles, looping, and timing to targets so they can execute or re-execute themselves when a condition or time is met. This also makes the functional pipeline even more powerful as we will see later.

That's the basic idea.

As a byproduct of uniformly treating properties and methods with lifecycles and states, state management becomes straightforward and implicit in the framework.

To make the framework suitable for front-end development, TargetJS allows CSS styles to be integrated into the same object as targets especially since CSS styles closely resemble JavaScript object literals. To enhance style property utility, we added value iteration, so we can animate styles easily.

In the following section, we explain how targets work and then demonstrate how they provide a unified solution for UI rendering, event handling, and API interactions.

Understanding Targets With Basic examples

At the heart of TargetJS lies the concept of "Targets." As mentioned in the introduction, Targets provide a unified wrapper for both properties and methods of JavaScript literal objects. This wrapping process is handled implicitly by the TargetJS engine. The framework's execution cycle run the active targets initially based on the order in which they're written. The execution cycle also ensures that the execution is synchronous.

Ok, let's start with a simple example:

import { App } from "targetj";

App({
    background: "purple",
    width: 50,
    height: 50
});

This code renders a 50px purple square. All properties become targets but there is one static value for each so the target lifecycles end, and nothing happens afterward.

The object by default will create a div element but can create any other element by implementing the special target baseElement. While a literal object can represent an HTML block, it is best used to represent a single HTML element. This creates an enhanced HTML element that is highly extensible and flexible for handling any logic.

In the next example, we animate the width from 50px to 100px and back to 50px, using 50 steps with 10ms pauses. The _ prefix on the height target indicates it's initially inactive and not ready for execution. The $ postfix creates a functional pipeline, activating the height target when the preceding width target executes. This causes the height to dynamically scale with the width's value. prevTargetValue refers to the previous target's value, which, in this case, is the width.

import { App } from "targetj";

App({
    background: "purple",
    width: [{ list: [50, 100, 50] }, 50, 10], // Target values, steps, interval
    _height$() { // activated when width executes
        return this.prevTargetValue;
    } 
});

UI Rendering and Animation Example

This example builds upon the previous square animation. We create 10 animated squares. We then transition their background from purple to orange.

First, we generate 10 squares. We also want to create one square every 100ms:

import { App } from "targetj";

App({
  children: {
    cycles: 9,
    interval: 100,
    value: {
      background: "purple",
      width: [{ list: [50, 100, 50] }, 50, 10],
      _height$() {
        return this.prevTargetValue;
      }
    }
  }
});

The children target is a special type of target that adds new items each time it executes. cycles: 9 specifies 10 total cycles (0-9), executed every 100ms, as defined by interval.

To transition the background after the square animations, we add another target with the postfix $$, creating a functional pipeline.

import { App } from "targetj";

App({
  width: 1000,
  children: {
    cycles: 9,
    interval: 100,
    value: {
      background: "purple",
      width: [{ list: [50, 100, 50] }, 50, 10],
      _height$() {
        return this.prevTargetValue;
      }
    }
  },
  _changeBackround$$() {
    this.getChildren().forEach((child) =>
      child.setTarget("background", "orange", 100, 10)
    );
  }
});

The $$ postfix ensures that the changeBackround target executes only after the children target completes, including all of its children and their respective targets. This guarantees the background transition occurs after all squares are created and their animations finish.

Event Handling Example

This example adds click event handling to the squares, resetting their width animation on each click. onClick is another specialized target that activates in response to click events.

import { App } from "targetj";

App({
  width: 1000,
  children: {
    cycles: 9,
    interval: 100,
    value: {
      background: "purple",
      width: [{ list: [50, 100, 50] }, 50, 10],
      _height$() {
        return this.prevTargetValue;
      },
      onClick() {
        this.activateTarget("width");
      }
    }
  },
  _changeBackround$$() {
    this.getChildren().forEach(child =>
      child.setTarget("background", "orange", 100, 10)
    );
  }
});

API Call Example

This example demonstrates integrating API calls into the square animation. We have added two new targets: loadSquare to fetch data, and populate to display the result. As the populate target ends with $, it executes after the API completes. prevTargetValue refers to the API's response.

Note that the changeBackround target will not execute until the API result is available and all other targets have completed.

import { App, fetch } from "targetj";

App({
    width: 1000,
    children: {
        cycles: 9,
        interval: 100,
        value: {
            id: "square",
            background: "purple",
            width: [{list: [50, 100, 50]}, 50, 10],
            _height$() {
                return this.prevTargetValue;
            },
            loadSquare() {
                fetch(this, "https://targetjs.io/api/randomUser", {id: this.oid});
            },
            _populate$() {
                this.setTarget("html", this.prevTargetValue.name);
            }
        }
    },
    _changeBackround$$() {
        this.getChildren().forEach(child => child.setTarget("background", "orange", 100, 10));
    }
});

Try TargetJS Today!

TargetJS is an evolving framework. We invite you to explore its potential and contribute to its development.

🔗 Visit: GitHub Repo
🔗 Site: targetjs.io

TargetJS: A New Paradigm in Front-End Development

Ahmad Wasfi — Tue, 25 Feb 2025 02:05:21 +0000

Introduction

Modern front-end development has been dominated by reactive frameworks like React, Vue, Angular, and Svelte. While these frameworks have significantly improved UI development, they come with their own set of challenges: complex asynchronous operations, scattered state management, excessive boilerplate, and unpredictable execution flow.

TargetJS introduces a new computational paradigm centered around targets, which function as enhanced variables and methods with lifecycles. It provides a unified approach to UI rendering, state management, animations, API interactions, and event handling.

What Problems Does TargetJS Solve?

Complexity of Asynchronous Operations: Traditional JavaScript often involves complex handling of asynchronous operations (Promises, callbacks, async/await). TargetJS addresses this by providing a structured, synchronous, and predictable execution flow, allowing developers to avoid asynchronous operations altogether.
Scattered State Management: Many frameworks require separate libraries or complex patterns for state management. In TargetJS, state management is inherently handled through its core concept of Targets, eliminating the need for direct state management.
Boilerplate and Verbosity: TargetJS aims to reduce boilerplate code. The code is compact and follows a predictable execution flow.
Rigid Static Layer of HTML: Many frameworks use HTML as the primary medium for generating the user interface. TargetJS minimizes reliance on traditional HTML and CSS, allowing JavaScript to be the primary player, resulting in a better and more dynamic user experience.
Disjointed Development Workflow: Developers often juggle multiple tools and concepts (UI libraries, animation libraries, state managers, event handlers). TargetJS provides a unified solution, simplifying the learning curve and development process.
Difficult Animation Control: TargetJS makes animations first-class citizens. Targets can iterate step-by-step towards new values and manage execution flow by time. This provides fine-grained control over animations without external libraries.
Complicated execution flow: other frameworks are based on reactive model which often lead to unpredictable execution flow while TargetJS execution is based on the order targets are written.
Performance Bottlenecks with Large Lists: TargetJS optimizes rendering for large lists by using a tree structure that renders only the visible branches.

How TargetJS Works

Targets: The Core Building Blocks
Targets in TargetJS function as enhanced variables and methods with built-in lifecycle management. They can:
- Automatically iterate towards values (useful for animations and transitions).
- Execute conditionally based on previous targets.
- Self-activate when dependencies change.
- Form a controlled execution pipeline.
- Manage their own state.
Unified Execution Model
Targets handle UI updates, API calls, animations, state, and events, reducing the need to learn and integrate multiple libraries.
Unique Computational Paradigm
TargetJS introduces a novel computational model by integrating multiple paradigms: Turing Completeness, the Von Neumann Execution Model, and Functional Programming. This results in:
- Deterministic Execution Flow: Targets execute based on their activation order, initially following their order in the code.
- Powerful Functional Pipeline: Targets can be structured as a functional pipeline with enhanced capabilities.

Examples

Quick Example: A Growing & Shrinking Box

import { App, TModel } from "targetj";

App(new TModel({
    background: "#B388FF",
    width: [{ list: [100, 250, 100] }, 50, 10], // Animates width
    _height$() { return this.prevTargetValue / 2; }, // Triggered by width changes
    _scale$() { return this.prevTargetValue / 50; }, // Triggered by height changes
    onSwipe() { 
      this.setTarget({ x: getEvents().swipeX(this), y: getEvents().swipeY(this) });
    } 
}));

💡 What's happening here?

width animates from 100 → 250 → 100px, in 50 steps with 10ms pauses.
height scales dynamically with width. The _ prefix indicates that the target is inactive. The $ postfix means it is activated each time the width executes. this.prevTargetValue refers to the previous target's value, which in this case is the width.
scale adjusts based on height
onSwipe: Updates the div position based on swipe gestures.
All logic is in JavaScript—no external CSS required and minimal HTML involvement!

🔥 Loading Example: Fetching User Data

import { App, TModel, getLoader } from "targetj";

App(new TModel("quickLoad", {
    loadUsers() {
        getLoader().fetch(this, "https://targetjs.io/api/randomUser", {id: "user0"});
        getLoader().fetch(this, "https://targetjs.io/api/randomUser", {id: "user1"});
    },
    _children$() {
        return new TModel("user", {
            html: this.prevTargetValue.name,
            background: "#B388FF",
            width$: [{list: [100, 250, 100]}, 50, 10],
            height$() {
                return this.prevTargetValue / 2;
            },
            onSwipe() {
                this.setTarget({x: getEvents().swipeX(this), y: getEvents().swipeY(this)});
            }
        });
    }
}));

Here, the children target is only activated after the user0 API call completes, ensuring ordered API execution.

💡 What's happening here?

children: Since the target name ends with $, it executes each time an API call returns a result. TargetJS ensures that API results are ordered in the same sequence as the API execution. For example, if the user1 API result arrives before user0, the children target will not execute. It will only run once the result for user0 has been received.
html: Sets the text content of the div with the user's name. prevTargetValue refers to the result of the API call.

The execution pipeline then continues as in the previous example.

Getting Started

Installing TargetJS using npm:

npm install targetj

(Note: There is no 's' at the end of targetj)

Try TargetJS Today!

TargetJS offers a powerful alternative to traditional reactive frameworks by simplifying execution flow, reducing complexity, and optimizing performance.

🔗 Visit: GitHub Repo
🔗 Site: targetjs.io

Building a Single-Page App with a New Paradigm Using TargetJ

Ahmad Wasfi — Thu, 24 Oct 2024 22:53:42 +0000

React has become one of the most popular frameworks for building user interfaces. A typical React application looks like this:

React Application (App.js)

import React, { useState } from 'react';
import './App.css';

function App() {
  // State to hold the message
  const [message, setMessage] = useState('Welcome to My Simple React App');

  // Function to update the message
  const handleClick = () => {
    setMessage('Hello! You clicked the button.');
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>{message}</h1>
        <button onClick={handleClick}>Click Me!</button>
      </header>
    </div>
  );
}

export default App;

Styling with CSS (App.css)

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

button {
  font-size: 1.2em;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #61dafb;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
}

button:hover {
  background-color: #21a1f1;
}

The issue with this approach is that React doesn't provide a unified way to manage state, handle presentation, manage events, make API calls, or handle animations. Additionally, controlling program flow with time is challenging. Moreover, the HTML tree and CSS introduce an extra intermediary layer that is inherently static, making it difficult to control affecting design flexibility.

TargetJ is a new JavaScript framework that introduces a new paradigm for programming single-page sites, addressing all the issues mentioned above. It is open-source, and you can find it at https://github.com/livetrails/targetj. The core concept of the framework is that it gives life cycles to methods and variable assignments, allowing them to operate autonomously, much like living cells.

This is achieved by providing a unified interface wrapper for both methods and variable assignments, forming new constructs called targets. The interface wrapper doesn't necessarily add extra code, as targets can also be written as methods or variable assignments. Targets can also be written as objects, which is the most expressive format, allowing them to have callbacks to adjust to external changes.

In other words, targets are the fundamental building blocks of components. Every component in TargetJ is composed of a set of targets.

A brief explanation of what targets consist of will help in understanding how TargetJ works. Each target has the following:

1. Target Value and Actual Value
The target value is the value assigned to a variable or the result produced by a method, while the actual value is the one used by the rest of the application. When the target value differs from the actual value, TargetJ updates the actual value iteratively until it matches the target value. This process is controlled by two additional variables: Step, which defines the number of iterations, and Interval, which specifies the duration (in milliseconds) the system waits before executing each iteration.

2. State
Targets have four states that control their lifecycle: Active, Inactive, Updating, and Complete.

Active: This is the default state for all targets. It indicates that the target is ready to be executed, meaning the target value needs to be initialized from the variable it represents, or its value() method needs to be executed to calculate its output.
Inactive: Indicates that the target is not ready to be executed.
Updating: Indicates that the actual value is being adjusted to match the target value.
Complete: Indicates that the target execution is finished, and the actual value has successfully matched the target value.

3. Target Methods
All methods are optional. They are used to control the lifecycle of targets or serve as callbacks to reflect changes.

Controlling methods: enabledOn, loop, steps, cycles.
Callbacks: onValueChange, onStepsEnd, onImperativeStep, onImperativeEnd, onSuccess, onError.

TargetJ Solution

Let’s see how TargetJ tackles the issues mentioned earlier.

1. Handling presentation

Let’s start with the button as we work progressively to implement the React example above, allowing us to illustrate each issue more clearly.

In the example below, you can see that the HTML elements, styles, and attributes are all written as targets, each capable of operating independently. For instance, the background target has three values and will continuously morph between them over 50 steps. HTML nesting can also be dynamically changed by targets. This is achieved by declaring the domParent target from the element seeking a container or the domHolder target, declared by containers for elements without a domParent. In our example, the button has no domParent, so it will be nested in the application root, supporting a flat HTML structure.

You can view a live example here: https://targetj.io/examples/articlePresentation.html.

TargetJ Application (articlePresentation.js)

App(new TModel({
    width: 100,
    height: 100,
    fontSize: '1.2em',
    lineHeight: 100,
    cursor: 'pointer',
    border: 'none',
    borderRadius: 5,
    html: 'Click me',
    topMargin: 20,
    x() { return this.getCenterX(); },                      
    background: {
        loop: true,
        value() {
            return { list: [ '#21a1f1', '#61dafb' ] };
        },
        steps: 30
    }
}));

2. Animation

In the next example, we add four sets of animation moves to our button by creating a new target called animate. We iterate through the array of moves using cycle, which only updates once all the moves in a set are completed. The setTarget defines an imperative target within the declarative target of animate. The onImperativeEnd callback is triggered when the actual value reaches the target value of each style attribute.

We also added a baseElement target, which alternates between <img> and <button> every second. The focus here is not on presentation, but rather to illustrate how HTML can be seen in a new light, reducing the design constraints typically imposed by it.

You can view a live example here: https://targetj.io/examples/articleAnimation.html.

TargetJ Application (articleAnimation.js)

App(new TModel({
    width: 100,
    height: 100,
    src: 'https://targetj.io/img/structure.jpg',
    fontSize: '1.2em',
    lineHeight: 100,
    cursor: 'pointer',
    border: 'none',
    borderRadius: 5,
    html: 'Click me',
    topMargin: 20,
    x() { return this.getCenterX(); },           
    baseElement: {
        loop: true,
        cycles: 1,
        interval: 1000,
        value(cycle) { return ['img', 'button' ][cycle]; }
    },            
    background: {
        loop: true,
        value() { return { list: [ '#21a1f1', '#61dafb' ] }; },
        steps: 30
    },
    animate: {
        cycles: 3,
        value(cycle) {
            return [
                { rotate: 0, scale: 1, background: 'blue', borderRadius: 0 },
                { rotate: 180, scale: 1.5, background: 'red', borderRadius: 75 },
                { rotate: 360, scale: 2, background: 'yellow', borderRadius: 50 },
                { rotate: 0, scale: 1, background: '#61dafb', borderRadius: 5  }
            ][cycle];
        },
        onValueChange(value) {
            this.setTarget("coolAnimation", value, 50); 
        },
        onImperativeEnd(key) {
            if (key === 'background' && this.getTargetCycle(this.key) === 3) {
                this.resetImperative(key);
            }
        }
    }      
}));

3. Handling events

In this example, we added three targets to handle three events: click, mouseenter, and mouseleave. The target events onClickEvent, onEnterEvent, and onLeaveEvent are special targets that the TargetJ task will call when the corresponding events are triggered. These targets can either activate other targets or handle the events directly as methods.

We also added a special target called canHandleEvents, which specifies that the button can handle touch events. Since canHandleEvents is a target, it can also be activated by other events, enabling or disabling touch event handling based on certain conditions.

Notice that the shake target has the active flag set to false. This indicates that the target will not be executed until it is activated by other targets.

You can view a live example here: https://targetj.io/examples/articleEvents.html.

TargetJ Application (articleEvents.js)

import { App, TModel, Easing } from "targetj";

App(new TModel({
    canHandleEvents: 'touch',
    width: 100,
    height: 100,
    fontSize: '1.2em',
    lineHeight: 100,
    cursor: 'pointer',
    border: 'none',
    textAlign: 'center',
    borderRadius: 5,
    html: 'Click me',
    background: '#61dafb',
    topMargin: 20,
    x() { return this.getCenterX(); },    
    shake: {
        active: false,
        cycles: 3,
        value(cycle) {
            const x = this.getX();
            this.setTarget('x', { list: [ x - 20, x, x + 20, x ] }, 10 - 2 * cycle, 0, Easing.inOut);
        }
    },
    onClickEvent: 'shake',
    onEnterEvent() { this.setTarget('background', '#21a1f1'); },
    onLeaveEvent() { this.setTarget('background', '#61dafb'); },     
}));

4. Calling API

In the example below, we define a target named load. Inside the value function, we make an API call using fetch(). The second argument specifies the API URL, and the third argument contains the query parameters passed to the API. A fourth optional parameter, omitted in this example, can specify a cache ID if we want to cache the result. This cache ID can also be used to retrieve the cached data. If it’s not specified, the result will always come from the API.

Once the API response is received, it triggers either onSuccess or onError, depending on the outcome.

You can view a live example here: https://targetj.io/examples/articleAPI.html.

TargetJ Application (articleAPI.js)

import { App, TModel, getLoader } from "targetj";

App(new TModel({
    canHandleEvents: 'touch',
    width: 100,
    height: 100,
    fontSize: '1.2em',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',    
    cursor: 'pointer',
    border: 'none',
    borderRadius: 5,
    html: 'Click me',
    background: '#61dafb',
    topMargin: 20,
    x() { return this.getCenterX(); }, 
    load: {
        active: false,
        value() {
            return getLoader().fetch(this, 'https://targetj.io/api/randomUser', { id: 'user0' });  
        },
        onSuccess(res) {   
            this.setTarget('html', `My name is ${res.result.name}`);                     
        },
        onError() {
            this.setTarget('html', 'Click again!');
        }
    },    
    onClickEvent: 'load',
    onEnterEvent() { this.setTarget('background', '#21a1f1'); },
    onLeaveEvent() { this.setTarget('background', '#61dafb'); }    
}));

5. State Management

Each target manages its own state. Targets can be activated by certain events, such as user actions or when the page is closed, allowing them to refresh their states. TargetJ tasks execute all targets in the order they appear, from top to bottom. For more complex cases, enabledOn() can keep a target active until the condition defined within enabledOn() is met.

The getPager() function in TargetJ, used for switching between pages, maintains a cache of each page. Similarly, the getLoader(), as we saw above, can cache results to be used across different parts of the application.

6. Controlling the execution flow with time

TargetJ was designed from the ground up to handle complicated and intricate sequences. Here is a brief explanation of what it provides: Each target has an interval property, which can also be implemented as a method. The interval controls the execution rate of the value() of the target. The execution rate for each step, which updates the actual value to match the target value, can also be configured. Imperative targets can define their own interval as well. The onImperativeStep and onImperativeEnd callbacks allow you to listen for each step update or when all steps of the imperative targets are completed.

Here is the full implementation of the React example mentioned earlier, with the following added to demonstrate TargetJ’s ability to control different parts of the application over time:

Display the message first, then add the button after 1 second.
Scale the button and revert back after 1 second from showing it.

You can view a live example here: https://targetj.io/examples/articleTime.html.

TargetJ Application (articleTime.js)

import { App, TModel, getEvents } from "targetj";

App(new TModel({
    title() {
        return new TModel({
            topMargin: 20,
            html: 'Welcome to My Simple TargetJ App',
            x() { return this.getCenterX(); }
        });
    },
    button() {
        return new TModel({
            canHandleEvents: 'touch',
            fontSize: '1.2em',
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            borderRadius: '5px',
            html: 'Click me',
            topMargin: 20,
            scale: {
                cycles: 1,
                interval: 1000,
                value(cycle) {
                    return [ 1, [ { list: [ 1, 2, 1 ] }, 30, 0 ] ][cycle];
                }
            },
            background() { return getEvents().isTouchHandler(this) ? '#21a1f1' : '#61dafb'; },            
            x() { return this.getCenterX(); },
            onClickEvent() { this.getParentValue('title').setTarget('html', 'Hello! You clicked the button.'); },
            onEnterEvent: 'background',
            onLeaveEvent: 'background'
        });
    },
    children: {
       cycles: 1,
       interval: 1000,
       value(cycle) {
           return [ this.val('title'), this.val('button') ][cycle];
       }
    }
}));

Conclusion

We believe TargetJ offers a fluid and flexible medium that enables a new kind of user experience that was previously difficult to achieve. It also simplifies development significantly, making it more enjoyable without sacrificing performance. You can find the framework at https://github.com/livetrails/targetj and explore its interactive documentation at www.targetj.io.

Introducing TargetJ: Javascript framework that can animate anything

Ahmad Wasfi — Thu, 11 Jul 2024 08:08:37 +0000

Welcome to TargetJ, a powerful JavaScript framework designed to make building dynamic and responsive web applications easier and more efficient. TargetJ distinguishes itself by introducing a novel concept known as 'targets', which forms its core. Targets are used as the main building blocks of components instead of direct variables and methods. Each component in TargetJ is a set of targets. They are used to animate, control program flow, handle user events, load data from external APIs, and more. For more details and examples, please visit www.targetj.io.

Key Features

No HTML Required

One of the principles of TargetJ is to employ a flat page design where HTML nesting is kept to a minimum. Consequently, HTML tags are seldom necessary except for images. In cases where nesting is necessary, it's handled dynamically and can be altered at runtime, unlike the static nesting in HTML.

No HTML Nesting

HTML nesting is seldom required in TargetJ. If it is needed, nesting is done at runtime. Elements can be dynamically detached and incorporated into other elements, facilitating the easy reuse of components regardless of their location or attachment. For instance, the same login button can be attached to the toolbar or placed in the middle of the page.

Next-Level Animation

TargetJ was built from scratch to orchestrate intricate animations involving numerous objects with complex sequences. Users can program objects to move at varying speeds, pause at certain intervals, and repeat sequences based on various conditions. It allows the creation of captivating animations, resulting in rich and engaging user experiences.

Handle 100,000s of Items

TargetJ efficiently manages large collections of objects on a single page. This is achieved through its advanced data structure and optimization algorithm. It divides a long list into a tree structure, monitoring only the branches that are visible to the user at any given time. Infinite scrolling and infinite zooming on our examples page demonstrate how it handles dynamically expanding lists of objects.

Control the Flow of Execution with Time

TargetJ simplifies the execution of various program segments at specific times, making it easy to sequence or parallelize numerous actions. This functionality supports the development of applications that are efficient and responsive, capable of managing complex operations, enhancing user experiences, and optimizing resource utilization.

Handle Events Effortlessly

In TargetJ, events are triggered synchronously and are designed so that any component can detect when an event occurs. Event handling can be simply implemented as conditions in the enabling functions of 'targets.' This ensures that managing events is both simple and effective.

Easy to Learn

TargetJ simplifies development by employing the concept of 'targets' across all aspects of the program. These targets are used in animations, controlling program flow, integrating APIs, and more. This unified approach means that one core concept is applied throughout the program, making TargetJ easy to learn.

Getting Started

Installation

To install TargetJ, run the following command in your terminal:

npm install targetj

Quick Example

import { App, TModel } from 'targetj';

App(new TModel({
    style: { backgroundColor: '#fff' },
    width: {
        value: 250,        
        steps: 30,
        stepInterval: 50
    },
    height: {
        value: 250,        
        steps: 30,
        stepInterval: 50
    },
    opacity: {
        value: 0.15,        
        steps: 30,
        stepInterval: 50
    }
 }));

It can also be written in a more compact form using arrays:

import { App, TModel } from 'targetj';

App(new TModel({
    style: { backgroundColor: '#fff' },
    width: [ 250, 30, 50],
    height: [ 250, 30, 50],
    opacity: [ 0.15, 30, 50]
 }));

In the example above, we incrementally increase the value of width, height, and opacity in 30 steps, with a 50-milliseconds pause between each step. To see this example live, please visit https://targetj.io/docs/overview.html.

Explore the full potential of TargetJ and transform the way you build web applications. Dive into our documentation and examples at www.targetj.io and start creating amazing web experiences today!

If you have any questions about the TargetJ framework, please leave them in the comments below. I'm excited to hear your thoughts.