Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Rux: A JSX-inspired way to render view components in Ruby

github.com

Post reply on HN
Print view View original

1–10 of 42 posts

Re: Rux: A JSX-inspired way to render view components in Ruby

#2

Post by hhthrowaway1230 »

Kind of interesting,i would like it if it had a cleaner fallback to a non JSX version. If you one day decide to not use rux

~~~ h('div.example', [

        h('h1#heading', 'This is hyperscript'),

        h('h2', 'creating React.js markup'),

        h(AnotherComponent, {foo: 'bar'}, [

          h('li', [

            h('a', {href: 'http://whatever.com'}, 'One list item')

          ]),

          h('li', 'Another list item')

        ])

      ])

    );
~~~

Re: Rux: A JSX-inspired way to render view components in Ruby

#3

Post by bradgessler »

The view stack in Rails is one of the creakiest part of the stack. A lot of people don't realize it, but the way partials in Rails leaks the state of the parent renderer is the source of a lot of bugs and code organization issues.

It's great to see more attention coming to it. Some other libraries worth keeping an eye on:

https://www.phlex.fun - Joel shipped this a few months ago ... it's very similar to Rux except it uses Ruby classes to achieve a similar effect. What's particularly interesting about Joel's efforts is that he is very worried about speed and performance, so it's a very fast templating framework.

https://youtu.be/9-rqBLjr5Eo?t=560 - This is the best overview of what Phoenix is shipping for their HTML framework, which is called HeeX (most of the docs already assume you're "in the know" with Elixir). HeeX is nice (like Rux) in that you can use HTML tags to embed server-side rendered components in markup with tags like ``. Not sure about Rux, but HeeX can reason about HTML from within itself, which means it can validate the DOM and make technologies like LiveView possible (https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html).

I'm hoping at some point in the future a "de facto" (or actual) standard for Rails view components come into being so we can have an HTML-aware templating layer in Rails and improve the ecosystem through more standard UI components.

Re: Rux: A JSX-inspired way to render view components in Ruby

#4

Post by [deleted] »

hhthrowaway1230 wrote: post #2

Kind of interesting,i would like it if it had a cleaner fallback to a non JSX version. If you one day decide to not use rux ~~~ h('div.example', [ h('h1#heading', 'This is hyperscript'), h('h2', 'creating React.js markup'), h(AnotherComponent, {foo: 'bar'}, [ h('li', [ h('a', {href: 'http://whatever.com'}, 'One list item') ]), h('li', 'Another list item') ]) ]) ); ~~~

[deleted]

Re: Rux: A JSX-inspired way to render view components in Ruby

#7

Post by sarahdellysse »

hhthrowaway1230 wrote: post #2

Kind of interesting,i would like it if it had a cleaner fallback to a non JSX version. If you one day decide to not use rux ~~~ h('div.example', [ h('h1#heading', 'This is hyperscript'), h('h2', 'creating React.js markup'), h(AnotherComponent, {foo: 'bar'}, [ h('li', [ h('a', {href: 'http://whatever.com'}, 'One list item') ]), h('li', 'Another list item') ]) ]) ); ~~~

even simpler, I have always wished that JSX/JSX-alikes would serialize to something like a tuple like `(tag: string | Component, attributes: Record, children: List)`, so your example would start looking something like this:

    
      This is an example
      creating React markup
      
        
          One list item
        
        
          Another list item
would translate to something like this:

    ["div", {"class": "example"}, [
      ["h1", {"id": "heading"}, ["This is an example"]],
      ["h2", {}, ["creating React markup"]],
      [AnotherComponent, {"foo": "bar"}, [
        ["li", {}, [
          ["a", {"href": "http://whatever.com"}, ["One list item"]],
        ],
        ["li", {}, [
          "Another list item",
          ["hr", {}, []],
        ],
      ],
    ]
and that all Rux/JSX/hyperscript/whatever would compile down to that

Re: Rux: A JSX-inspired way to render view components in Ruby

#8

Post by hokumguru »

I've been building a Javascript server that implements Hotwire/Turbo lately powered by JSX templating (not React!) and minimal client-side JS. Its a wonderful dev experience but this might make me port those ideas back to Ruby. The rest of Rails is just too good to pass up.

Re: Rux: A JSX-inspired way to render view components in Ruby

#10

Post by jazzyjackson »

sarahdellysse wrote: post #7
hhthrowaway1230 wrote: post #2

Kind of interesting,i would like it if it had a cleaner fallback to a non JSX version. If you one day decide to not use rux ~~~ h('div.example', [ h('h1#heading', 'This is hyperscript'), h('h2', 'creating React.js markup'), h(AnotherComponent, {foo: 'bar'}, [ h('li', [ h('a', {href: 'http://whatever.com'}, 'One list item') ]), h('li', 'Another list item') ]) ]) ); ~~~

even simpler, I have always wished that JSX/JSX-alikes would serialize to something like a tuple like `(tag: string | Component, attributes: Record, children: List)`, so your example would start looking something like this: This is an example creating React markup One list item Another list item would translate to something like this: ["div", {"class": "example"}, [ ["h1", {"id": "heading"}, ["This is an example"]],…

"JSX-inspired" caught me off gaurd, the only thing JSX could inspire me to do was build something so I never had to touch it again, I landed on something similar to what you have here, I call it "Elementary"

Here's the JSON for a landing page written in my syntax: https://github.com/jazzyjackson/lookalive/blob/master/docs/i...

In another project I use it extensively to mix javascript in with the object syntax as you would with JSX: https://github.com/lookalive-software/geodesy/blob/newfocus/...

The implementation is fairly simple, given JSON returns an HTML string.

https://github.com/lookalive-software/elementary/blob/master...

Post reply on HN