Ripple: The Elegant TypeScript UI Framework

Granted I have not used this library myself, so this is not coming from experience, but this type of copy does not instill confidence:

  let count = track(0);
  <button onClick={() => @count++}>{@count}</button>
  
  No useState, ref(), .value, $:, or signals.

And just like svelte this is elegant exactly until you realize that it is not possible to correctly track all the dependencies and just like svelte you realize that a mix of explicit and implicit reactivity is really hard to debug and then you seitch to explicit reactivity and then you are just as complex as any other reactivity based framework

I don't get how this would be more "ai friendly" than other frameworks, that kind of propositions should be backed by more concrete proof. I know that this is a kind of open problem but at least show me this can be easily generated with common models without an enormous reference prompt.

Another thing is that this looks like any other framework out there. I think you can map every one of it's features mostly 1-1 to SolidJS. What is the novelty here? The slightly changed js syntax with "component", "@" and "#"?

I would like to see more radical and new ideas in the js space, expecially in this period. Maybe a new take on Elm to get stronger UI stability guarantees. Or even just some very good tooling to reason about very large reactivity graphs at runtime and (maybe also at) compile time.

That said I still appreciate the work and in particular all the effort spent making the new syntax work in all common editors, I see they support vscode, intellij, sublime, ...

Edit: In the actual documentation they provide an llm.txt https://www.ripplejs.com/llms.txt

It's very similar to Mint (https://mint-lang.com/) which I'm building for some time now.

Looking at the samples, it seems Ripple is going the same direction as Mint:

- explicit component definitions

- inlined control flow in HTML tags

- component based styling

- explicit white space handling for element content

- syntax for setting references

I'm not sure why they based it on TypeScript instead of creating a new language completely, since there are a lot of new syntax added (and they have their own extension as well).

If you are looking for something similar, give Mint a try, it has a lot more features, and I'm looking to release 1.0 in the near future.

Why did you use `track` for variables and `#` for lists instead of using the same syntax for both?

Previous discussion: Ripple – A TypeScript UI framework that takes the best of React, Solid, Svelte | https://news.ycombinator.com/item?id=45063176

I still feel the same way about it. Feels like a weird mish mash of React and Svelte. I don't see any good reason to switch to it after working with Svelte and Solid in prod for the past couple of years.

Please replace the submitted link with the official website - https://www.ripplejs.com/

The end result seems very close to svelte with runes, except with lower learning curve because we dont have special syntax for things like loops, conditionals etc.

For the first time in a long time, I actually like the look of this.

It’s like htmx and jsx teamed up for world domination. I like the component keyword as a first class citizen. I like the bind and event stuff too. Man, I’m going to have to try this.

Please.. no more UI frameworks. Can we just agree to make react native to the browser, get rid of redux, and simplify things?