glimmer-dsl-web 0.6.3 → 0.6.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/LICENSE.txt +1 -1
- data/README.md +17 -202
- data/VERSION +1 -1
- data/glimmer-dsl-web.gemspec +4 -4
- metadata +6 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: bef64d09d4fdc73c08a83c9b3014a8a28685d0d261fb6af08ca2d68242792579
|
|
4
|
+
data.tar.gz: 66f34cb59d7423d8d84abca97e9d7425cd7fc344865e4a8eb170345116c7c4a1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 59b52a1d608eccbc4dcb16a7f3dc7d9c3190c23c32a1f9b9b465efae5fcb47b5d53b89214597bb3e1b938eb4eeeb046c052dbfe8ae25c71a7ba9af46f5902bad
|
|
7
|
+
data.tar.gz: 4c1edfc03d78c96b61329bfb854177c6965e7536599c9e0367a180b720fc3d3f34ddb6a01c7245f97d601d668b1a03fddf82bd7012f4a3531217fcbe742f8812
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 0.6.4
|
|
4
|
+
|
|
5
|
+
- Support Rails 7.1 & 7.2 by upgrading to opal-rails 2.0.4
|
|
6
|
+
|
|
3
7
|
## 0.6.3
|
|
4
8
|
|
|
5
9
|
- Fix issue with not finding `inner_html=` on self in `ElementProxy` after Content Data-Binding and removal, due to forgetting to unregister all Content Data-Binding observers on remove of an element
|
data/LICENSE.txt
CHANGED
data/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.6.
|
|
1
|
+
# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.6.4 (Beta)
|
|
2
2
|
## Ruby-in-the-Browser Web Frontend Framework
|
|
3
3
|
### The "Rails" of Frontend Frameworks!!!
|
|
4
4
|
#### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
|
|
@@ -7,19 +7,21 @@
|
|
|
7
7
|
|
|
8
8
|
**(Based on Original [Glimmer](https://github.com/AndyObtiva/glimmer) Library Handling World’s Ruby GUI Needs Since 2007. Beware of Imitators!)**
|
|
9
9
|
|
|
10
|
-
**(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi)
|
|
10
|
+
**(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) / [Frontend Ruby with Glimmer DSL for Web \[Montreal.rb\]](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE) / [Frontend Ruby with Glimmer DSL for Web \[/dev/mtl 2024\]](https://www.youtube.com/watch?v=J2VIY9DMJo4))**
|
|
11
|
+
|
|
12
|
+
**(Ruby Rogues Podcast: [Building Better Ruby Apps: Glimmer Component Slots and More](https://topenddevs.com/podcasts/ruby-rogues/episodes/building-better-ruby-apps-glimmer-s-component-slots-and-more-ruby-653))**
|
|
11
13
|
|
|
12
14
|
[](https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/)
|
|
13
15
|
|
|
14
|
-
You can finally
|
|
16
|
+
You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)! [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web Frontends (aka SPA: Single Page Applications) using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It supports Rails' principle of the One Person Framework by not requiring any extra developers with JavaScript expertise, yet enabling Ruby (Backend) Software Engineers to develop the Frontend with Ruby code that is better than any JavaScript code produced by JS developers. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage) (including full support for [SVG](#hello-svg)), which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) [Data-Binding](#hello-data-binding) (using `<=`) and Bidirectional (Two-Way) [Data-Binding](#hello-data-binding) (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via [Content Data-Binding](#hello-content-data-binding). Modular design is supported with [Glimmer Web Components](#hello-component), [Component Slots](#hello-component-slots), and [Component Custom Event Listeners](#hello-component-listeners). And, a Ruby CSS DSL is supported with the included [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css). To automatically convert legacy HTML & CSS code to Glimmer DSL Ruby code, Software Engineers could use the included [`html_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-xml#html-to-glimmer-converter) and [`css_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-css#css-to-glimmer-converter) commands. Many [samples](#samples) are demonstrated in the [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) (there is a very minimal [Standalone [No Rails] static site sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too).
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
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](https://www.youtube.com/watch?v=4AdcfbI6A4c), 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. Also, with Frontend Ruby SPA (Single Page Applications), companies can cut their hiring budget in half by having Backend Ruby Software Engineers do Frontend Development in Ruby! [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c) finally fulfills every smart 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.
|
|
17
19
|
|
|
18
|
-
[Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) aims to be a very simple Ruby-based drop-in replacement for your existing JavaScript Frontend library (e.g. React, Angular, Vue, Ember, Svelte) or your JavaScript Frontend layer in general. It does not change how your Frontend interacts with the Backend, meaning you can continue to write Rails Backend API endpoints as needed and make HTTP/Ajax requests or read data embedded in elements, but from [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c). Whatever is possible in JavaScript is possible when using Glimmer DSL for Web as it integrates with any existing JavaScript library. The [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) demonstrates how to [make HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_api.rb) and how to [integrate with a JavaScript library](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/views/layouts/application.html.erb) (highlightjs) that performs [code syntax highlighting](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector.rb). [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) currently runs on [Opal](https://opalrb.com/) ([Fukuoka Ruby 2023 Award Winner](https://www.digitalfukuoka.jp/topics/228?locale=ja)), a Ruby-to-JavaScript transpiler. In the future, it might support other Frontend Ruby environments, such as [ruby.wasm](https://github.com/ruby/ruby.wasm).
|
|
20
|
+
[Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) aims to be a very simple Ruby-based SPA drop-in replacement for your existing JavaScript Frontend SPA library (e.g. React, Angular, Vue, Ember, Svelte) or your JavaScript Frontend layer in general. It does not change how your Frontend interacts with the Backend, meaning you can continue to write Rails Backend API endpoints as needed and make HTTP/Ajax requests or read data embedded in elements, but from [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c). Whatever is possible in JavaScript is possible when using Glimmer DSL for Web as it integrates with any existing JavaScript library. The [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) demonstrates how to [make HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_api.rb) and how to [integrate with a JavaScript library](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/views/layouts/application.html.erb) (highlightjs) that performs [code syntax highlighting](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector.rb). [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) currently runs on [Opal](https://opalrb.com/) ([Fukuoka Ruby 2023 Award Winner](https://www.digitalfukuoka.jp/topics/228?locale=ja)), a Ruby-to-JavaScript transpiler. In the future, it might support other Frontend Ruby environments, such as [ruby.wasm](https://github.com/ruby/ruby.wasm).
|
|
19
21
|
|
|
20
22
|
After looking through the [samples](#samples) below, read the [FAQ (Frequently Asked Questions)](#faq) to learn more about how Glimmer DSL for Web compares to other approaches/libraries like Hotwire (Turbo), Phlex, ViewComponent, Angular, Vue, React, Svelte, and other JS frameworks.
|
|
21
23
|
|
|
22
|
-
Anyone not considering this kind of technology in 2024 is like someone stuck in the dark ages riding horse carriage (e.g. JavaScript developers using frameworks like React) despite
|
|
24
|
+
Anyone not considering this kind of technology in 2024 is like someone stuck in the dark ages riding horse carriage (e.g. JavaScript developers using frameworks like React) despite cars having been invented already and providing exponential jumps in productivity (way more than small linear jumps provided by some JavaScript libraries, which are akin of modifying horse carriage). Obviously, those who do make this jump will end up winning their work over from customers and beating the competition while delivering the best Frontend value possible to customers.
|
|
23
25
|
|
|
24
26
|
(Attention Software Engineers, Bloggers, and Contributors: Please use Glimmer DSL for Web in web projects, blog about it, and submit a PR with your article, project, and/or open-source-repo added to the README. Also, I give everyone permission to present this project at their local Ruby user group, local Software Engineering meetup, or Software Conferences outside of North America (e.g. Europe). I am willing to present at Software Conferences in North America and Japan (the birthplace of Ruby) only. If you want to have this project presented elsewhere, like in Europe or South America, feel free to prepare and give your own presentations of the project, and if needed, hit me up for help on the [Glimmer Gitter chat](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge))
|
|
25
27
|
|
|
@@ -1328,7 +1330,6 @@ Learn more about the differences between various [Glimmer](https://github.com/An
|
|
|
1328
1330
|
- [Prerequisites](#prerequisites)
|
|
1329
1331
|
- [Setup](#setup)
|
|
1330
1332
|
- [Rails 7](#rails-7)
|
|
1331
|
-
- [Rails 6](#rails-6)
|
|
1332
1333
|
- [Standalone (No Rails)](#standalone-no-rails)
|
|
1333
1334
|
- [Usage](#usage)
|
|
1334
1335
|
- [Supported Glimmer DSL Keywords](#supported-glimmer-dsl-keywords)
|
|
@@ -1371,8 +1372,8 @@ Learn more about the differences between various [Glimmer](https://github.com/An
|
|
|
1371
1372
|
|
|
1372
1373
|
[Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) will begin by supporting [Opal Ruby](https://opalrb.com/) on [Rails](https://rubyonrails.org/). [Opal](https://opalrb.com/) ([Fukuoka Ruby 2023 Award Winner](https://www.digitalfukuoka.jp/topics/228?locale=ja)) is a lightweight Ruby to JavaScript transpiler that results in small downloadables compared to WASM. In the future, the project might grow to support [Ruby WASM](https://github.com/ruby/ruby.wasm) as an alternative to [Opal Ruby](https://opalrb.com/) that could be switched to with a simple configuration change.
|
|
1373
1374
|
|
|
1374
|
-
- Ruby 3.
|
|
1375
|
-
- Rails 7: [https://github.com/rails/rails](https://github.com/rails/rails)
|
|
1375
|
+
- Ruby 3.1+
|
|
1376
|
+
- Rails 7.0-7.2: [https://github.com/rails/rails](https://github.com/rails/rails)
|
|
1376
1377
|
|
|
1377
1378
|
## Setup
|
|
1378
1379
|
|
|
@@ -1391,7 +1392,7 @@ Please follow these steps to setup.
|
|
|
1391
1392
|
Install a Rails 7 gem:
|
|
1392
1393
|
|
|
1393
1394
|
```
|
|
1394
|
-
gem install rails -v7.0.
|
|
1395
|
+
gem install rails -v7.0.8.6
|
|
1395
1396
|
```
|
|
1396
1397
|
|
|
1397
1398
|
Start a new Rails 7 app:
|
|
@@ -1403,7 +1404,7 @@ rails new glimmer_app_server
|
|
|
1403
1404
|
Add the following to `Gemfile`:
|
|
1404
1405
|
|
|
1405
1406
|
```
|
|
1406
|
-
gem 'glimmer-dsl-web', '~> 0.6.
|
|
1407
|
+
gem 'glimmer-dsl-web', '~> 0.6.4'
|
|
1407
1408
|
```
|
|
1408
1409
|
|
|
1409
1410
|
Run:
|
|
@@ -1579,6 +1580,8 @@ That produces:
|
|
|
1579
1580
|
...
|
|
1580
1581
|
```
|
|
1581
1582
|
|
|
1583
|
+
You may delete `opal_application.rb` after confirming that the setup works because `glimmer_component` is the recommended way for serious use of Glimmer DSL for Web in Rails web apps.
|
|
1584
|
+
|
|
1582
1585
|
You may insert a Glimmer component anywhere into a Rails View using `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper` or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
|
|
1583
1586
|
|
|
1584
1587
|
To use `glimmer_component`, edit `app/helpers/application_helper.rb` in your Rails application, add `require 'glimmer/helpers/glimmer_helper'` on top and `include GlimmerHelper` inside `module`.
|
|
@@ -1605,194 +1608,6 @@ Otherwise, if you still cannot setup successfully (even with the help of the sam
|
|
|
1605
1608
|
|
|
1606
1609
|
Next, read [Usage](#usage) instructions, and check out [Samples](#samples).
|
|
1607
1610
|
|
|
1608
|
-
### Rails 6
|
|
1609
|
-
|
|
1610
|
-
(NOTE: In the future, we plan to automate the setup steps below. If you would like to help contribute that to the project, please do so and open a Pull Request.)
|
|
1611
|
-
|
|
1612
|
-
Please follow these steps to setup.
|
|
1613
|
-
|
|
1614
|
-
Install a Rails 6 gem:
|
|
1615
|
-
|
|
1616
|
-
```
|
|
1617
|
-
gem install rails -v6.1.4.6
|
|
1618
|
-
```
|
|
1619
|
-
|
|
1620
|
-
Start a new Rails 6 app (skipping webpack):
|
|
1621
|
-
|
|
1622
|
-
```
|
|
1623
|
-
rails new glimmer_app_server --skip-webpack-install
|
|
1624
|
-
```
|
|
1625
|
-
|
|
1626
|
-
Disable the `webpacker` gem line in `Gemfile`:
|
|
1627
|
-
|
|
1628
|
-
```ruby
|
|
1629
|
-
# gem 'webpacker', '~> 5.0'
|
|
1630
|
-
```
|
|
1631
|
-
|
|
1632
|
-
Add the following to `Gemfile`:
|
|
1633
|
-
|
|
1634
|
-
```ruby
|
|
1635
|
-
gem 'glimmer-dsl-web', '~> 0.6.3'
|
|
1636
|
-
```
|
|
1637
|
-
|
|
1638
|
-
Run:
|
|
1639
|
-
|
|
1640
|
-
```
|
|
1641
|
-
bundle
|
|
1642
|
-
```
|
|
1643
|
-
|
|
1644
|
-
(run `rm -rf tmp/cache` from inside your Rails app if you upgrade your `glimmer-dsl-web` gem version from an older one to clear Opal-Rails's cache)
|
|
1645
|
-
|
|
1646
|
-
Follow [opal-rails](https://github.com/opal/opal-rails) instructions, basically running:
|
|
1647
|
-
|
|
1648
|
-
```
|
|
1649
|
-
bin/rails g opal:install
|
|
1650
|
-
```
|
|
1651
|
-
|
|
1652
|
-
To enable the `glimmer-dsl-web` gem in the frontend, edit `config/initializers/assets.rb` and add the following at the bottom:
|
|
1653
|
-
|
|
1654
|
-
```ruby
|
|
1655
|
-
Opal.use_gem 'glimmer-dsl-web'
|
|
1656
|
-
Opal.append_path Rails.root.join('app', 'assets', 'opal')
|
|
1657
|
-
```
|
|
1658
|
-
|
|
1659
|
-
To enable Opal Browser Debugging in Ruby with the [Source Maps](https://opalrb.com/docs/guides/v1.4.1/source_maps.html) feature, edit `config/initializers/opal.rb` and add the following inside the `Rails.application.configure do; end` block at the bottom of it:
|
|
1660
|
-
|
|
1661
|
-
```ruby
|
|
1662
|
-
config.assets.debug = true if Rails.env.development?
|
|
1663
|
-
```
|
|
1664
|
-
|
|
1665
|
-
Assuming this is a brand new Rails application and you do not have any Rails resources, you can scaffold the welcome resource just for testing purposes.
|
|
1666
|
-
|
|
1667
|
-
Run:
|
|
1668
|
-
|
|
1669
|
-
```
|
|
1670
|
-
rails g scaffold welcome
|
|
1671
|
-
```
|
|
1672
|
-
|
|
1673
|
-
Run:
|
|
1674
|
-
|
|
1675
|
-
```
|
|
1676
|
-
rails db:migrate
|
|
1677
|
-
```
|
|
1678
|
-
|
|
1679
|
-
Add the following to `config/routes.rb` inside the `Rails.application.routes.draw` block:
|
|
1680
|
-
|
|
1681
|
-
```ruby
|
|
1682
|
-
root to: 'welcomes#index'
|
|
1683
|
-
```
|
|
1684
|
-
|
|
1685
|
-
Also, delete the following line:
|
|
1686
|
-
|
|
1687
|
-
```erb
|
|
1688
|
-
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
|
|
1689
|
-
```
|
|
1690
|
-
|
|
1691
|
-
Clear the file `app/views/welcomes/index.html.erb` completely from all content.
|
|
1692
|
-
|
|
1693
|
-
Rename `app/assets/javascript/application.js.rb` file to `app/assets/javascript/opal_application.rb`.
|
|
1694
|
-
|
|
1695
|
-
Rename `app/assets/javascript` directory to `app/assets/opal`.
|
|
1696
|
-
|
|
1697
|
-
Edit `app/assets/config/manifest.js` and update `//= link_directory ../javascript .js` to `//= link_directory ../opal .js`:
|
|
1698
|
-
|
|
1699
|
-
```js
|
|
1700
|
-
//= link_directory ../opal .js
|
|
1701
|
-
```
|
|
1702
|
-
|
|
1703
|
-
Edit `app/views/layouts/application.html.erb` and update `<%= javascript_include_tag "application", "data-turbolinks-track": "reload" %>` to `<%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>`:
|
|
1704
|
-
|
|
1705
|
-
```erb
|
|
1706
|
-
<%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>
|
|
1707
|
-
```
|
|
1708
|
-
|
|
1709
|
-
Edit and replace `app/assets/opal/opal_application.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below):
|
|
1710
|
-
|
|
1711
|
-
```ruby
|
|
1712
|
-
require 'glimmer-dsl-web' # brings opal and other dependencies automatically
|
|
1713
|
-
|
|
1714
|
-
# Add more require-statements or Glimmer HTML DSL code
|
|
1715
|
-
```
|
|
1716
|
-
|
|
1717
|
-
Example to confirm setup is working:
|
|
1718
|
-
|
|
1719
|
-
Initial HTML Markup:
|
|
1720
|
-
|
|
1721
|
-
```html
|
|
1722
|
-
...
|
|
1723
|
-
<div id="app-container">
|
|
1724
|
-
</div>
|
|
1725
|
-
...
|
|
1726
|
-
```
|
|
1727
|
-
|
|
1728
|
-
Glimmer HTML DSL Ruby code in the frontend:
|
|
1729
|
-
|
|
1730
|
-
```ruby
|
|
1731
|
-
require 'glimmer-dsl-web'
|
|
1732
|
-
|
|
1733
|
-
include Glimmer
|
|
1734
|
-
|
|
1735
|
-
Document.ready? do
|
|
1736
|
-
# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
|
|
1737
|
-
div(parent: '#app-container') {
|
|
1738
|
-
label(class: 'greeting') {
|
|
1739
|
-
'Hello, World!'
|
|
1740
|
-
}
|
|
1741
|
-
}
|
|
1742
|
-
end
|
|
1743
|
-
```
|
|
1744
|
-
|
|
1745
|
-
That produces:
|
|
1746
|
-
|
|
1747
|
-
```html
|
|
1748
|
-
...
|
|
1749
|
-
<div id="app-container">
|
|
1750
|
-
<div data-parent="#app-container" class="element element-1">
|
|
1751
|
-
<label class="greeting element element-2">
|
|
1752
|
-
Hello, World!
|
|
1753
|
-
</label>
|
|
1754
|
-
</div>
|
|
1755
|
-
</div>
|
|
1756
|
-
...
|
|
1757
|
-
```
|
|
1758
|
-
|
|
1759
|
-
Start the Rails server:
|
|
1760
|
-
```
|
|
1761
|
-
rails s
|
|
1762
|
-
```
|
|
1763
|
-
|
|
1764
|
-
Visit `http://localhost:3000`
|
|
1765
|
-
|
|
1766
|
-
You should see:
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
You may insert a Glimmer component anywhere into a Rails View using `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper` or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
|
|
1771
|
-
|
|
1772
|
-
To use `glimmer_component`, edit `app/helpers/application_helper.rb` in your Rails application, add `require 'glimmer/helpers/glimmer_helper'` on top and `include GlimmerHelper` inside `module`.
|
|
1773
|
-
|
|
1774
|
-
`app/helpers/application_helper.rb` should look like this after the change:
|
|
1775
|
-
|
|
1776
|
-
```ruby
|
|
1777
|
-
require 'glimmer/helpers/glimmer_helper'
|
|
1778
|
-
|
|
1779
|
-
module ApplicationHelper
|
|
1780
|
-
# ...
|
|
1781
|
-
include GlimmerHelper
|
|
1782
|
-
# ...
|
|
1783
|
-
end
|
|
1784
|
-
```
|
|
1785
|
-
|
|
1786
|
-
Note that Turbo is disabled on Glimmer elements/components. You can still use Turbo/Hotwire side by side with Glimmer DSL for Web by using one of the two technologies in every page. But, mixing them in the same pages is not recommended at the moment, so any pages loaded with Glimmer DSL for Web must be loaded without Turbo (e.g. by putting "data-turbo"="false" on anchor "a" tag links to Glimmer pages).
|
|
1787
|
-
|
|
1788
|
-
**NOT RELEASED OR SUPPORTED YET**
|
|
1789
|
-
|
|
1790
|
-
If you run into any issues in setup, refer to the [Sample Glimmer DSL for Web Rails 6 App](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails6-app) project (in case I forgot to include some setup steps by mistake).
|
|
1791
|
-
|
|
1792
|
-
Otherwise, if you still cannot setup successfully (even with the help of the sample project, or if the sample project stops working), please do not hesitate to report an [Issue request](https://github.com/AndyObtiva/glimmer-dsl-web/issues) or fix and submit a [Pull Request](https://github.com/AndyObtiva/glimmer-dsl-web/pulls).
|
|
1793
|
-
|
|
1794
|
-
Next, read [Usage](#usage) instructions, and check out [Samples](#samples).
|
|
1795
|
-
|
|
1796
1611
|
### Standalone (No Rails)
|
|
1797
1612
|
|
|
1798
1613
|
Andreas Idogawa-Wildi ([@Largo](https://github.com/Largo)) created a project that demonstrates how to use Glimmer DSL for Web standalone (without Rails):
|
|
@@ -4698,7 +4513,7 @@ end
|
|
|
4698
4513
|
- Computers serve Software Engineers (not Software Engineers serve Computers)
|
|
4699
4514
|
- Think only about real world concepts directly relevant to web page interaction and application domain model
|
|
4700
4515
|
- Modular Software Design (e.g. support for Components)
|
|
4701
|
-
- No premature
|
|
4516
|
+
- No premature optimization
|
|
4702
4517
|
|
|
4703
4518
|
## Supporting Libraries
|
|
4704
4519
|
|
|
@@ -4743,7 +4558,7 @@ Glimmer DSL for Web is a Frontend library, meaning it replaces the JavaScript la
|
|
|
4743
4558
|
|
|
4744
4559
|
**How does Glimmer DSL for Web compare to Angular, React, Vue, Svelte, or other JS frameworks?**
|
|
4745
4560
|
|
|
4746
|
-
Without delving into details, Glimmer DSL for Web is meant to be a Ruby-based drop-in replacement for Angular, React, Vue, Svelte, and other JS frameworks. Additionally, it enables writing both structure code and logic code in the same language (Ruby), greatly simplifying maintainability and improving productivity by eliminating multi-language dissonance and friction that drags down productivity as there is no need anymore to think in multiple languages unnecessarily, use XML based solutions (e.g. JSX), or use templating solutions (e.g. Mustache). Lastly, Glimmer DSL for Web supports familiar Software Engineering architectural patterns like Model-View-Controller and Model-View-Presenter, enabling Software Engineers to write the lightest and simplest code possible for building Web frontends in Ruby, with the best separation of concerns. Software Engineers can finally become happy Ruby developers by writing Ruby code in the Frontend too now in addition to the Backend.
|
|
4561
|
+
Without delving into details, Glimmer DSL for Web is meant to be a Ruby-based drop-in replacement for Angular, React, Vue, Svelte, and other JS frameworks. Glimmer Ruby code is transpiled to JavaScript, so it has JavaScript performance in general, which is not that far from that of Angular, React, or Vue. Glimmer DSL for Web has outperformed React by a factor of 66.66% in rendering 3000+ elements in a realistic app scenario that was benchmarked recently (in Oct 2024). Additionally, it enables writing both structure code and logic code in the same language (Ruby), greatly simplifying maintainability and improving productivity by eliminating multi-language dissonance and friction that drags down productivity as there is no need anymore to think in multiple languages unnecessarily, use XML based solutions (e.g. JSX), or use templating solutions (e.g. Mustache). Lastly, Glimmer DSL for Web supports familiar Software Engineering architectural patterns like Model-View-Controller and Model-View-Presenter, enabling Software Engineers to write the lightest and simplest code possible for building Web frontends in Ruby, with the best separation of concerns. Software Engineers can finally become happy Ruby developers by writing Ruby code in the Frontend too now in addition to the Backend.
|
|
4747
4562
|
|
|
4748
4563
|
**How do I have a Glimmer Web Component re-render in a similar way to how React components re-render?**
|
|
4749
4564
|
|
|
@@ -4788,7 +4603,7 @@ These features have been suggested. You might see them in a future version of Gl
|
|
|
4788
4603
|
|
|
4789
4604
|
[MIT](https://opensource.org/licenses/MIT)
|
|
4790
4605
|
|
|
4791
|
-
Copyright (c) 2023-
|
|
4606
|
+
Copyright (c) 2023-2025 - Andy Maleh.
|
|
4792
4607
|
See [LICENSE.txt](LICENSE.txt) for further details.
|
|
4793
4608
|
|
|
4794
4609
|
--
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.6.
|
|
1
|
+
0.6.4
|
data/glimmer-dsl-web.gemspec
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
# DO NOT EDIT THIS FILE DIRECTLY
|
|
3
3
|
# Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
|
|
4
4
|
# -*- encoding: utf-8 -*-
|
|
5
|
-
# stub: glimmer-dsl-web 0.6.
|
|
5
|
+
# stub: glimmer-dsl-web 0.6.4 ruby lib
|
|
6
6
|
|
|
7
7
|
Gem::Specification.new do |s|
|
|
8
8
|
s.name = "glimmer-dsl-web".freeze
|
|
9
|
-
s.version = "0.6.
|
|
9
|
+
s.version = "0.6.4"
|
|
10
10
|
|
|
11
11
|
s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
|
|
12
12
|
s.require_paths = ["lib".freeze]
|
|
13
13
|
s.authors = ["Andy Maleh".freeze]
|
|
14
|
-
s.date = "
|
|
14
|
+
s.date = "2025-01-07"
|
|
15
15
|
s.description = "Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework) enables building Web Frontends using Ruby in the Browser, as per Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with DSLs and TIMTOWTDI) and the Rails way (Convention over Configuration) in building Isomorphic Ruby on Rails Applications. It provides a Ruby HTML DSL, which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) Data-Binding (using <=) and Bidirectional (Two-Way) Data-Binding (using <=>). Dynamic rendering (and re-rendering) of HTML content is also supported via Content Data-Binding. Modular design is supported with Glimmer Web Components, Component Slots, and Component Custom Event Listeners. And, a Ruby CSS DSL is supported with the included Glimmer DSL for CSS. Many samples are demonstrated in the Rails sample app (there is a very minimal Standalone [No Rails] sample app too). You can finally live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL for Web! This gem relies on Opal Ruby.".freeze
|
|
16
16
|
s.email = "andy.am@gmail.com".freeze
|
|
17
17
|
s.extra_rdoc_files = [
|
|
@@ -106,7 +106,7 @@ Gem::Specification.new do |s|
|
|
|
106
106
|
s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.4.0"])
|
|
107
107
|
s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.2"])
|
|
108
108
|
s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2"])
|
|
109
|
-
s.add_runtime_dependency(%q<opal-rails>.freeze, ["
|
|
109
|
+
s.add_runtime_dependency(%q<opal-rails>.freeze, ["~> 2.0.4"])
|
|
110
110
|
s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1"])
|
|
111
111
|
s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.2"])
|
|
112
112
|
s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1", "< 3.0.0"])
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: glimmer-dsl-web
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.6.
|
|
4
|
+
version: 0.6.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Andy Maleh
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2025-01-07 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: glimmer
|
|
@@ -70,16 +70,16 @@ dependencies:
|
|
|
70
70
|
name: opal-rails
|
|
71
71
|
requirement: !ruby/object:Gem::Requirement
|
|
72
72
|
requirements:
|
|
73
|
-
- -
|
|
73
|
+
- - "~>"
|
|
74
74
|
- !ruby/object:Gem::Version
|
|
75
|
-
version: 2.0.
|
|
75
|
+
version: 2.0.4
|
|
76
76
|
type: :runtime
|
|
77
77
|
prerelease: false
|
|
78
78
|
version_requirements: !ruby/object:Gem::Requirement
|
|
79
79
|
requirements:
|
|
80
|
-
- -
|
|
80
|
+
- - "~>"
|
|
81
81
|
- !ruby/object:Gem::Version
|
|
82
|
-
version: 2.0.
|
|
82
|
+
version: 2.0.4
|
|
83
83
|
- !ruby/object:Gem::Dependency
|
|
84
84
|
name: opal-async
|
|
85
85
|
requirement: !ruby/object:Gem::Requirement
|