5 ms·

Ripple: The Elegant TypeScript UI Framework

47 points by javatuts 9mo ago

reactordev 9mo ago
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.
- javatuts 9mo ago
  +1
zareith 9mo ago
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.
jemmyw 9mo ago
Why did you use `track` for variables and `#` for lists instead of using the same syntax for both?
- javatuts 9mo ago
  Scalars and collections have different update semantics. track() is for atomic updates, # is for structural mutations — separate syntax makes reactive tracking and optimization simpler.
  - henryhale 9mo ago
    why not abstract that away so that `track()` can do it all? It would be alot easier to work with.
jitix 9mo ago
Please.. no more UI frameworks. Can we just agree to make react native to the browser, get rid of redux, and simplify things?
- vikaveri 9mo ago
  I recommend MobX as a solution for state management
- troupo 9mo ago
  erm, no? React has painted itself into a usability and optimisation nightmare corner by insisting that components are the most granular level of resctivity. That's why they need 20 different hooks to do anything. You want signals in the browser for granular reactivity, and they are making their way there: https://github.com/tc39/proposal-signals https://github.com/tc39/proposal-signals
  - bigbadfeline 9mo ago
    I'm in full agreement here. Thanks for the link, I didn't know about this initiative, I'd vote for signals with my eyes closed.
- aatd86 9mo ago
  Tough luck, something is coming from my end at some point this year. The remix guys are coming with something too. You won't force me to useReact, sorry... ;D
ruduhudi 9mo ago
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
- wiseowise 9mo ago
  And then you’re back to React!
- lf-non 9mo ago
  With the introduction of proxy-based reactivity using runes, that is largely a solved problem in svelte.
- tacone 9mo ago
  I'd argue that it's easier to debug a few lines of magical code than 10x lines if non-magical code.
bitpush 9mo ago
Please replace the submitted link with the official website - https://www.ripplejs.com/ https://www.ripplejs.com/
gdotdesign 9mo ago
It's very similar to Mint (https://mint-lang.com/ 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.
- zareith 9mo ago
  Obvious reason would be that all major js libraries have ts definitions available now and if the language is TS based they can all be used without compromising with type-safety.
- PixelForg 9mo ago
  Would mint be a good fit if I want to make something like https://winxp.vercel.app/ https://winxp.vercel.app/ ?
  - gdotdesign 9mo ago
    I think so, yes.
h4ch1 9mo ago
Previous discussion: Ripple – A TypeScript UI framework that takes the best of React, Solid, Svelte | https://news.ycombinator.com/item?id=45063176 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.
Etheryte 9mo ago
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. You could replace `track` with `useState`, or `@` with `$` and it's pretty much the same thing. Whether you use syntax that's explicit or magic symbols you have to look up to understand is a matter of preference, but this does not really set it apart from any other library.
- ivanjermakov 9mo ago
  Not to mention that this is not even a valid TypeScript.
aziis98 9mo ago
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 https://www.ripplejs.com/llms.txt
- henryhale 9mo ago
  >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. Most if not all llms are producing Markdown instead of HTML as the primary output. Markdown has a simpler syntax that basically uses fewer tokens compared to HTML Similarly, Ripple appears to express a complex structure in simple terms compared to React or HTML or whatever. No wonder most AI dev tools operate in React with web previews abstracting away the setup process. Higher abstractions appear to be cost efficient(both training & inference time - output generation). All that is required is to provide the model with a document containing rules about ripplejs(in this case) and go from there...more like llms.txt or agent.md or simply documentation. Any DSL would fit in a single file and easily consumed by a model.
  - agency 9mo ago
    shorter syntax != higher level of abstraction
lloydatkinson 9mo ago
Yuck

47 points by javatuts 9mo ago

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.

javatuts 9mo ago
+1

zareith 9mo ago

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.

jemmyw 9mo ago

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

javatuts 9mo ago
Scalars and collections have different update semantics. track() is for atomic updates, # is for structural mutations — separate syntax makes reactive tracking and optimization simpler.
- henryhale 9mo ago
  why not abstract that away so that `track()` can do it all? It would be alot easier to work with.

jitix 9mo ago

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

vikaveri 9mo ago
I recommend MobX as a solution for state management
troupo 9mo ago
erm, no? React has painted itself into a usability and optimisation nightmare corner by insisting that components are the most granular level of resctivity. That's why they need 20 different hooks to do anything. You want signals in the browser for granular reactivity, and they are making their way there: https://github.com/tc39/proposal-signals https://github.com/tc39/proposal-signals
- bigbadfeline 9mo ago
  I'm in full agreement here. Thanks for the link, I didn't know about this initiative, I'd vote for signals with my eyes closed.
aatd86 9mo ago
Tough luck, something is coming from my end at some point this year. The remix guys are coming with something too. You won't force me to useReact, sorry... ;D

ruduhudi 9mo ago

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

wiseowise 9mo ago
And then you’re back to React!
lf-non 9mo ago
With the introduction of proxy-based reactivity using runes, that is largely a solved problem in svelte.
tacone 9mo ago
I'd argue that it's easier to debug a few lines of magical code than 10x lines if non-magical code.

bitpush 9mo ago

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

gdotdesign 9mo ago

It's very similar to Mint (https://mint-lang.com/ 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.

zareith 9mo ago
Obvious reason would be that all major js libraries have ts definitions available now and if the language is TS based they can all be used without compromising with type-safety.
PixelForg 9mo ago
Would mint be a good fit if I want to make something like https://winxp.vercel.app/ https://winxp.vercel.app/ ?
- gdotdesign 9mo ago
  I think so, yes.

h4ch1 9mo ago

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

Etheryte 9mo ago

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. You could replace `track` with `useState`, or `@` with `$` and it's pretty much the same thing. Whether you use syntax that's explicit or magic symbols you have to look up to understand is a matter of preference, but this does not really set it apart from any other library.

ivanjermakov 9mo ago
Not to mention that this is not even a valid TypeScript.

aziis98 9mo ago

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 https://www.ripplejs.com/llms.txt

henryhale 9mo ago
>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. Most if not all llms are producing Markdown instead of HTML as the primary output. Markdown has a simpler syntax that basically uses fewer tokens compared to HTML Similarly, Ripple appears to express a complex structure in simple terms compared to React or HTML or whatever. No wonder most AI dev tools operate in React with web previews abstracting away the setup process. Higher abstractions appear to be cost efficient(both training & inference time - output generation). All that is required is to provide the model with a document containing rules about ripplejs(in this case) and go from there...more like llms.txt or agent.md or simply documentation. Any DSL would fit in a single file and easily consumed by a model.
- agency 9mo ago
  shorter syntax != higher level of abstraction

lloydatkinson 9mo ago

Yuck