{"id":19692475,"url":"https://github.com/johansenja/quince","last_synced_at":"2025-04-29T09:31:27.043Z","repository":{"id":46804951,"uuid":"404891479","full_name":"johansenja/quince","owner":"johansenja","description":"A web framework for building React-style apps in Ruby. Check out the demo 👇","archived":false,"fork":false,"pushed_at":"2021-10-17T21:42:15.000Z","size":88,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T18:19:26.536Z","etag":null,"topics":["ruby"],"latest_commit_sha":null,"homepage":"https://quince-rb.herokuapp.com/","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johansenja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-09T22:54:38.000Z","updated_at":"2021-10-22T23:46:27.000Z","dependencies_parsed_at":"2022-09-23T05:13:53.921Z","dependency_job_id":null,"html_url":"https://github.com/johansenja/quince","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johansenja%2Fquince","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johansenja%2Fquince/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johansenja%2Fquince/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johansenja%2Fquince/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johansenja","download_url":"https://codeload.github.com/johansenja/quince/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251473284,"owners_count":21595035,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ruby"],"created_at":"2024-11-11T19:13:30.304Z","updated_at":"2025-04-29T09:31:26.665Z","avatar_url":"https://github.com/johansenja.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quince\n\n### What is Quince?\n\nQuince is an opinionated framework for building dynamic yet fully server-rendered web apps, with little to no JavaScript.\n\n### Inspired by\n\nReact, Turbo, Hotwire amongst others\n\n### Current status\n\nEarly, but [working in production](https://quince-rb.herokuapp.com/). Expect more features and\noptimisations to come, but also potential for big changes between versions in the early stages.\n\n### How it works\n\n- Define some components and `expose` them at certain routes\n- Define some interactions that can take place, which can change the state of the components, and are handled with ruby methods\n- The front end will swap out the updated components with new HTML re-rendered by the back end\n\n## Minimal 'hello world' example\n\n```ruby\n# app.rb\nrequire \"quince\"\n\nclass App \u003c Quince::Component\n    def render\n      html(\n        head,\n        body(\"hello world\")\n      )\n    end\nend\n\nexpose App, at: \"/\"\n```\n\n- Run it via\n```sh\nruby app.rb\n```\n\n- Visit `localhost:4567/`!\n\n## More complex example\n\n```ruby\nrequire 'quince'\n\nclass App \u003c Quince::Component\n    def render\n      Layout(title: \"First app\") {[\n        Counter()\n      ]}\n    end\nend\n\nclass Layout \u003c Quince::Component\n  Props(title: String)\n\n  def render\n      html(\n        head(\n            internal_scripts\n        ),\n        body(\n            h1(props.title),\n            children\n        )\n      )\n  end\nend\n\nclass Counter \u003c Quince::Component\n    State(val: Integer)\n\n    def initialize\n      @state = State.new(\n          val: params.fetch(:val, 0),\n      )\n    end\n\n    exposed def increment\n        state.val += 1\n    end\n\n    exposed def decrement\n        state.val -= 1\n    end\n\n    def render\n        div(\n            h2(\"count is #{state.val}\"),\n            button(onclick: callback(:increment)) { \"++\" },\n            button(onclick: callback(:decrement)) { \"--\" }\n        )\n    end\nend\n\nexpose App, at: \"/\"\n```\n\n#### See https://github.com/johansenja/quince-demo and https://quince-rb.herokuapp.com/ for more\n\n## Why Quince?\n\n### Why not?\n\n- You have pre-existing APIs which you want to integrate a front end with\n- You want to share the back end API with a different service\n- You want more offline functionality\n- You need a super complex/custom front end\n\n### Why?\n\n- Components \u003e templates 🧩\n- Lightweight 🪶\n- Shallow learning curve if you are already familiar with React 📈\n- Focus on your core business logic, not routes/APIs/data transfer/code sharing 🧪\n- No compilation/node_modules/yarn/js bundle size concerns - just bundler 📦\n- Get full use of Ruby's rich and comprehensive standard library 💎\n- Take advantage of Ruby's ability to wrap native libraries (eg. gems using C) ⚡️\n- Fully server-rendered responses - single source of truth 📡\n- Easy to recreate/rehydrate a pages state (almost nothing is stored in memory from JavaScript - all\n  the state is stored with the HTML document's markup)\n\n## Installation\n\nAdd this to your application's Gemfile:\n\n```ruby\ngem 'quince'\n```\n\nAnd then execute:\n\n    $ bundle install\n\nOr install it yourself as:\n\n    $ gem install quince\n\n\n## Usage notes\n\n- All HTML tags are available via a method of the same name, eg. `div()`, `section()`, `span()` - **with the exception of `para` standing in for `p` to avoid clashes with Ruby's common `Kernel#p` method**\n- All HTML attributes are available, and are the same as they would be in a regular html document, eg. `onclick` rather than `onClick` - **with the exception of a `Class`, `Max`, `Min`, `Method`** - which start with capital letters to avoid clashes with some internal methods.\n- Type checking is available at runtime for a component's `State` and `Props`, and is done in accordance with [Typed Struct](https://github.com/johansenja/typed_struct)\n- Children can be specified in one of two places, depending on what you would prefer:\n    -  as a block argument, to maintain similar readability with real html elements, where attributes come first\n        ```ruby\n        div(id: :my_div, style: \"color: red\") { h1(\"Single child\") }\n        div(id: \"div2\", style: \"color: green\") {[\n            h2(\"multiple\"),\n            h3(\"children\")\n        ]}\n        ```\n    -  as positional arguments (for convenience and cleanliness when no props are passed)\n        ```ruby\n        div(\n            h1(\"hello world\")\n        )\n        ```\n- A component's `render` method should always return a single top level element, ie. if you wanted to return 2 elements you should wrap them in a `div`\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.\n\nTo install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/johansenja/quince.\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohansenja%2Fquince","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohansenja%2Fquince","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohansenja%2Fquince/lists"}