Glimmer DSL for Web (Matz Approved Fukuoka Award Winning Frontend Framework for Rails) had a new release in version 0.9.1 that includes a new sample called Hello, Modal! to teach how to create modals in Glimmer DSL for Web in the Frontend of Ruby on Rails web applications. By the way, rendering modals has been supported since the beginning in Glimmer DSL for Web, but there were no samples that demonstrated it before. I added a modal in the proof-of-concept branch of the Glimmer Commerce workshop app that was developed at the wroclove.rb 2026 Ruby conference 3-hour workshop regarding "Building Rails SPAs in Frontend Ruby with Glimmer DSL for Web", so I figured I'd add an official sample to Glimmer DSL for Web too that teaches how to render modals.
You can play around with the sample in the Sample Selector Rails web app (click to visit GitHub repo):
https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/
GitHub of Glimmer DSL for Web: https://github.com/AndyObtiva/glimmer-dsl-web
RubyGem of Glimmer DSL for Web: https://rubygems.org/gems/glimmer-dsl-web
GreetingPerson Model code (holds the name of the greeted person):
GreetingModal View component code:
(the style could have been placed anywhere by the way, but I chose to put it in the component; albeit it could have lived in CSS/SCSS files outside the component too)
HelloModal View component code (entry point to the sample):
Rendering modals is very simple; this is all that is needed to learn:
- ComponentClassName.render(**kwargs) # renders any component (e.g. modal component) anywhere on the page. kwargs is any custom attributes that the component supports. If kwargs include a `parent` argument though (a reserved argument name), then its value is a CSS selector for where to place the rendered component. If `parent` is unspecified, then the smart default is `body` by convention.
- markup_root.remove # this is invoked inside a component class to remove the modal element from the page, in other words, closes the modal (e.g. upon clicking a close button or performing some operation)
Happy Glimmering!!!
P.S. To learn more about Glimmer DSL for Web, come see me speak at RubyConf Austria 2026 about "Frontend Ruby on Rails with Glimmer DSL for Web". You can ask me any questions in person at the conference about how to do Frontend Development in Ruby much more effectively than in JavaScript.
P.S.2 Glimmer DSL for Web is a 100% free and open-source Ruby gem. I make $0 off of it as I only built it through many nights and weekends to solve my work Frontend maintainability and productivity problems that were caused by using React.js and to help the Ruby on Rails community as a whole evolve towards better Frontend solutions. This Ruby gem finally enables Rails Software Engineers to use Ruby in the Frontend and Backend while being able to share Ruby logic between both sides of a web application to save time and provide more responsive web UIs. That eliminates all usecases for React/Angular/Ember/Vue/Svelte as Glimmer DSL for Web provides a much more productive, maintainable, and elegant Ruby solution that doubles productivity at least (sometimes enabling devs to go 10x) compared to using React.js. If you like Ruby, you'll love Ruby in the Frontend via Glimmer DSL for Web. It won an award by Matz himself, the creator of the Ruby programming language.

No comments:
Post a Comment