Escape the frontend hustle & easily create interactive web apps in pure Ruby.


Matestack provides a collection of open source gems made for Ruby on Rails developers. Matestack enables you to craft interactive web UIs without JavaScript in pure Ruby with minimum effort. UI code becomes a native and fun part of your Rails app.

Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.

Boost your productivity


Matestack enables you to define sophisticated UI behavior without touching JavaScript and HTML. You end up writing 50% less code while increasing productivity, maintainability and developer happiness.


Ruby
Version 2.6.5
Rails
Version 5/6
Vue.js
Version 2.6.11
Webpacker
Version 4.2

Define your UI in Ruby classes

Create Ruby classes within your Rails project and use methods like "div" to define your user interface.

The "div" method calls one of the static core components, responsible for rendering HTML tags.

app/matestack/my_page.rb


class MyPage < Matestack::Ui::Page

  def response
    plain "hello world"
  end

end

Preview:

hello world

Use partials for a clean structure

Simple Ruby methods help you creating well structured UI code.

app/matestack/my_page.rb


class MyPage < Matestack::Ui::Page

  def prepare
    @items = [
      {name: "A"},
      {name: "B"},
      {name: "C"}
    ]
  end

  def response  
    @items.each do |item|
      item_card item
    end
  end

  def item_card item
    div class: "some-card-style" do
      plain item[:name]
    end
  end

end

Preview:

A
B
C

Create your own components

Instead of using partials, you can move parts of your UI code to custom component classes. These can then be reused across different parts of your application and make for very DRY code.

app/matestack/my_page.rb


class MyPage < Matestack::Ui::Page
  #...
  def response
    @items.each do |item|
      my_card_component item: item
    end
  end

end

app/matestack/components/my_card_component.rb


class MyCardComponent < Matestack::Ui::Component

  requires :item

  def response
    div class: "some-card-style" do
      plain item[:name]
    end
  end

end

Preview:

A
B
C

Call controller actions without JavaScript

Core components offer basic dynamic behaviour and let you easily call controller actions and react to server responses on the client side without full page reload.

app/matestack/my_page.rb


class MyPage < Matestack::Ui::Page

  def response
    action my_action_config do
      button text: "click me"
    end
    toggle show_on: "some_event", hide_after: 5000 do
      plain "Success!"
    end
  end

  def my_action_config
    {
      path: :some_rails_route,
      method: :post,
      success: {
        emit: "some_event"
      }
    }
  end

end

Preview:

Check your browsers network monitoring ;)



Success!

Dynamically handle form input without JavaScript

Create dynamic forms for ActiveRecord Models (or plain objects) and display server side responses, like validation errors or success messages, without relying on a full page reload.

app/matestack/my_page.rb


class MyPage < Matestack::Ui::Page

  def prepare
    @new_active_record_instance = MyActiveRecordModel.new
  end

  def response
    form my_form_config do
      form_input key: :some_attribute, type: :text
      form_submit do
        button text: "click me"
      end
    end
    toggle show_on: "submitted", hide_after: 5000 do
      span class: "success-message" do
        plain "created successfully"
      end
    end
    toggle show_on: "failed", hide_after: 5000 do
      span class: "failure-message" do
        plain "data was not saved, please check form"
      end
    end
  end

  def my_form_config
    {
      for: @new_active_record_instance,
      path: :some_rails_route,
      method: :post,
      success: {
        emit: "submitted"
      },
      failure: {
        emit: "failed"
      }
    }
  end

end

Preview:

Check your browsers network monitoring ;)

{{ error }}


created successfully
data was not saved, please check form

Define asynchronous, event-based UI rerendering in pure Ruby

Using matestack's built-in event system, you can rerender parts of the UI on client side events, such as form or action submissions.

This also works for server side events broadcasted via ActionCable!

app/matestack/my_page.rb


class MyPage < Matestack::Ui::Page

  #...

  def response
    form my_form_config do
      #...
    end
    #...
    async rerender_on: "submitted", id: "my-model-list" do
      ul do
        MyActiveRecordModel.last(5).each do |model|
          li text: model.some_attribute
        end
      end
    end
  end

  def my_form_config
    {
      #...
      success: {
        emit: "submitted"
      },
      failure: {
        emit: "failed"
      }
    }
  end

end

Preview:

Check your browsers network monitoring ;)

{{ error }}


created successfully
data was not saved, please check form

Easily extend with Vue.js

