TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

135 pointsby kalaraceyabout 2 years ago

14 comments

bradgesslerabout 2 years ago
The view stack in Rails is one of the creakiest part of the stack. A lot of people don&#x27;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.<p>It&#x27;s great to see more attention coming to it. Some other libraries worth keeping an eye on:<p><a href="https:&#x2F;&#x2F;www.phlex.fun" rel="nofollow">https:&#x2F;&#x2F;www.phlex.fun</a> - Joel shipped this a few months ago ... it&#x27;s very similar to Rux except it uses Ruby classes to achieve a similar effect. What&#x27;s particularly interesting about Joel&#x27;s efforts is that he is very worried about speed and performance, so it&#x27;s a very fast templating framework.<p><a href="https:&#x2F;&#x2F;youtu.be&#x2F;9-rqBLjr5Eo?t=560" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;9-rqBLjr5Eo?t=560</a> - 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&#x27;re &quot;in the know&quot; 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 `&lt;.icon&#x2F;&gt;`. 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 (<a href="https:&#x2F;&#x2F;hexdocs.pm&#x2F;phoenix_live_view&#x2F;Phoenix.LiveView.html" rel="nofollow">https:&#x2F;&#x2F;hexdocs.pm&#x2F;phoenix_live_view&#x2F;Phoenix.LiveView.html</a>).<p>I&#x27;m hoping at some point in the future a &quot;de facto&quot; (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.
评论 #35067123 未加载
psadauskasabout 2 years ago
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...<p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;markaby&#x2F;markaby">https:&#x2F;&#x2F;github.com&#x2F;markaby&#x2F;markaby</a><p>Modifying their own example, I kinda like it.<p><pre><code> class GreetingComponent def call div { &quot;Hey There&quot; + NameComponent(first_name: &quot;Homer&quot;, last_name: &quot;Simpson&quot;) } end end</code></pre>
评论 #35048826 未加载
评论 #35073009 未加载
vlunkrabout 2 years ago
I didn&#x27;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&#x27;t want to bring that headache into my Ruby code.
评论 #35048172 未加载
评论 #35048070 未加载
throwaway09432about 2 years ago
Personally I prefer haml, in my opinion JSX is grotesque.
kalaraceyabout 2 years ago
I&#x27;m surprised no one has yet done React SSR in Rails using Graal (using the polyglot bridge between Rails running on Truffleruby and React on Graal.js).
评论 #35059018 未加载
compumikeabout 2 years ago
Does this support HAML-style syntax? We&#x27;re 100% HAML-only for templating, whether normal Rails views or ViewComponent... <a href="https:&#x2F;&#x2F;github.com&#x2F;haml&#x2F;haml">https:&#x2F;&#x2F;github.com&#x2F;haml&#x2F;haml</a> <a href="https:&#x2F;&#x2F;haml.info&#x2F;" rel="nofollow">https:&#x2F;&#x2F;haml.info&#x2F;</a> so going back to writing HTML or ERB feels like a huge downgrade.
评论 #35072936 未加载
kayodelycaonabout 2 years ago
Rails has had Builder::XmlMarkup for a long time. It&#x27;s been extracted into a gem: <a href="https:&#x2F;&#x2F;www.rubydoc.info&#x2F;gems&#x2F;builder&#x2F;Builder&#x2F;XmlMarkup" rel="nofollow">https:&#x2F;&#x2F;www.rubydoc.info&#x2F;gems&#x2F;builder&#x2F;Builder&#x2F;XmlMarkup</a><p>You could easily write a method to do this:<p><pre><code> def html(&amp;blk) io = StringIO.new() builder = Builder::XmlMarkup.new(:target =&gt; io, :indent =&gt; 2) blk.call(builder) io.to_s end html do |t| t.span &quot;#{@first_name} #{@last_name}&quot; end </code></pre> Not the prettiest, but it doesn&#x27;t require additional gems or a new syntax highlighter and linter.
评论 #35050334 未加载
hhthrowaway1230about 2 years ago
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<p>~~~ h(&#x27;div.example&#x27;, [<p><pre><code> h(&#x27;h1#heading&#x27;, &#x27;This is hyperscript&#x27;), h(&#x27;h2&#x27;, &#x27;creating React.js markup&#x27;), h(AnotherComponent, {foo: &#x27;bar&#x27;}, [ h(&#x27;li&#x27;, [ h(&#x27;a&#x27;, {href: &#x27;http:&#x2F;&#x2F;whatever.com&#x27;}, &#x27;One list item&#x27;) ]), h(&#x27;li&#x27;, &#x27;Another list item&#x27;) ]) ]) );</code></pre> ~~~
评论 #35046762 未加载
评论 #35046530 未加载
metapsjabout 2 years ago
here&#x27;s a couple more to throw into the mix.<p>Hypertext allows you to write HTML from Ruby. <a href="https:&#x2F;&#x2F;github.com&#x2F;soveran&#x2F;hypertext">https:&#x2F;&#x2F;github.com&#x2F;soveran&#x2F;hypertext</a><p>rbexy - A Ruby template language inspired by JSX <a href="https:&#x2F;&#x2F;github.com&#x2F;patbenatar&#x2F;rbexy">https:&#x2F;&#x2F;github.com&#x2F;patbenatar&#x2F;rbexy</a><p>imho, hypertext has a great deal of potential especially the DSL.
hokumguruabout 2 years ago
I&#x27;ve been building a Javascript server that implements Hotwire&#x2F;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.
Alifatiskabout 2 years ago
The html inside the call method looks cool but I have hard time understanding to how the syntax highlighting would react to seeing html inside the ruby code? Would it highlight it correctly?
评论 #35072963 未加载
jack_rimintonabout 2 years ago
I wish the syntax was more like erb i.e. &lt;%= %&gt; instead of { } although I&#x27;m sure someone will explain to me why they can&#x27;t!
评论 #35047108 未加载
xanderatallahabout 2 years ago
Does something like this exist for python?
评论 #35052611 未加载
评论 #35050971 未加载
vdfsabout 2 years ago
Full circle complete? back at PHP early days
评论 #35047555 未加载