← Articles

Application de démonstration Ruby côté frontend

Démo de site statique avec Glimmer DSL for Web

Je suis ravi de vous présenter une nouvelle bibliothèque Ruby innovante, Glimmer DSL for Web 0.2.3 (bêta), développée par mon ami Andy Maleh !
Glimmer DSL for Web est une bibliothèque frontend d’interface web qui fait tourner Ruby dans le navigateur. Elle révolutionne le développement web en permettant d’exécuter du code Ruby dans le navigateur pour les applications frontend. Cela rejoint la vision que Matz a exposée dans son discours d’ouverture à la RubyConf 2022 : remplacer JavaScript par Ruby pour le développement frontend.

‍
Ce qui distingue Glimmer, c’est sa simplicité et sa productivité, fidèles à la philosophie de Ruby.
Il prend en charge la liaison de données unidirectionnelle et bidirectionnelle, le rendu HTML dynamique et une conception modulaire avec les Glimmer Web Components. Vous pouvez enfin profiter d’un pur univers Ruby, côté frontend comme côté backend !

️
J’ai créé une application de démonstration qui montre comment débuter avec Glimmer DSL for Web sans Rails ni aucune configuration. Vous pouvez la consulter ici : Largo/glimmer-dsl-web-standalone-demo

Jetez surtout un œil à script.js.rb, le code de l’application qui s’exécute côté frontend.


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