Matestack's dynamic parts are built on Vue.js. If you want to implement custom dynamic behaviour, you can simply create your own Vue components and use them along matestacks core components.

It's even possible to interact with matestack's core components using the built-in event bus.

app/matestack/my_page.rb


class MyPage < Matestack::Ui::Page

  def response
    my_vue_js_component
    toggle show_on: "some_event", hide_after: "3000" do
      span class: "success-message" do
        plain "event triggered from custom vuejs component"
      end
    end
  end

end

app/matestack/my_vue_js_component.rb

class MyVueJsComponent < Matestack::Ui::VueJsComponent

  vue_js_component_name "my-vue-js-component"

  def response
    div class: "my-vue-js-component" do
      button attributes: {"@click": "increaseValue"}
      br
      plain "{{ dynamicValue }}!"
    end
  end

end

app/matestack/my_vue_js_component.js

MatestackUiCore.Vue.component('my-vue-js-component', {
  mixins: [MatestackUiCore.componentMixin],
  data: () => {
    return {
      dynamicValue: 0
    };
  },
  methods: {
    increaseValue(){
      this.dynamicValue++
      MatestackUiCore.matestackEventHub.$emit("some_event")
    }
  }
});
Preview:



{{ dynamicValue }}
event triggered from custom vuejs component

Progressive integration


Easily integrate matestack into existing Rails projects. Switch to the fullstack Ruby experience step by step.

Plugable UI components


Enjoy saving tons of time by using matestack's growing library of UI components written in pure Ruby.

Highly extensible


Creating custom UI components is as easy as writing Ruby classes or pure Vue.js components

Sustainable open source


Matestack's core libraries are free and open source - and sustainable open source development requires proper funding. We therefore offer addons, tools, advanced documentation and premium support in order to allow a growing team to work on matestack fulltime.

GitHub sponsoring tiers:

Supporter

You simply want to support the project and expect nothing in return. Thank you, mate!

Solo developer

You use matestack as a solo developer and want even more sugar. With this tier you get:

  • Access to a private Slack channel
  • Access to advanced in-depth guides (coming fall 2020)
  • Access to addon gems like material/bootstrap UI components (coming fall 2020)
Startup

You use matestack in your startup in a team of 1-10 developers and want to boost your performance even more. With this tier you get:

  • Everything from "Solo developer"
  • Priorotized Github issue processing
  • Small logo on GitHub project page & this website
Business

You use matestack in your business in a team of 11-20 developers and can imagine how matestack's add-ons and extendend guides would provide greate value to your team. With this tear you get:

  • Everything from "Startup"
  • Medium sized logo on GitHub project page & this website
  • 1 hour expert consulting per month
Big Business

You use matestack in your business in a team of 20+ developers and know what a 50% decrease of UI development effort means to your budgets. With this plan you get:

  • Everything from "Startup"
  • Large logo on GitHub project page & this website
  • Logo & description text in the documentation
  • 2 hour expert consulting per month

Add-ons for sponsors


In addition to our open source projects, we provide our sponsors with various add-ons in order to further increase their productivity.

Currently we work on a bootstrap add-on, giving you the possibility to use bootstrap components without writing all the DOM structure and CSS classes. Just use some lines of pure Ruby to get all what bootstrap has to offer. With this addon, you are able to create beautiful web apps even faster!

Extendend know how for sponsors


On top of our comprehensive and growing documentation, we will offer our sponsors written guides about advanced topics.

Currently we work on guides covering topics such as: 'handling multilanguage apps', 'creating mutlistep forms' and more!

Let's succeed together


We would love to help you succeed with our technology. We can help you in various ways.

Our services:

Workshop

You'd like to start using matestack in your business, but need help to get things going and bring your team up to speed? We're there for you!

Support on demand

You're already using matestack but need support on specific issues? Just book our experts to help you out efficiently!

Development on demand

You want us to join your development team for some time? Great Idea! We are happy to work on your projects and onboard your team concurrently!

Refactoring

You need us to refactor some bulky legacy views and turn them into future proof, maintainable Ruby code? We love this challenge!

Turnykey applications

Concept and fundig are there, and you "only" need developers/a development team to build the applications? Our Ruby experts are more than happy to do so! Both handover and ongoing support possible.

A team full of mates

Jonas Jabari
Senior Ruby developer, creator and CEO of matestack
@jonasjabari

Nils Henning
Senior Ruby developer, matestack core development


Anh Nguyen
Ruby developer, matestack application development


Pascal Wengerter
Ruby developer, matestack application development