← Blog

Demo-App mit Ruby im Frontend

Statische Demo-Website für Glimmer DSL for Web

Ich freue mich, Ihnen eine innovative neue Ruby-Bibliothek vorzustellen: Glimmer DSL for Web 0.2.3 (Beta), entwickelt von meinem Freund Andy Maleh!
Glimmer DSL for Web ist eine Frontend-Bibliothek für Web-GUIs mit Ruby im Browser, die die Webentwicklung revolutioniert, indem sie Ruby-Code für Frontend-Anwendungen im Browser ausführt. Das entspricht der Vision, die Matz in seiner Keynote an der RubyConf 2022 skizzierte: JavaScript in der Frontend-Entwicklung durch Ruby zu ersetzen.

‍
Was Glimmer auszeichnet, sind Einfachheit und Produktivität ganz im Sinne der Ruby-Philosophie.
Es unterstützt uni- und bidirektionales Data-Binding, dynamisches HTML-Rendering und modularen Aufbau mit Glimmer Web Components. Endlich können Sie im Frontend wie im Backend reines Ruby geniessen!

️
Ich habe eine Demo-Anwendung erstellt, die zeigt, wie Sie ohne Rails und ohne Konfiguration mit Glimmer DSL for Web loslegen. Sie finden sie hier: Largo/glimmer-dsl-web-standalone-demo

Schauen Sie sich besonders script.js.rb an: Das ist der App-Code, der im Frontend läuft.


include Glimmer

class State
 attr_accessor :name
 attr_accessor :welcome_text

 def name=(value)
    @name = value
    update_welcome_text
    puts "update name"
  end

  private

  def update_welcome_text
    self.welcome_text = "Welcome! #{@name}"
  end
end

@state = State.new

Document.ready? do
    div {
        label('Name: ', for: 'name-field')
        @name_input = input(type: 'text', id: 'name-field', required: true, autofocus: true) {
            value <=> [@state, :name]
        }
    }
    div {
        inner_text <= [@state, :welcome_text]
    }
    button('Greet') {
        onclick do
          $$.alert("Hello, #{@state.name}!")
        end
    }
end