« 25 Days of Ruby Gems - Ruby Advent Calendar 2020, December 1st - December 25th

Day 12 - matestack-ui-core Gem - Write Web Components in an (HTML) Domain-Specific (Mini) Language (DSL) Getting (Automagically) Turned Into Modern (Reactive) Web Views on Top of Vue.js

Written by pascalwengerter Pascal Wengerter

A self-taught software developer, and digital all-rounder. Loves democracy ‘n’ open source software. Black lives matter supporter. Co-founded the open source startup Matestack. Working as a freelancer while looking for a role in (digital) product management.

The idea: Writing web views in pure Ruby

Deeply in love with programming in Ruby and frustrated with the overly complex state of fullstack web development, jonasjabari Jonas Jabari started experimenting in late 2017 and ended up creating a prototype that eventually grew into matestack-ui-core and subsequent libraries.

Instead of rendering .erb-views or introducing a separate single-page application (SPA)-framework to handle the frontend, matestack-ui-core introduces

The gem is built using trailblazer-cells and Vue.js.

Use case 1: Static views in Ruby

Below is a simple example containing both a simple component and page. The div and paragraph core components get orchestrated by the (custom) Some::Component, which then gets called on the ExamplePage:

  # defining a component
  class Some::Component < Matestack::Ui::Component

    def prepare
      @some_data = "some data"
    end

    def response
      div id: "my-component" do
        paragraph text: @some_data
      end
    end

  end

# using the component on a page (= web view)
class ExamplePage < Matestack::Ui::Page

  def response
    div id: "div-on-page" do
      some_component
    end
  end

end

turns into

<div id="div-on-page">
  <div id="my-component">
    <p>some data</p>
  </div>
</div>

Use case 2: Dealing with repetitive JavaScript behavior

There’s a handful of JavaScript functionality that

  1. has a good value proposition from the business perspective and needs to be implemented properly
  2. is not ‘new’ and won’t teach you (the developer) anything, but you end up having to do it anyhow

Leveraging the power of Vue.js, the matestack-ui-core gem has abstracted away quite a number of use cases and turned them into (arguably) straighforward solutions. Judge for yourself:

# app/matestack/components/some_component.rb

class Components::SomeComponent < Matestack::Ui::Component

  def response
    onclick emit: "some_event" do
      button text: "click me"
    end
    toggle show_on: "some_event", hide_after: 5000 do
      plain "Oh yes! You clicked me!"
    end
  end

end

turns into

<button tabindex="0">click me</button>
<!-- only gets shown when the buttons is clicked & gets hidden after 5000ms
<div class="matestack-toggle-component-root"><br>Oh yes! You clicked me!</div>
-->

Use case X: Creating reactive custom components, re-using legacy views, advanced JavaScript behavior …

Please refer to the guides, this should only be a teaser ;)

Find Out More

Installation & Guides

The installation is quite straightforward and works with both the Asset Pipeline and Webpacker. Along with more information, there’s also a 10 step tutorial on how to set up & deploy your first matestack-powered Rails app to Heroku and the full Component API.

Community

There’s a Discord server, Q&A calls twice a week and contribution opportunities for anyone that wants to get involved!

Feedback

Feel free to reach out to jonasjabari Jonas Jabari if you got anything to share or ask :)

References

Built with Ruby (running Jekyll) on 2021-07-25 15:15:02 +0000 in 0.371 seconds.
Hosted on GitHub Pages. </> Source on GitHub. (0) Dedicated to the public domain.