[HN Gopher] Show HN: TargetJ - New JavaScript framework that can...
___________________________________________________________________
Show HN: TargetJ - New JavaScript framework that can animate
anything
I am excited to introduce to you TargetJ, a new JavaScript
framework that can animate anything. I have been working on this
project for over two years, driven by the complexity of current UI
frameworks. You can find the interactive documentation at
www.targetj.io. I hope you find it useful for creating great 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!
Author : ahmadwasfi
Score : 36 points
Date : 2024-07-15 18:36 UTC (5 days ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| alexliu518 wrote:
| Thanks for sharing TargetJ! It's intriguing how it can animate
| anything. Could you share how it simplifies animation creation
| and its performance in handling complex scenes?
| ahmadwasfi wrote:
| 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.
| efilife wrote:
| The examples page is impossible to scroll, can't use arrow keys,
| can't use middle mouse, can't even grab the scrollbar
| ahmadwasfi wrote:
| 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.
| ahmadwasfi wrote:
| I have now added key arrow navigation. Please let me know if
| you still have any issues navigating the site. Thanks again.
| efilife wrote:
| it's better, but I wouldn't say it's good now. Try holding
| the arrow keys, the site won't move. Any swiping both on
| mouse and mobile overshoots by a lot. What should be a
| small movement scrolls the whole website
| ahmadwasfi wrote:
| 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.
| Permik wrote:
| It's a shame that the non-composited animations just aren't
| performant enough to animate on mobile devices.
| Permik wrote:
| Just as a curiosity, have you thought about transforming the
| target value stepping down to web animations api calls?
|
| That way the implementation could _probably_ get some free
| performance as the browser could pre-calc some stuff ahead of
| time, without the need for you to brute force every calc on top
| of the js engine.
| ahmadwasfi wrote:
| 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.
| ahmadwasfi wrote:
| 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.
| FractalHQ wrote:
| Does this really have no types? How can something like this be
| usable in 2024 with no types?
| ahmadwasfi wrote:
| 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.
| archerx wrote:
| Not everybody cares about, uses or wants to use typescript.
| jitl wrote:
| Sure but as a library author, your audience is greatly
| diminished if you don't provide some typings in 2024. More
| than half the professional Javascript programmers use
| Typescript these days.
| eqkRZX_wmv0jqp7 wrote:
| Seems really laggy
| ahmadwasfi wrote:
| 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.
| neontomo wrote:
| demo is still laggy for me
| ahmadwasfi wrote:
| 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.
| ranger_danger wrote:
| How do you expect people to respond to this? You might be
| browsing on a potato for all we know.
| danhau wrote:
| I tried the examples on iOS Safari and the performance seems
| really bad. Even scrolling is super choppy. Could this just be
| the examples page?
| ahmadwasfi wrote:
| 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.
| dcsan wrote:
| Does this play nice with react or similar Dom diffing frameworks?
| Can the animation values be fed in through react state variables?
| ahmadwasfi wrote:
| 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.
| throw03172019 wrote:
| Please remove the custom scrolling effect on your website. Ruins
| the examples.
| ahmadwasfi wrote:
| Now I understand why I got many complaints about the speed. I
| believe I've fixed the issue. Thanks a lot for your feedback!
| fuzzythinker wrote:
| Not fixed in mobile (Chrome). Normal scroll jumps to the end.
| Needed to meticulosity slow scroll.
| nsjoz wrote:
| Wow, TargetJ sounds like it could be a game-changer for web
| animations! The idea of using 'targets' to manage animations,
| program flow, and even API calls is pretty innovative. I'm
| especially intrigued by the ability to handle complex animations
| and large datasets seamlessly. Has anyone tried it out in a
| production environment yet? Curious to hear how it stacks up
| against other frameworks like GSAP or Three.js!
| ahmadwasfi wrote:
| 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.
___________________________________________________________________
(page generated 2024-07-20 23:05 UTC)