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

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • SaaSHub - Software Alternatives and Reviews
  • phlex

    A framework for building object-oriented views in Ruby.

  • 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 `<.icon/>`. 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.

  • Haml

    HTML Abstraction Markup Language - A Markup Haiku

  • Does this support HAML-style syntax? We're 100% HAML-only for templating, whether normal Rails views or ViewComponent... https://github.com/haml/haml https://haml.info/ so going back to writing HTML or ERB feels like a huge downgrade.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • rux

    A jsx-inspired way to render view components in Ruby.

  • lookalive

    LOOKALIVE is a language for describing data-transforms from within a desired data structure.

  • "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...

  • geodesy

  • "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...

  • elementary

    Not Another Templating Language (by lookalive-software)

  • "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...

  • markaby

    markup as ruby (official repository)

  • 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

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • hypertext

    Hypertext authoring with Ruby

  • rbexy

    A Ruby template language and component framework inspired by JSX and React

  • pyxl4

    Extend Python syntax with HTML.

  • collagraph

    Collagraph đź““ Reactive user interfaces

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

    From the README:

  • hiccup

    Fast library for rendering HTML in Clojure

  • You’re halfway to Clojure’s hiccup syntax[1] there.

    [1]: https://github.com/weavejester/hiccup/blob/master/doc/syntax...

  • Pagy

    🏆 The Best Pagination Ruby Gem 🥇

  • > 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?

    I don't think there will be much difference at all in everyday use, but some libraries that value performance don't avoid templates for that reason, Pagy for example.

    https://github.com/ddnexus/pagy

    Personally I omit them in my projects whenever we want to customise attributes, I hate seeing stuff like this in templates:

        

    Some header

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts