DEV Community: TargetJS

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):

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. 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

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.