DEV Community

Cover image for JavaScript Frameworks and Metagaming

JavaScript Frameworks and Metagaming

Ryan Carniato on July 06, 2021

Last week we released SolidJS 1.0. A JavaScript framework built on a foundation of ideas long ago dismissed, that accomplishes what some thought to...
Collapse
 
okikio profile image
Okiki Ojo • Edited

Does solid have a good animation framework? I'm thinking of creating an integration for @okikio/animate.

@okikio/animate is an animation library that uses the Web Animation API (you can read more about it on CSS-Tricks). While going through Solid's docs I remember seeing a demo that used the Web Animation API, so, I thought it might be a good idea. The problem is that I'm rather inexperienced with using reactive frameworks, so, I'm not sure how I should go ahead designing an animation framework for solidjs?

This a bit of an aside but solidjs's createResource method is difficult to use for asynchronous tasks that aren't fetch operations, it was the main reason I had to abandon using solidjs for one my projects, namely bundle.js.org. bundle.js.org had a web worker to handle building and bundling but I found it difficult to setup an asynchronous loading system for when building and bundling was done within the worker.

Collapse
 
ryansolid profile image
Ryan Carniato Playful Programming

I did a quick port of Transition Groups like you find in Vue or React. But I haven't anything nice to that scale. I think currently it is a hole so I'd love to see work done in this area.

Collapse
 
okikio profile image
Okiki Ojo

Should I aim for a react-motion like syntax or aim for a custom one for solid js?

Thread Thread
 
ryansolid profile image
Ryan Carniato Playful Programming

Honestly, I'd defer to anyone who has the experience of using these libraries for what makes the most sense. Animation is a weakspot for me. I've always leveraged mostly manual CSS techniques etc and focused more on the mechanics of features than the polish working on large long running projects. I often delegated animations to other developers on my team. So my opinion on animation wrappers is limited.

Thread Thread
 
okikio profile image
Okiki Ojo

Ok, thanks

Collapse
 
trusktr profile image
Joe Pea

Random thought: could it be possible to move animations to dom-expressions, and let people hook into it with different libs (f.e. Tween.js, Anime.js, Green Sock, etc).

Collapse
 
drsensor profile image
૮༼⚆︿⚆༽つ

Hi, do you have a written article on how HMR in Solid.js implemented?

Since Solid component return DOMNode instead of VNode, I wonder if I can borrow some ideas to make HMR works with ECS pattern 🤔 (commonly use in real-time game and simulator)

Collapse
 
ryansolid profile image
Ryan Carniato Playful Programming

HMR is quite possibly the most difficult problem Ive come across for the fine-grained approach(yes harder than Suspense and Concurrent Rendering). Its harder than hydration since no expectation of things matching. So I consider the solution incomplete. Solid only preserves state above the change. Even Svelte's HMR which does preserve the state blows out nested elements when I last checked. This is a place where VDOM diffing has an easier time.

Collapse
 
mtyson profile image
MTyson

Should have asked you about HMR :)

Collapse
 
forivall profile image
Emily Marigold Klassen

Of course you called your creation "solid". Great job Ryan!

Collapse
 
ryansolid profile image
Ryan Carniato Playful Programming

Thanks, Emily. Naming is hard. I went the lazy way the same way I did with my band name.