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

21–30 of 42 posts

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

#21

Post by petepete »

psadauskas wrote: post #19

This is pretty cool, I like the idea of using inline templates in ViewComponent. I wonder how this would look using something like Markaby[1], so the templating stayed pure ruby, instead of having to be passed through a transpiler... [1]: https://github.com/markaby/markaby Modifying their own example, I kinda like it. class GreetingComponent def call div { "Hey There" + NameComponent(first_name: "Homer", last_name: "…

I maintain a collection of view components[0] and lots are built without a template, just using the Rails tag helpers directly[1]. They're easy to write, familiar to any Rails dev and very fast.

[0] https://govuk-components.netlify.app/

[1] https://github.com/DFE-Digital/govuk-components/blob/main/ap...

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

#22

Post by joeldrapper »

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"]],…

Ruby has blocks, so in Phlex, you’d write it like this using methods and keyword arguments.

  div(class: "example") do
    h1(id: "heading") { "This is an example" }
    h2 { "creating React markup" }
    AnotherComponent(foo: "bar") do
      li { a(href: "http://whatever.com") { "One list item" } }
      li do
        text " Another list item"
        hr
      end
    end
  end

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

#23

Post by ImaCake »

kayodelycaon wrote: post #17

Rails has had Builder::XmlMarkup for a long time. It's been extracted into a gem: https://www.rubydoc.info/gems/builder/Builder/XmlMarkup You could easily write a method to do this: def html(&blk) io = StringIO.new() builder = Builder::XmlMarkup.new(:target => io, :indent => 2) blk.call(builder) io.to_s end html do |t| t.span "#{@first_name} #{@last_name}" end Not the prettiest, but it doesn't require additional gems…

Surely rux would cover more edge cases than your function? A lot of people would see this function and struggle to understand what it is doing, but if you explicitly use something like rux it's much more obvious. I guess rux would have more overhead than this though.

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

#24

Post by caseyf »

petepete wrote: post #21
psadauskas wrote: post #19

This is pretty cool, I like the idea of using inline templates in ViewComponent. I wonder how this would look using something like Markaby[1], so the templating stayed pure ruby, instead of having to be passed through a transpiler... [1]: https://github.com/markaby/markaby Modifying their own example, I kinda like it. class GreetingComponent def call div { "Hey There" + NameComponent(first_name: "Homer", last_name: "…

I maintain a collection of view components[0] and lots are built without a template, just using the Rails tag helpers directly[1]. They're easy to write, familiar to any Rails dev and very fast. [0] https://govuk-components.netlify.app/ [1] https://github.com/DFE-Digital/govuk-components/blob/main/ap...

I do this as well. Our design system in-progress has 32 components and only 3 are rendered with templates.

They are fast and easy to write and easy to modify for sure. I wouldn't mind having the code look more like the output (without a template) but it's not something I've been missing...

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

#26

Post by zem »

petepete wrote: post #21
psadauskas wrote: post #19

This is pretty cool, I like the idea of using inline templates in ViewComponent. I wonder how this would look using something like Markaby[1], so the templating stayed pure ruby, instead of having to be passed through a transpiler... [1]: https://github.com/markaby/markaby Modifying their own example, I kinda like it. class GreetingComponent def call div { "Hey There" + NameComponent(first_name: "Homer", last_name: "…

I maintain a collection of view components[0] and lots are built without a template, just using the Rails tag helpers directly[1]. They're easy to write, familiar to any Rails dev and very fast. [0] https://govuk-components.netlify.app/ [1] https://github.com/DFE-Digital/govuk-components/blob/main/ap...

interesting approach, thanks for sharing it!

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

#28

Post by craigmcnamara »

FigurativeVoid wrote: post #16
vlunkr wrote: post #14

I didn't know about ViewComponent until now, it looks more appealing to me than Rux. Dealing with transpilers is a necessary evil in JS land, I really don't want to bring that headache into my Ruby code.

ViewComponent is really cool, but still a little fresh. I'm excited to see how they update it in the coming year.

ViewComponent is years old, in large production deployments, and very stable.

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

#29

Post by ivoflipse »

xanderatallah wrote: post #12

Does something like this exist for python?

You could implement a HTML renderer with Collagraph (https://github.com/fork-tongue/collagraph).

From the README: Write your Python interfaces in a declarative manner with plain render functions, component classes or even single-file components using Vue-like syntax, but with Python!

  - Reactivity (made possible by leveraging observ)
  - Function components
  - Class components with local state and life-cycle methods/hooks
  - Single-file components with Vue-like syntax (.cgx files)
  - Custom renderers

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

#30

Post by andrei_says_ »

petepete wrote: post #21
psadauskas wrote: post #19

This is pretty cool, I like the idea of using inline templates in ViewComponent. I wonder how this would look using something like Markaby[1], so the templating stayed pure ruby, instead of having to be passed through a transpiler... [1]: https://github.com/markaby/markaby Modifying their own example, I kinda like it. class GreetingComponent def call div { "Hey There" + NameComponent(first_name: "Homer", last_name: "…

I maintain a collection of view components[0] and lots are built without a template, just using the Rails tag helpers directly[1]. They're easy to write, familiar to any Rails dev and very fast. [0] https://govuk-components.netlify.app/ [1] https://github.com/DFE-Digital/govuk-components/blob/main/ap...

Am I understanding correctly that there’s a significant difference in performance between using a ViewComponent + a partial vs. a ViewComponent which renders html via a tag - from inside the component?

Don’t partials get compiled when used from a ViewComponent?

Also - the gov.uk project makes my heart sing ;)

Post reply on HN