TargetJS: A New Paradigm in Front-End Development

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?

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

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

3. Boilerplate and Verbosity: TargetJS aims to reduce boilerplate code. The code is compact and follows a predictable execution flow.

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

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

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

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

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

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

2. Unified Execution Model
   Targets handle UI updates, API calls, animations, state, and events, reducing the need to learn and integrate multiple libraries.

3. 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) });
    } 
}));

GIF

💡 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)});
            }
        });
    }
}));

GIF

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