ahmadwasfi

Yes, there have been significant improvements since the Show HN post. I put in another seven months of development and refinement.

I have spent over two years figuring out how to solve asynchronous operations in front-end development and provide a unified solution for UI, API loading, animations, state management, and so on. I discovered that it is possible by enhancing the core building blocks which are functions and variables and giving them lifecycles. The result is targets, which also provide unified interface for functions and variables making them equal citizens. Here is an updated version of the framework, available at https://github.com/livetrails/targetjs.

One unified approach for all operations: events handling, API handling, presentation, animation, and more. It is done by providing methods and variable assignment with lifecycles that give them states and the ability to operate autonomously mimicking the behavior of living cells.

Thank you again for the great suggestion! I’ve reflected on it and decided to work on integrating the Web Animations API. Users will be able to choose between using the Web Animations API or more direct DOM manipulation at runtime, selecting their preference in the target itself. Thanks again for the feedback.

Thanks for letting me know. I plan to use the Web Animation API to improve performance. Thanks again for your feedback—it was really helpful.

Thank you for the feedback. I appreciate you pointing that out. I will rewrite part of the code as I agree with you that it is lacking. Thanks again for your input. It was really helpful.

Thank you! I’m glad you find TargetJ interesting. It’s indeed a new approach in development, and I can say from personal experience that it does simplify things. As for production use, the targetj.io site is fully implemented using the framework. Initially, I developed TargetJ for another project, but due to financial constraints, I focused solely on the framework. I just published it, so there aren’t any other projects using it yet. If you’re interested in trying it out, I’d love to hear more. Thanks again.

Now I understand why I got many complaints about the speed. I believe I’ve fixed the issue. Thanks a lot for your feedback!

I have now added key arrow navigation. Please let me know if you still have any issues navigating the site. Thanks again.

Thank you for your question. I don't think it will work well with React. While both React and TargetJ utilize diffing algorithms, there are significant differences between them. TargetJ aims to keep the DOM as small as possible by default, only including visible elements to speed up page rendering. Additionally, it is designed to maintain a flat DOM tree.

Integrating just the DOM animation from TargetJ with React is likely not feasible, as the two would conflict.

Thank you for your feedback—it’s definitely appreciated. I believe I have fixed the performance issue, and it should run smoothly now. Please let me know if you still experience any performance issues.

Thank you for your feedback. There was a bug on the site that caused the slowdown. The code is animated to show how it operates in connection with the output, and there was a bug that contributed to the delay. However, I believe I have fixed it.

Thank you for your feedback. Every target in TargetJ has an onEnabled method that can be used to verify types before enabling the target. Only enabled targets will run. You can have targets report errors during initialization if they receive the wrong type.

Thank you for bringing this to my attention. I apologize for it and will work on a fix over the few days. I'll update as soon as the issue is resolved.

Thank you for your feedback. Currently, animations are handled using transform: translate by directly manipulating the styles of elements with JavaScript. I think this offloads the work to the GPU. This approach also gives the ability to animate in response to user actions which could be frequent like scrolling and no fixed time frame is known beforehand.

However, I agree that using the Web Animations API could be beneficial when user actions are not involved. This is a great suggestion, and I haven't given it much thought before. I will consider adding a separate API for it using the Web Animations API.

Thank you for your feedback.

TargetJ uses a unified mechanism for both development and animation by creating targets. Each target essentially has two variables: target and actual. When actual does not equal target, TargetJ will update actual until it matches target through iterations controlled by steps and stepIntervals.

For example, to animate an object along its x-axis:

App(new TModel({ x: [300, 20, 50], // Moves x to 300px in 20 steps with 50ms pauses in between html: 'Hello world' })); You can find more examples at: https://targetj.io/examples.

For Performance: - TargetJ optimizes rendering by minimizing DOM manipulations. - TargetJ divides objects automatically into a tree structure, tracking only the branches visible to the user. See examples of infinite scrolling at https://targetj.io/examples/g-Infinite-scrolling.html and infinite zooming at https://targetj.io/examples/h-Infinite-zooming.html.

I am making the site https://targetj.io more mobile-friendly, which will take a few days. In the meantime, it's best to check it on a computer.

Thank you for the suggestion - definitely appreciated. I'll definitely look into it. I also appreciate the guidance and the links. I'll check them out before posting again. Thanks again!

I am excited to introduce TargetJ, a new JavaScript framework that can animate anything. I hope you find it useful for creating amazing web experiences. If you have any questions about the framework or want to share your thoughts, please leave a comment below. I’m eager to hear from you!

# The problem

Animating an object in JavaScript is quite challenging, and orchestrating intricate animations among multiple objects is even more complex. Additionally, existing frameworks address it by introducing extra complexity. Furthermore, there is no one single coherent software solution that addresses animation, controls program flow, handles events, and loads data from external APIs, etc.

# The solution

TargetJ simplifies development and animation by employing one concept across all aspects of the program. It is used in animation, controlling program flow, integrating APIs, and so on. This unified approach means that it is easy to learn and can solve complicated problems.

The novel concept that forms its core is called 'targets', 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.

# Brief overview of how it operates

Each target in TargetJ essentially has two variables: target and actual. The target can be a static value or a method, while the actual value is always represented as a value. When the target value does not equal the actual value, TargetJ will update the actual value iteratively until it matches the target value. This iteration is determined by two additional variables: steps and step interval. Steps dictate the number of iterations, and the step interval specifies the duration in milliseconds that the system waits before executing the next iteration.

To animate a variable, create a target after its name. There are default target names you can use to animate and impact the UI, such as x, y, width, height, opacity, scale, rotate, zIndex, html, style, css, scrollLeft, and scrollTop. You can also dynamically change how HTML elements are nested using the domHolder or domParent targets. Additionally, there are other target names for dynamic control, such as canHandleEvents to specify which events are handled and canHaveDom to determine if the object requires a DOM element.

A target has a simple life cycle by default: it is executed only once when enabled. The optional enabling method creates dependencies between targets and ensures they execute at precisely the right moment.

# Other features

As a result of using targets, we can develop web sites or apps that require minimal HTML, and CSS, eliminate the need for static HTML nesting, and control the execution flow based on timing, among other benefits.

Explore the full potential of TargetJ and dive into our interactive documentation at www.targetj.io.