TargetJS: Documentation

1. Quick start

TargetJS is a modern JavaScript UI framework that simplifies front-end development by introducing two new key concepts: unifying methods and variables, and reactive methods. It provides a unified solution for key aspects like UI rendering, animations, APIs, state management, and event handling. This integrated approach leads to more compact code and allows for a stronger focus on user experience.

Key Innovations and Concepts

- Unifying Methods and Variables with Targets: A new construct called “targets” combines methods and variables, providing state, iteration, and timing mechanisms for both.

- Declarative Reactive Targets: Targets can explicitly declare execution when adjacent preceding targets, whether synchronous or asynchronous, run or complete.

- All-in-One Solution: Offers a unified approach to UI rendering, API integration, state management, event handling, and animation.

- Code-Ordered Execution: The execution flow generally follows the order in which the code is written.

- Flexible Integration: Can be used as a full-featured framework or as a lightweight library alongside other frameworks.

Installation

You can find TargetJS on Github, where all the latest updates and contributions are available:

GitHub Repo

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

npm install targetj

To start using TargetJS in your project, import the necessary components into your file. Below is an example of what you'll need in the main file that starts the application:

import { App, getEvents } from 'targetj';

This line imports the main components required: App and getEvents. The import line is omitted from all our examples because the components are already imported with the page.

Or in HTML (no JavaScript required), using tg- attributes that mirror object literal keys:

    <div
      tg-color="#fff"
      tg-html="Drag me"
      tg-textAlign="center"
      tg-preventDefault="true"
      tg-moves="[
      { scale: 1, width: 200, height: 200, lineHeight: 200, background: 'blue', borderRadius: 0 },
      { scale: 1, width: 150, height: 150, lineHeight: 150, background: 'red', borderRadius: 75 },
      { scale: 1, width: 100, height: 100, lineHeight: 100, background: 'orange', borderRadius: 50 }
    ]"
      tg-animate="{
      cycles: 2,
      interval: 40,
      value(cycle) {
        const move = this.prevTargetValue[cycle];
        this.setTarget(move, 30);
      },
      enabledOn() {
        return TargetJS.getEvents().getTouchCount() === 0;
      }
    }"
      tg-pause$$="{ interval: 1000 }"
      tg-repeat$$="function() { this.activateTarget('animate'); }"
      tg-onSwipe="this.setTarget({ x: TargetJS.getEvents().swipeX(this), y: TargetJS.getEvents().swipeY(this) })"
    ></div>