DEV Community: Andy Maleh

2025 Reminder That DHH Is a Total Idiot!

Andy Maleh — Fri, 28 Mar 2025 16:42:32 +0000

Just a reminder that DHH is a total idiot for not adding any Frontend Ruby tech to the Rails stack in recent years. For the last 10 years, he's pretended to be "forward thinking" and "innovative", but has been closed-minded and standing in the way of progress. He is not what he used to be when he was open-minded in the minded-2000s and helped merge Merb with Rails. Nowadays, he is clearly biased towards JavaScript against Ruby to the detriment of the Ruby community. He claims he is "embracing" JavaScript for "pragmatic reasons", which might sound good on paper and might be something I'd normally agree with, but in fact is hurting the Ruby community significantly as illustrated by the attached JS code examples that many Ruby on Rails devs write nowadays as a result of DHH's closed-mindedness and stupidity. His claim for embracing JavaScript would only be true if there weren't huge differences between JavaScript and Ruby, alas there are enormous differences between the two languages. As such, DHH is an idiot and will always be called idiot unless he corrects his ways and apologizes for destroying the Ruby on Rails community by enabling devs to write code like the attached code in the last 10 years. The blood of such crappy code is on DHH's hands! Only bigger idiots would support DHH's idiotic position. They're all enemies of progress and innovation in the Ruby on Rails community. We all know Hotwire isn't enough, and the Stimulus bit is the part that many devs replace with React.js eventually or from the get-go because it doesn't solve everything effectively and conveniently. By the way, I do not necessarily propose that everyone needs Frontend Ruby as Hotwire could be sufficient for more basic Rails projects, but 100% of devs who use JS libraries like React/Angular/Ember/Vue/Svelte have zero excuses not using Frontend Ruby instead to cut their work by half with much better possibilities facilitated only by the Ruby programming language. The fact that DHH doesn't get that demonstrates how much out of depth and out of touch he's become in Ruby over the last 10 years.

JavaScript is a disease! Ruby is the cure!

Andy Maleh — Fri, 11 Oct 2024 20:05:58 +0000

