Introducing TargetJ: Javascript framework that can animate anything

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.