TargetJS: Unifying UI Dev – Animations, State, APIs

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:

Here’s what’s happening.

• Targets run initially in the order they appear in the code, so backgroundruns first, followed by width. The _ prefix indicates that a target is inactive by default, meaning heightdoes 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-that mirror object literal keys:

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

Or in HTML:

Here’s what’s happening.

• fetchis a special target that performs a data fetch when given a URL string.
  - htmlsets 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.
  - prevTargetValuerefers to the result of the previous target, which in this case, is the result of the API call.

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

Or in HTML:

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.

Via CDN

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

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

Ready to see to learn more?

🔗 Visit: [GitHub Repo]
🔗 Site: [targetjs.io]