In a recent Ruby meetup, I called JavaScript a disease! It is true! Especially, when comparing JavaScript code to much better, more elegant, and more readable Ruby code! JavaScript looks like ugly smelly mold by comparison. Once you see it, you can never unsee it! That's why I wouldn't touch JavaScript with a ten foot pole if I can help it in 2024. I would use Frontend Ruby instead (e.g. Opal Ruby, WASM, or Ruby2JS). Opal Ruby can usually be setup in about 10 minutes in a Rails app (https://github.com/opal/opal-rails), and it yields smaller downloadables than WASM. I am not sure why anyone in 2024 would go through the Hell of JavaScript in their otherwise pristine Ruby on Rails codebase instead of actually entering Heaven by using Frontend Ruby! Opal Ruby has won a Fukuoka Ruby 2023 Award and supports Ruby 3.1 with the ability to use any pure Ruby gems in the Frontend by simply including them in Gemfile. That removes the need for a complicated JavaScript bundling beast like Webpack. In the past, I might have advocated for still using JavaScript in smaller apps, but the barrier of integrating modern Ruby into the Frontend of Rails applications has become so non-existent with Opal, there are no more excuses for using JavaScript in a Ruby on Rails codebase.

Yahuda Katz mentioned in his keynote speech at RailsConf 2014 (https://youtu.be/9naDS3r4MbY?t=1195), which borrowed ideas from Steve Jobs, that by continuously building more floors for the lower levels of a building in the form of a framework and a community of open-source projects, we enable developers to start development at higher and higher levels than they would have been able to otherwise, thus helping them leapfrog earlier ways of development in ever increasing productivity! In 2024, Frontend Ruby (e.g. Opal) is the next floor level that enables Ruby Software Engineers to start at a higher level of development with much higher productivity and maintainability. I strongly believe that anyone who is not using Frontend Ruby in 2024 is at least half as productive as those who are using Frontend Ruby in their Rails development, regardless of whatever framework they are using. I don't care if someone is enamored by some "cool JavaScript framework xyz"; try to implement that framework in Ruby, and IT WILL BE EVER COOLER AND BETTER IN RUBY! Or, in certain instances, you will discover that Ruby is so much simpler than JavaScript, YOU DO NOT EVEN NEED the "cool" JavaScript frameworks as they are UNCOOL IN RUBYLAND! Glimmer DSL for Web is one Frontend Ruby Framework example that demonstrates the unique simplicity/readability of Ruby that is unmatched by cryptic/too-clever JavaScript code: https://github.com/AndyObtiva/glimmer-dsl-web

JavaScript is a disease! Ruby is the cure! Don't be part of the problem by using JavaScript in Ruby on Rails codebases! Be part of the solution by using the language we all love, Ruby, isomorphically in Ruby on Rails applications in 2024 and beyond!

Blog post version for sharing:
https://andymaleh.blogspot.com/2024/10/javascript-is-disease-ruby-is-cure.html

Lack of Support and Participation in the Software Engineering Community Violates The Software Engineering Code of Ethics

Andy Maleh — Mon, 16 Sep 2024 20:06:14 +0000

Some Software Engineers mention "not being interested" as an excuse not to help someone with something that could benefit customers or the Software Engineering community at large when the real reason is in fact covert discrimination against that person and lack of effort to treat them as an equal and equally respected member of their community. Know that Software Engineers have to abide by the Software Engineering Code of Ethics:

https://www.computer.org/education/code-of-ethics

And, it includes the statements:

"Software engineers shall act consistently with the public interest."
"Software engineers shall be fair to and supportive of their colleagues."

So, if someone gives you an excuse of "not being interested" to avoid helping you out with a public interest matter out of discrimination against you, know that they have conducted themselves in an unethical manner and remind them of what they signed up for when they became Software Engineers, whether implicitly or explicitly.

This even extends to matters like Software Engineers not wanting to check out certain technologies/libraries that could greatly help the public interest just out of discrimination against the technology/library creators. It also covers matters of Software Engineers not wanting to learn and improve certain skills through frequent attendance of local user groups that can improve the practice of their profession.

After all, that is covered by the statement:

"Software engineers shall participate in lifelong learning regarding the practice of their profession and shall promote an ethical approach to the practice of the profession."

I am including the short version of the Software Engineering Code of Ethics below for your convenience:

Software engineers shall commit themselves to making the analysis, specification, design, development, testing and maintenance of software a beneficial and respected profession. In accordance with their commitment to the health, safety and welfare of the public, software engineers shall adhere to the following Eight Principles:

PUBLIC – Software engineers shall act consistently with the public interest.
CLIENT AND EMPLOYER – Software engineers shall act in a manner that is in the best interests of their client and employer consistent with the public interest.
PRODUCT – Software engineers shall ensure that their products and related modifications meet the highest professional standards possible.
JUDGMENT – Software engineers shall maintain integrity and independence in their professional judgment.
MANAGEMENT – Software engineering managers and leaders shall subscribe to and promote an ethical approach to the management of software development and maintenance.
PROFESSION – Software engineers shall advance the integrity and reputation of the profession consistent with the public interest.
COLLEAGUES – Software engineers shall be fair to and supportive of their colleagues.
SELF – Software engineers shall participate in lifelong learning regarding the practice of their profession and shall promote an ethical approach to the practice of the profession.

Blog post version for sharing, titled "Lack of Support and Participation in the Software Engineering Community Violates The Software Engineering Code of Ethics":
https://andymaleh.blogspot.com/2024/09/lack-of-support-and-participation-in.html

10x Developer Puzzle, Solved!!!

Andy Maleh — Tue, 03 Sep 2024 19:26:51 +0000

Here is a thought! The mythical 10x Developer is simply a developer that eliminates 9/10 of unnecessary over-engineered code, and then writes the remaining 1/10 of the code needed at the productivity rate of a 1x Developer!

Such a developer might come across as a 10x Developer to others when in fact, all they are is a 1x Developer that knows how to cut the fat of over-engineering out and avoid unnecessary overhyped libraries/languages/technologies to eliminate 9/10 of development waste and only do 1/10 of the work otherwise done.

I believe I have just solved the 10x Developer puzzle for once and for all! The 10x Developer mystery has been demystified for good!!

Originally posted at the Code Master blog:
https://andymaleh.blogspot.com/2024/09/10x-developer-puzzle-solved.html

Glimmer DSL for Web Ruby Integration with JavaScript Libraries

Andy Maleh — Fri, 17 May 2024 21:28:03 +0000

Glimmer DSL for Web is a Ruby-in-the-Browser Web Frontend Framework that enables Rubyists to finally have Ruby productivity and happiness in the Frontend via a simpler, more intuitive, more straightforward, and more productive library than all JavaScript libraries like React, Angular, Ember, Vue, Svelte, etc.... Glimmer DSL for Web's Rails sample app "Sample Selector" has been upgraded with Code Syntax Highlighting by integrating with highlight.js. It demonstrates how to integrate with JavaScript libraries, how to build Glimmer Web Components in the Frontend, and how to make HTTP calls from a Ruby Frontend to a Ruby Backend in a Rails application, among other things.

The Sample Selector Rails app enables users to list all samples that ship with the glimmer-dsl-web Ruby gem, show each sample's entry point code, and run the sample in the browser.

Here is a breakdown of the code:

The Rails layout includes links to the highlight.js javascript CDN URLs:

<!DOCTYPE html>
<html>
  <head>
    <title>SampleGlimmerDslOpalRails7App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/ruby.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

The Rails View renders a Glimmer Web Component using the glimmer_component Rails helper (this is meant to be a drop-in replacement for JS solutions like react_component):

<h1 style="text-align: center;">Glimmer DSL for Web Rails 7 Sample App</h1>

<%= glimmer_component('sample_selector') %>

The Sample Selector Top-Level Glimmer Web Component is the entry point to the Frontend application, which simply consists of 2 other Glimmer Web Components, the Samples Table (samples_table) and the Highlighted Code (highlighted_code). It is as simple as the code could get, and way simpler and lighter than alternative JavaScript library approaches like React, thus cutting down on maintainability cost and time to delivery significantly, for both small and large apps alike:

require 'glimmer-dsl-web'

require_relative 'sample_selector/presenters/sample_selector_presenter'
require_relative 'sample_selector/views/back_anchor'
require_relative 'sample_selector/views/highlighted_code'
require_relative 'sample_selector/views/samples_table'

class SampleSelector
  include Glimmer::Web::Component

  before_render do
    @presenter = SampleSelectorPresenter.new
  end

  markup {
    div {
      h2("Run a sample or view a sample's code.", style: 'text-align: center;')

      highlighted_code(language: 'ruby', model: @presenter, model_code_attribute: :selected_sample_code, float: 'right')

      samples_table(presenter: @presenter)

      button('Run', style: 'margin: 15px 0; padding: 10px; font-size: 1.3em;') {
        onclick do |event|
          event.prevent_default
          markup_root.remove
          BackAnchor.render
          @presenter.run
        end
      }
    }
  }
end

The Highlighted Code Glimmer Web Component declaratively handles loading sample code into an HTML View innerHTML through unidirectional data-binding to the Sample Model code attribute, applying syntax highlighting using highlight.js after reading from the Model whenever updates happen to the View. The code has an excellent separation of concerns between the View and Model, and is a lot simpler than equivalent React code, thus much easier to reason about. Additionally, some CSS was written directly in a Ruby DSL:

class HighlightedCode
  include Glimmer::Web::Component

  attribute :language, default: 'ruby'
  attribute :model
  attribute :model_code_attribute # name of attribute on model that holds code string to render
  attribute :float, default: 'initial'

  markup {
    div(class: 'code-scrollable-container', style: "float: #{float};") {
      pre {
        @code_element = code(class: "language-#{language}") {
          inner_html <= [model, model_code_attribute,
                          after_read: -> (_) { highlight_code }
                        ]
        }
      }

      style {
        r('div.code-scrollable-container') {
          overflow 'scroll'
          width 'calc(100vw - 410px)'
          height '80vh'
          border '1px solid rgb(209, 215, 222)'
          padding '0'
        }

        r('div.code-scrollable-container pre') {
          margin '0'
        }

        r('.hljs-ln td.hljs-ln-line.hljs-ln-numbers') {
          user_select 'none'
          text_align 'center'
          color 'rgb(101, 109, 118)'
          padding '3px 30px'
        }
      }
    }
  }

  def highlight_code
    @code_element.dom_element.removeAttr('data-highlighted')
    # $$ enables interacting with global JS scope, like top-level hljs variable to use highlight.js library
    $$.hljs.highlightAll
    $$.hljs.initLineNumbersOnLoad
  end
end

The Samples Table lists all the samples that are included in the glimmer-dsl-web Ruby gem, and provides the ability to select a sample and run it. It also interacts with a Sample API Web Service to pull sample code data from the Rails backend, thus ensuring a proper separation of concerns for maximum maintainability. Some CSS is added with a Ruby DSL as well:

class SamplesTable
  include Glimmer::Web::Component

  attribute :presenter

  markup {
    table(class: 'samples') {
      tbody {
        SampleSelectorPresenter::SAMPLES.each do |sample|
          tr {
            td(sample.name)

            class_name <= [presenter, :selected_sample,
                            on_read: -> (val) { val == sample ? 'selected' : ''}
                          ]

            onclick do |event|
              event.prevent_default
              presenter.selected_sample = sample
            end
          }
        end

        tr {
          # handle this sample differently via links to demonstrate visiting outside pages
          td {
            span('Hello, glimmer_component Rails Helper!')
            span(' ( ')
            a('Run', "data-turbo": "false", href: '/?address=true&full_name=John%20Doe&street=123%20Main%20St&street2=apt%2012&city=San%20Diego&state=California&zip_code=91911')
            span(' | ')
            a('Code',
              target: '_blank',
              href: 'https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/views/welcomes/_address_page.html.erb'
            )
            span(' ) ')
          }
        }
      }

      style {
        r('table.samples') {
          border_spacing 0
        }

        r('table.samples tr td') {
          border '1px solid transparent'
          padding '5px'
        }

        r('table.samples tr td:hover') {
          border '1px solid gray'
        }

        r('table.samples tr.selected td') {
          border '1px solid lightgray'
          background 'lightblue'
        }
      }
    }
  }
end

The Back Anchor provides a back-link to enable going back to the main page from any run sample:

require 'glimmer-dsl-web'

class BackAnchor
  include Glimmer::Web::Component

  markup {
    a('<< Back To Samples', href: '#', style: 'display: block; margin-bottom: 10px;') { |back_anchor|
      onclick do
        back_anchor.remove
        Element['body > *'].to_a[2..].each(&:remove)
        SampleSelector.render(parent: ".sample_selector")
      end
    }
  }
end

The Sample Selector Presenter provides all the data and actions that the Sample Selector View needs, including how to present sample names, the attribute for storing the selected sample, and the method for running a sample, which delegates to the Sample Model to keep concerns better separated for higher maintainability:

require_relative '../models/sample'

class SampleSelectorPresenter
  SAMPLE_NAMES = {
    'hello_world' => 'Hello, World!',
    'hello_button' => 'Hello, Button!',
    'hello_form' => 'Hello, Form!',
    'hello_observer' => 'Hello, Observer!',
    'hello_observer_data_binding' => 'Hello, Observer (Data-Binding)!',
    'hello_data_binding' => 'Hello, Data-Binding!',
    'hello_content_data_binding' => 'Hello, Content Data-Binding!',
    'hello_component' => 'Hello, Component!',
    'hello_paragraph' => 'Hello, Paragraph!',
    'hello_input_date_time' => 'Hello, Input Date/Time!',
    'hello_form_mvp' => 'Hello, Form (MVP)!',
    'button_counter' => 'Button Counter',
  }

  SAMPLES = SAMPLE_NAMES.map { |id, name| Sample.new(id:, name:) }

  attr_reader :selected_sample
  attr_accessor :selected_sample_code

  def initialize
    self.selected_sample = SAMPLES.first
  end

  def selected_sample=(sample)
    # causes selected sample to get highlighted in the View indirectly through data-binding
    @selected_sample = sample

    @selected_sample.fetch_code do |code|
      # causes selected sample code to display in the View indirectly through data-binding
      self.selected_sample_code = code
    end
  end

  def run
    selected_sample.run
  end
end

The Sample Model stores sample specific data like the code and ID, enables fetching sample code from the Rails Backend using a Sample API Web Service, and provides and the ability to run a sample by loading the associated sample Ruby file:

require_relative 'sample_api'

# Sample Frontend Model
class Sample
  attr_reader :id, :name, :code

  def initialize(id:, name:)
    @id = id
    @name = name
  end

  def fetch_code(&code_processor)
    SampleApi.show(id) do |sample|
      @code = sample.code
      code_processor.call(@code)
    end
  end

  def run
    # We must embeded static require/load statements for Opal to pre-load them into page
    case @id
    when 'hello_world'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_world.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_world.rb'
      end
    when 'hello_button'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_button.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_button.rb'
      end
    when 'hello_form'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_form.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_form.rb'
      end
    when 'hello_observer'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_observer.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_observer.rb'
      end
    when 'hello_observer_data_binding'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb'
      end
    when 'hello_data_binding'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_data_binding.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_data_binding.rb'
      end
    when 'hello_content_data_binding'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_content_data_binding.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_content_data_binding.rb'
      end
    when 'hello_component'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_component.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_component.rb'
      end
    when 'hello_paragraph'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_paragraph.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_paragraph.rb'
      end
    when 'hello_input_date_time'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_input_date_time.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_input_date_time.rb'
      end
    when 'hello_form_mvp'
      begin
        load 'glimmer-dsl-web/samples/hello/hello_form_mvp.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/hello/hello_form_mvp.rb'
      end
    when 'button_counter'
      begin
        load 'glimmer-dsl-web/samples/regular/button_counter.rb'
      rescue LoadError # the first time a file is loaded, it raises LoadError and must be required instead
        require 'glimmer-dsl-web/samples/regular/button_counter.rb'
      end
    end
  end
end

The Sample API Web Service simply makes HTTP calls to the Rails backend to grab data:

# Sample Resource HTTP API that calls Rails Backend Samples API Endpoint
class SampleApi
  class << self
    def show(id, &sample_processor)
      HTTP.get("/samples/#{id}.json") do |response|
        # Wrapping response body with Native to convert from a JS object to an Opal Ruby object, 
        # thus converting JS properties into Ruby methods that facilitate interaction with object.
        sample = Native(response.body)
        sample_processor.call(sample)
      end
    end
  end
end

In conclusion, we demonstrated in the Sample Selector app a Rails Frontend application that is written fully in Ruby with Ruby DSLs in place of HTML/CSS/JavaScript, is following the Model-View-Presenter pattern (a variation on MVC), includes HTTP calls to a Rails Backend to demonstrate real Business Use-Cases of Frontend/Backend interaction, and integrates with an external JavaScript library (highlight.js) for Code Syntax Highlighting.

As a result, Rails Software Engineers do not have to be split anymore between those who are afraid of Frontend Development because of JavaScript, and those who prefer to do Frontend Development in spite of JavaScript's pitfalls. Instead, there is a 3rd better way that unites all Rails Software Engineers! Just write the Frontend in the same language you love so much in the Backend due to offering maximum productivity and maintainability: Ruby! This should become the no-brainer future of all Frontend development in Rails!!!

I will leave you with the Glimmer DSL for Web introduction from the project README on GitHub:

"You can finally have Ruby developer happiness and productivity in the Frontend! No more wasting time splitting your resources across multiple languages, using badly engineered, over-engineered, or premature-optimization-obsessed JavaScript libraries, fighting JavaScript build issues (e.g. webpack), or rewriting Ruby Backend code in Frontend JavaScript. With Ruby in the Browser, you can have an exponential jump in development productivity (2x or higher), time-to-release (1/2 or less time), cost (1/2 or cheaper), and maintainability (~50% the code that is simpler and more readable) over JavaScript libraries like React, Angular, Ember, Vue, and Svelte, while being able to reuse Backend Ruby code as is in the Frontend for faster interactions when needed. Ruby in the Browser finally fulfills every highly-productive Rubyist's dream by bringing Ruby productivity fun to Frontend Development, the same productivity fun you had for years and decades in Backend Development."

Montreal.rb 2024/03 - Frontend Ruby with Glimmer DSL for Web - Andy Maleh

Andy Maleh — Thu, 07 Mar 2024 18:50:15 +0000

The talk video and slides have been posted for the Montreal.rb March 2024 talk "Frontend Ruby with Glimmer DSL for Web" (Ruby in the Browser Web Frontend Framework).

YouTube Video :

https://www.youtube.com/watch?v=rIZ-ILUv9ME&list=PLRAf4zt5oEjc2mqmEN9m_O0JovQCXxvxt&index=11

Google Slides :

https://docs.google.com/presentation/d/e/2PACX-1vQVihtMktOEJ-AJWb1a-uyJfpyn7q92xstcx7QLIUOFONzG5TmKD7_2hSLdwijgw-l6LdK6OLbQPP61/pub?start=false&loop=false&delayms=60000

Blog Post Announcement :

https://andymaleh.blogspot.com/2024/03/montrealrb-march-2024-frontend-ruby.html

Talk Description :

Rubyists would rather leverage the productivity, readability, and maintainability benefits of Ruby in Frontend Web Development than JavaScript to cut down development cost and time by half compared to using popular yet inferior JavaScript frameworks with bloated JavaScript code as per Matz's suggestion in his RubyConf 2022 keynote speech to replace JavaScript with Ruby. Fortunately, this is possible in 2024!

This talk is a continuation of the previous Montreal.rb talk "Intro to Ruby in the Browser", which ended by promising a new way in the future for developing Web Frontends that would completely revolutionize the way we think about and do Frontend Development using Ruby instead of JavaScript. The future is now!!! The simplest, most intuitive, most straight-forward, and most productive Frontend Framework in existence is here! It is an open-source Ruby gem called Glimmer DSL for Web.

Think of Glimmer DSL for Web as the Rails of Frontend Frameworks. With it, you can finally live in Rubyland in both the Frontend and Backend on the Web! That opens up the door to ideas like rendering Frontend Components in the Backend as Server Components in the future, eliminating the conflict between ERB and JS frontend rendering technologies by leveraging highly readable, maintainable, and productive Ruby code isomorphically.

Slides & Code for RubyConf 2023 Workshop "How To Build Desktop Applications in Ruby"

Andy Maleh — Wed, 15 Nov 2023 03:49:21 +0000

Thanks to everyone who attended my RubyConf 2023 2-Hour Workshop "How To Build Desktop Applications in Ruby". For those who missed the event, I posted the presentation slides and code exercises (27 exercises) on GitHub. I also blogged about the new Color The Circles game app that was developed at the RubyConf 2023 Community Day Glimmer Desktop Hacking event.

More at:

https://andymaleh.blogspot.com/2023/11/rubyconf-2023-how-to-build-desktop.html

GitHub Repo Direct Link:

https://github.com/AndyObtiva/how-to-build-desktop-applications-in-ruby

Presentation Slides Direct Link:

https://bit.ly/rubyconf2023desktop

Glimmer DSL for LibUI Scaffolding + Snake Game

Andy Maleh — Sun, 22 Oct 2023 21:33:29 +0000

Glimmer DSL for LibUI (Prerequisite-Free Ruby Desktop Development Cross-Platform Native GUI Library) versions 0.9.x include support for a new Glimmer Command, Application Scaffolding, Custom Component Scaffolding, Custom Component Gem Scaffolding, and more. These features greatly improve Software Engineering Productivity when building desktop applications with Glimmer DSL for LibUI. Glimmer Scaffolding could be thought of as the "Desktop Application" equivalent of Rails Scaffolding and Generators.

Application Scaffolding enables automatically generating the directories/files of a new desktop GUI application that follows the MVC architecture and can be packaged as a Ruby gem that includes a binary script for running the app conveniently.

In fact, I ate my own dog food and used the new Application Scaffolding feature to effortlessly scaffold a Glimmer Snake game (code is included near the bottom of this post):

https://github.com/AndyObtiva/glimmer_snake

This is the gemified app edition of the Snake game example that is included in Glimmer DSL for LibUI.

Learn more at this blog post (and at the Glimmer DSL for LibUI project and Glimmer Snake game pages):
https://andymaleh.blogspot.com/2023/10/glimmer-dsl-for-libui-scaffolding-snake.html

Happy Glimmering!

Glimmer Wordle 1.1.5 Windows Support

Andy Maleh — Wed, 18 Oct 2023 23:12:03 +0000

Glimmer Wordle 1.1.5 (open-source desktop game) has just been released with official support for Windows. Although the game worked on Windows before, thanks to the platform-independent Glimmer DSL for SWT GUI library it was built with, styling was not tweaked for Windows till now in version 1.1.5.

To give you an idea of how the game flows, here is an animated Gif with it running on the Mac:

Here is the Glimmer code of the GUI View:

class Wordle
  module View
    class AppView
      include Glimmer::UI::CustomShell

      COLOR_TO_BACKGROUND_COLOR_MAP = {
        green:  rgb(106, 170, 100),
        yellow: rgb(201, 180, 88),
        gray:   rgb(120, 124, 126),
      }

      COLOR_TO_TEXT_COLOR_MAP = {
        green:  :white,
        yellow: :white,
        gray:   :white,
      }

      ALPHABET_LAYOUTS = {
        alphabetical: [
          %w[A B C D E F G H I J],
          %w[K L M N O P Q R S],
          %w[T U V W X Y Z],
        ],
        qwerty: [
          %w[Q W E R T Y U I O P],
          %w[A S D F G H J K L],
          %w[Z X C V B N M],
        ],
      }

      CONFIG_FILE = File.join(Dir.home, '.glimmer_wordle')

      before_body do
        @display = display {
          on_about {
            display_about_dialog
          }
          on_preferences {
            display_about_dialog
          }
          on_swt_keydown do |key_event|
            if key_event.keyCode == 8
              do_backspace
            elsif key_event.keyCode == swt(:arrow_left)
              do_left
            elsif key_event.keyCode == swt(:arrow_right)
              do_right
            elsif key_event.keyCode == swt(:cr)
              if @five_letter_word.status == :in_progress
                do_guess
              else
                do_restart
              end
            elsif valid_character?((key_event.keyCode.chr rescue ''))
              do_type(key_event.keyCode.chr)
            end
          end
        }
        @five_letter_word = Model::FiveLetterWord.new
        config = load_config
        @alphabet_layout = config[:alphabet_layout] || :alphabetical
      end

      ## Add widget content inside custom shell body
      ## Top-most widget must be a shell or another custom shell
      #
      body {
        shell(:no_resize) {
          grid_layout {
            margin_width 10
            margin_height 10
            vertical_spacing 0
          }

          # Replace example content below with custom shell content
          minimum_size 420, 540
          image File.join(APP_ROOT, 'icons', 'windows', "Glimmer Wordle.ico") if OS.windows?
          image File.join(APP_ROOT, 'icons', 'linux', "Glimmer Wordle.png") unless OS.windows?
          text "Glimmer Wordle"
          background :white

          app_menu_bar

          alphabet_container

          label {
            layout_data :center, :center, true, false
            text 'You have 6 tries to guess a 5-letter word'
            background :transparent if OS.windows?
          }

          word_guesser

          guess_button
        }
      }

      def app_menu_bar
        menu_bar {
          menu {
            text '&Game'

            menu_item {
              text '&Restart'

              on_widget_selected {
                do_restart
              }
            }

            menu_item {
              text 'E&xit'

              on_widget_selected {
                exit(0)
              }
            }
          }

          menu {
            text '&View'

            menu {
              text 'Alphabet &Layout'

              menu_item(:radio) {
                text '&Alphabetical'
                selection @alphabet_layout == :alphabetical

                on_widget_selected {
                  self.alphabet_layout = :alphabetical
                  rebuild_alphabet_container
                }
              }

              menu_item(:radio) {
                text '&Qwerty'
                selection @alphabet_layout == :qwerty

                on_widget_selected {
                  self.alphabet_layout = :qwerty
                  rebuild_alphabet_container
                }
              }
            }
          }

          menu {
            text '&Help'

            menu_item {
              text '&Instructions'

              on_widget_selected {
                display_instructions_dialog
              }
            }

            menu_item {
              text '&About'

              on_widget_selected {
                display_about_dialog
              }
            }
          }
        }
      end

      def display_instructions_dialog
        message_box(body_root) {
          text 'Instructions'
          message <<~MULTI_LINE_STRING
            Make 6 guesses for a 5-letter word.

            If you enter a letter that is part of the word, and at the right location, it becomes green,

            If you enter a letter that is part of the word, but at the wrong location, it becomes yellow.

            If you enter a letter that is not part of the word, it becomes red.
          MULTI_LINE_STRING
        }.open
      end

      def display_about_dialog
        message_box(body_root) {
          text 'About'
          message "Glimmer Wordle #{VERSION}\n\n#{LICENSE}"
        }.open
      end

      def alphabet_container
        @alphabet_container = composite {
          layout_data(:center, :center, true, false)

          grid_layout {
            margin_width 0
            margin_height 0
            vertical_spacing 0
          }

          background :white

          alphabets
        }
      end

      def alphabets
        alphabet_row(ALPHABET_LAYOUTS[@alphabet_layout][0]) {
          layout_data(:center, :center, true, false) {
            width_hint 318
            height_hint 50
          }
        }

        alphabet_row(ALPHABET_LAYOUTS[@alphabet_layout][1]) {
          layout_data(:center, :center, true, false) {
            width_hint 288
            height_hint 50
          }
        }

        alphabet_row(ALPHABET_LAYOUTS[@alphabet_layout][2]) {
          layout_data(:center, :center, true, false) {
            width_hint 222
            height_hint 50
          }
        }
      end

      def alphabet_row(alphabet_characters, &block)
        canvas {
          block.call
          background :white

          @alphabet_rectangles ||= []
          @alphabet_borders ||= []
          @alphabet_letters ||= []
          alphabet_characters.each_with_index do |alphabet_character, i|
            @alphabet_rectangles << rectangle(1 + i*32, @alphabet_row_offset_y, 28, 28) {
              background :transparent

              @alphabet_borders << rectangle {
                foreground :gray
                line_width 2
              }

              @alphabet_letters << text(alphabet_character, :default, [:default, OS.linux? ? 5 : (OS.windows? ? 1 : 0)]) {
                font alphabet_font
              }
            }
          end
        }
      end

      def alphabet_layout_alphabets
        ALPHABET_LAYOUTS[@alphabet_layout].reduce(:+)
      end

      def word_guesser
        @canvasses ||= []
        margin_x = 5
        margin_y = 5
        @canvasses << canvas {
          layout_data(:center, :center, true, false) {
            width_hint 230
            height_hint 50
          }
          background :white
          focus true

          @rectangles = []
          @borders = []
          @letters = []
          5.times do |i|
            @rectangles << rectangle(margin_x + i*45, margin_y, 40, 40) {
              background :transparent

              @borders << rectangle {
                foreground i == 0 ? :title_background : :gray
                line_width 2
              }

              @letters << text('', :default, [:default, OS.linux? ? 6 : (OS.windows? ? 1 : 0)]) {
                font letter_font
              }
            }
          end
        }
      end

      def guess_button
        @guess_button = button {
          layout_data :center, :center, true, false
          text 'Guess'

          on_widget_selected do
            do_guess
          end
        }
      end

      def do_backspace
        @letter = @letters[highlighted_letter_index]
        if @letter.string != ''
          index_to_delete = highlighted_letter_index
        else
          index_to_delete = [highlighted_letter_index - 1, 0].max
        end
        @letter = @letters[index_to_delete]
        @letter.string = ''
        @borders.each { |caret| caret.foreground = :gray} # refactor this reusable code into a method that highlights the caret
        @borders[index_to_delete].foreground = :title_background
      end

      def do_guess
        return if !word_filled_up?
        word = @letters.map(&:string).join
        if invalid_word?(word)
          message_box {
            text 'Invalid Word'
            message "The word you entered is not an allowed guess!\n\nPlease try another word!"
          }.open
          return
        end
        guess_result = @five_letter_word.guess(word)
        update_guess_word_background_colors(guess_result)
        update_alphabet_background_colors
        if @five_letter_word.status == :in_progress
          @guess_button.dispose
          body_root.content {
            word_guesser
            guess_button
          }
        else
          @guess_button.dispose
          body_root.content {
            @restart_button = button {
              layout_data :center, :center, true, false
              text 'Restart'
              focus true

              on_widget_selected do
                do_restart
              end
            }
          }
          display_share_text_dialog
        end
        body_root.layout(true, true)
        body_root.pack(true)
      end

      def highlighted_letter_index
        @borders.each_with_index.find {|border, i| border.foreground.first == color(:title_background).swt_color }.last
      end

      def do_type(character)
        index = highlighted_letter_index
        @letter = @letters[index]
        @letter.string = character.upcase
        if @letters.any? {|letter| letter.string == ''}
          @borders.each { |caret| caret.foreground = :gray} # refactor this reusable code into a method that highlights the caret
          @borders[index == 4 ? 4 : index + 1].foreground = :title_background
        end
      end

      def do_left
        index = [highlighted_letter_index - 1, 0].max
        @borders.each { |caret| caret.foreground = :gray} # refactor this reusable code into a method that highlights the caret
        @borders[index].foreground = :title_background
      end

      def do_right
        index = [highlighted_letter_index + 1, @letters.count - 1].min
        @borders.each { |caret| caret.foreground = :gray} # refactor this reusable code into a method that highlights the caret
        @borders[index].foreground = :title_background
      end

      def do_restart
        @share_text_dialog&.close
        alphabet_layout_alphabets.each_with_index do |alphabet_character, i|
          @alphabet_borders[i].foreground = :gray
          @alphabet_rectangles[i].background = :white
          @alphabet_letters[i].foreground = :black
        end
        @restart_button&.dispose
        @canvasses.dup.each(&:dispose)
        @canvasses.clear
        @guess_button&.dispose
        body_root.content {
          word_guesser
          guess_button
        }
        body_root.layout(true, true)
        body_root.pack(true)
        @five_letter_word.refresh
      end

      def update_guess_word_background_colors(guess_result)
        guess_result.each_with_index do |result_color, i|
          background_color = COLOR_TO_BACKGROUND_COLOR_MAP[result_color]
          @borders[i].foreground = background_color
          @rectangles[i].background = background_color
          @letters[i].foreground = COLOR_TO_TEXT_COLOR_MAP[result_color]
          async_exec { @canvasses.last.redraw }
        end
      end

      def update_alphabet_background_colors
        alphabet_layout_alphabets.each_with_index do |alphabet_character, i|
          result_color = @five_letter_word.colored_alphabets[alphabet_character.downcase]
          if result_color
            background_color = COLOR_TO_BACKGROUND_COLOR_MAP[result_color]
            @alphabet_borders[i].foreground = background_color
            @alphabet_rectangles[i].background = background_color
            @alphabet_letters[i].foreground = COLOR_TO_TEXT_COLOR_MAP[result_color]
          end
        end
      end

      def word_filled_up?
        @letters.find {|letter| letter.string == ''}.nil?
      end

      def invalid_word?(word)
        !Model::FiveLetterWord::WORLD_ALLOWED_GUESSES.include?(word.downcase)
      end

      def valid_character?(character)
        ((65..90).to_a + (97..122).to_a).map {|n| n.chr}.include?(character)
      end

      def display_share_text_dialog
        result = "#{@five_letter_word.answer.upcase}\n\n#{emoji_result}"

        Clipboard.copy(result)

        @share_text_dialog = dialog(body_root) {
          grid_layout
          text 'Share Result'

          label {
            layout_data :center, :center, true, false
            text 'Result is copied to clipboard!'
          }

          styled_text {
            layout_data :fill, :fill, true, true
            editable false
            caret nil
            alignment :center
            font name: 'Segoe UI Emoji' if OS.windows?
            text result
          }
        }
        @share_text_dialog.open
      end

      def alphabet_font
        the_font = {style: :bold, height: 28}
        the_font.merge!(name: 'Helvetica', height: 21) if OS.linux?
        the_font.merge!(name: 'Arial', height: 25) if OS.windows? 
        the_font
      end

      def letter_font
        the_font = {style: :bold, height: 40}
        the_font.merge!(name: 'Helvetica', height: 30) if OS.linux?
        the_font.merge!(name: 'Arial', height: 32) if OS.windows? 
        the_font
      end

      def dispose_alphabet_container_children
        @alphabet_rectangles.clear
        @alphabet_borders.clear
        @alphabet_letters.clear
        @alphabet_container.children.each(&:dispose)
      end

      def rebuild_alphabet_container
        dispose_alphabet_container_children
        @alphabet_container.content {
          alphabets
        }
        @alphabet_container.layout(true, true)
        @alphabet_container.pack(true)
        update_alphabet_background_colors
      end

      def alphabet_layout=(value)
         @alphabet_layout = value
         save_config
      end

      def new_config
        {
          alphabet_layout: @alphabet_layout
        }
      end

      def save_config
        File.write(CONFIG_FILE, YAML.dump(new_config))
      rescue => e
        puts e.full_message
      end

      def load_config
        File.exist?(CONFIG_FILE) ? YAML.load(File.read(CONFIG_FILE)) : {}
      rescue => e
        puts e.full_message
        {}
      end

      def emoji_result
        result = ''
        @five_letter_word.guess_results.each do |row|
          row.each do |result_color|
            case result_color
            when :green
              result << "🟩"
            when :yellow
              result << "🟨"
            when :gray
              result << "⬜"
            end
          end
          result << "\n"
        end
        result
      end
    end
  end
end

GitHub: https://github.com/AndyObtiva/glimmer_wordle

RubyGem: https://rubygems.org/gems/glimmer_wordle

Blog Post Announcement: https://andymaleh.blogspot.com/2023/10/glimmer-wordle-115.html

Intro to Ruby in the Browser (Talk Video)

Andy Maleh — Fri, 08 Sep 2023 00:46:17 +0000

Matz mentioned in his RubyConf 2022 keynote speech that in the future of Ruby, maybe we could start replacing JavaScript with Ruby in the browser...

YouTube Video:

Intro to Ruby in the Browser - YouTube

Montreal.rb September, 2023 Talk - Intro to Ruby in the Browser - Andy Maleh, Senior Software Engineer, LexopMatz mentioned in his RubyConf 2022 keynote spee...

youtube.com

Blog Post:

https://andymaleh.blogspot.com/2023/09/montrealrb-sep-2023-intro-to-ruby-in.html

Every True Rubyist Builds Their Own Code Editor in Ruby!

Andy Maleh — Tue, 15 Aug 2023 01:45:23 +0000

(originally posted on the Code Master Blog at https://andymaleh.blogspot.com/2023/08/every-true-rubyist-builds-their-own.html)

Gladiator (Glimmer Editor) 0.11.0 has just been released! It is my personal day-to-day code editor that I have built with Glimmer DSL for SWT in Ruby (using JRuby). It has syntax highlighting support for 40+ programming languages, split pane support with drag and drop, file look up support, directory tree navigation support, and many smart editing keyboard shortcuts. I use it for professional Ruby on Rails software engineering too.

That said, I am no code editor building expert, so Gladiator looks ugly! But, I love it because I built it 100% myself. Every self respecting Senior Software Engineer out there should build their own code editor, even if just as a toy app to later be discarded in favor of another code editor (though they might grow to prefer their own). And, if they are Rubyists, they should build their code editor in Ruby (whether using MRI Ruby, JRuby or Opal Ruby). If you think of yourself as a Ruby Senior Software Engineer, but cannot build your own code editor in Ruby, there are serious holes in your skillset!! Explore Glimmer libraries for many Ruby options to help you start the code editor building challenge and journey, whether using the Fukuoka Ruby 2022 Award Winning Glimmer DSL for LibUI, the 100% feature-complete JRuby-based Glimmer DSL for SWT, the brand new Glimmer DSL for WX, the Linux-focused Glimmer DSL for GTK, Glimmer DSL for Tcl/Tk, Glimmer DSL for FXRuby, Glimmer DSL for Swing, Glimmer DSL for JavaFX, or Glimmer DSL for Opal.

Nowadays, I see many Software Engineers on the Internet and social media who claim to be "Rubyists", but use non-Ruby code editors and non-Ruby frontend technologies, and that comes across as part hypocrisy and part lost opportunity!! After all, if they truly believed in Ruby, they would be building more things in it. Computer processors are so fast nowadays that many of Ruby's performance trade-offs are negligible in practice, except in some niche programming specialties like numerical computing, realtime systems, low-level programming, and performance-intensive game development. But sadly, in the last decade, many fake "Rubyists" entered the Ruby community just to associate with the "cool" factor of Ruby or to obtain Ruby job salaries without truly believing in Ruby 100% or even fully understanding the Ruby way of doing things.

Thankfully, there are many litmus tests out there that reveal true Rubyists from fake "Rubyists", and one of them is whether a Ruby Software Engineer has built their own code editor in Ruby or not, or if they at least use a Ruby-based code editor like Redcar, Arcadia, or Gladiator, among others. Personally, I do not just write Ruby code in a web backend using Rails. I also write all my desktop applications in Ruby using Glimmer, including my code editor Gladiator, and I try to even build web frontend in Ruby using Opal Ruby.

Just think of how great it would be if the Ruby community had a feature-rich Ruby-scriptable code editor / IDE that makes it possible to build plug-ins with highly maintainable and productive Ruby code. It does not have to support every programming language out there. It can just be a Ruby community niche thing. With such a Ruby-based code editor, Rubyists would be practicing what they preach regarding the productivity/maintainability of Ruby programming by using Ruby to build the very tools they use in day-to-day Ruby software engineering.

If You Liked Shoes, You'll Love Glimmer!

Andy Maleh — Fri, 23 Jun 2023 02:43:39 +0000

A new Glimmer FAQ (Frequently Asked Questions) section has been added to the Glimmer project README on GitHub in order to answer questions like "How do Glimmer GUI DSLs compare to Shoes?" and "What is the difference between Glimmer and Glimmer DSL for SWT?", among others.

I am including the Glimmer FAQ below for your convenience. If you have other questions that are not answered in the Glimmer FAQ, please ask your questions in a comment.

How do Glimmer GUI DSLs compare to Shoes?

If you liked Shoes, you'll love Glimmer!

That is because [Glimmer]((https://github.com/AndyObtiva/glimmer) does everything that Shoes did, but with a lighter and better GUI DSL (Graphical User Interface Domain Specific Language) that addresses all the issues that Shoes suffered from, such as:

Shoes does not allow code in Shoes blocks to use variables defined outside of Shoes blocks in a straightforward manner as it changes self inside Shoes blocks, breaking Ruby expectations and producing confusing behavior. On the other hand, Glimmer DSL blocks are 100% standard Ruby blocks that represent real closures, so they enable usage of variables defined outside the blocks in a 100% standard Ruby way.
Shoes lacks support for high-quality business widget controls (View components) like table and tree. Glimmer GUI DSLs that are feature complete like [Glimmer DSL for SWT]((https://github.com/AndyObtiva/glimmer-dsl-swt) do support table and tree widgets. Some non-final Glimmer GUI DSLs like Glimmer DSL for LibUI support the table control too.
Shoes does not encourage proper separation of concerns with a correct MVC architecture (Model-View-Controller), resulting in a lot of non-presentation logic mixed with View code. Glimmer GUI DSLs do support proper separation of concerns 100% following the MVC or MVP (Model-View-Presenter) architecture by default.
Shoes does not provide a simple way for connecting View components to Model data. Glimmer GUI DSLs provide full bidirectional/unidirectional data-binding support out of the box that provides the terest code syntax for connecting Views to Models and keeping them in sync.
Shoes does not support a native mechanism for building custom View components. Glimmer GUI DSLs do support the ability to build custom widgets (aka controls or View components), custom windows (aka shells), and custom shapes (canvas graphics), enabling software engineers to expand a Glimmer DSL’s vocabulary with new keywords representing brand new visual concepts. That results in much higher productivity by enabling the reuse of higher visual concepts as their own self-encapsulated components.
Shoes does not expose native features of its wrapped GUI toolkit. Glimmer GUI DSLs do expose all native features of their wrapped GUI toolkits, thus enabling developers to use a GUI toolkit like SWT directly when needed on top of using Glimmer DSL for SWT (a widget initialized via SWT directly could be passed to Glimmer DSL for SWT to wrap as a Glimmer WidgetProxy object and integrate with other Glimmer initialized WidgetProxy objects). That facilitates the 80/20 rule of having Glimmer GUI DSLs automate 80% of the work while still enabling software engineers to reach down to the low-level GUI toolkit API in 20% of the cases when needed (though in practice, it's probably more like 1% of the cases).

It is great that Shoes paved the way for creating desktop GUI DSLs in Ruby. Glimmer took that approach to its maximum and produced the ultimate evolution of Shoes.

What is the difference between Glimmer and Glimmer DSL for SWT?

Glimmer DSL for SWT was the first GUI DSL created as part of the Glimmer project to enable building desktop applications, and it was originally just called Glimmer. It relied on the Eclipse SWT library to render native GUI (Graphical User Interface) widget controls (View components) on every platform (Mac, Windows, and Linux). Eventually, the idea of a Glimmer DSL proved itself so successful and viable for building desktop apps with a fraction of the effort needed in other programming languages/technologies that it was expanded to support other GUI toolkits. So, Glimmer got renamed to Glimmer DSL for SWT, and the core Glimmer DSL engine got extracted to Glimmer (becoming a DSL framework), which then got reused to build other Glimmer GUI DSLs such as Glimmer DSL for LibUI and Glimmer DSL for GTK, among many others.

What is the difference between Glimmer DSL for SWT and Glimmer DSL for LibUI?

Both Glimmer DSL for SWT and Glimmer DSL for LibUI support rendering platform native widgets/controls, which enable building native desktop apps that look 100% native on every platform (Mac, Windows, and Linux).

However, Glimmer DSL for SWT runs in JRuby (Ruby running in the JVM [Java Virtual Machine]) whereas Glimmer DSL for LibUI runs in standard Ruby (aka MRI Ruby or CRuby).

Glimmer DSL for SWT is 100% feature-complete and has a final release. Glimmer DSL for LibUI is 100% complete as far as covering the LibUI features, but LibUI itself is still a mid-alpha library, so it is missing a few features that will get added eventually.

What is the difference between Glimmer DSL for LibUI, Glimmer DSL for GTK, Glimmer DSL for Tk, Glimmer DSL for FX, and Glimmer DSL for WX?

All of Glimmer DSL for LibUI, Glimmer DSL for GTK, Glimmer DSL for Tk, Glimmer DSL for FX, and Glimmer DSL for WX run in standard Ruby (aka MRI Ruby or CRuby).

However, only Glimmer DSL for LibUI and Glimmer DSL for WX render native controls on every platform. The other libraries do not render native controls on every platform, albeit Glimmer DSL for GTK renders native controls on Linux distributions utilizing Gnome.

Also, Glimmer DSL for LibUI does not require any prerequisites beyond installing the Ruby gem, so you can install it and get instant GUI with very little effort, whereas Glimmer DSL for GTK, Glimmer DSL for Tk, Glimmer DSL for FX, and Glimmer DSL for WX do require extra dependencies in general, albeit Glimmer DSL for GTK has everything it needs in Linux Gnome flavors and both Glimmer DSL for FX and Glimmer DSL for WX have everything they need on Windows by including pre-built binaries.

You may learn more about the differences between various Glimmer DSLs by checking out the Glimmer DSL Comparison Table.

What is the difference between Glimmer DSL for SWT, Glimmer DSL for Swing, and Glimmer DSL for JFX?

Glimmer DSL for SWT relies on the Eclipse SWT library, which renders native widgets on every platform (Mac, Windows, and Linux) to build desktop apps that look 100% native on every platform (Mac, Windows, and Linux).

Glimmer DSL for Swing relies on Swing, which does not render native widgets on every platform. Glimmer DSL for JFX relies on JavaFX, which also does not render native widgets on every platform.

Also, SWT ensures initializing native widgets in memory using non-Java code (e.g. C/C++), thus ensuring native OS high performance for rendering native widgets without being prone to Java garbage collection pauses. On the other hand, Swing and JavaFX initialize non-native widgets in memory using Java code, thus depend on the performance of the Java Virtual Machine while being prone to Java garbage collection pauses. As a result, SWT ensures a better user experience than Swing and JavaFX.

You may learn more about the differences between various Glimmer DSLs by checking out the Glimmer DSL Comparison Table.

Why not just use SWT, LibUI, GTK, Tk, FOX Toolkit, wxWidgets, Swing, or JavaFX from Ruby directly?

GUI Toolkits implement low-level GUI rendering concerns. And, while some of them do offer object-oriented APIs, their APIs are very verbose and imperative by design due to being low-level APIs. As such, they require software engineers to write a lot more low-level code that does not map intuitively to the structure of the GUI visually, slowing down productivity and making maintainability more expensive.

Glimmer GUI DSLs on the other hand are fully declarative and follow Rails' Convention Over Configuration maxim by including smart defaults and automation of low-level details, so they enable software engineers to write the simplest most minimalistic code that maps to the actual visual GUI concepts, maximizing productivity and resulting in code that is very maintainable and intuitive to reason about.

Furthermore, Glimmer GUI DSLs offer advanced Bidirectional/Unidirectional Data-Binding Support, which enables syncing View data with Model attributes with the tersest code syntax possible to greatly simplify reasoning about the code while supporting proper separation of concerns through correct adherence to MVC (Model-View-Controller) and MVP (Model-View-Presenter).

That's in addition to scaffolding and native executable packaging in some Glimmer GUI DSLs. As a result, productivity increases even further and maintainability becomes even less expensive, thus enabling software engineers to deliver pieces of software in a matter of minutes or hours for desktop application MVPs (Minimal Viable Products). As such, Glimmer GUI DSLs significantly shorten the feedback cycle and enable incrementally releasing features at a very fast pace, not possible with GUI toolkit low-level APIs.

Check out the up-to-date Glimmer FAQ on the GitHub page.

Originally posted on the Code Master Blog:
https://andymaleh.blogspot.com/2023/06/if-you-liked-shoes-youll-love-glimmer.html