{"id":21153163,"url":"https://github.com/hyperstack-org/todo-compare","last_synced_at":"2025-10-30T23:16:55.623Z","repository":{"id":95907210,"uuid":"177678839","full_name":"hyperstack-org/todo-compare","owner":"hyperstack-org","description":"Follows the medium series: The Exact Same App In Hyperstack","archived":false,"fork":false,"pushed_at":"2019-04-09T09:40:33.000Z","size":199,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":7,"default_branch":"part-i","last_synced_at":"2025-04-04T22:21:48.516Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/hyperstack-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-03-25T23:13:58.000Z","updated_at":"2022-05-01T03:42:59.000Z","dependencies_parsed_at":"2023-09-01T05:32:30.757Z","dependency_job_id":null,"html_url":"https://github.com/hyperstack-org/todo-compare","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hyperstack-org/todo-compare","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Ftodo-compare","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Ftodo-compare/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Ftodo-compare/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Ftodo-compare/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperstack-org","download_url":"https://codeload.github.com/hyperstack-org/todo-compare/tar.gz/refs/heads/part-i","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Ftodo-compare/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264440479,"owners_count":23608720,"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":[],"created_at":"2024-11-20T10:49:34.292Z","updated_at":"2025-10-30T23:16:55.565Z","avatar_url":"https://github.com/hyperstack-org.png","language":"Ruby","readme":"# The Exact Same App In Hyperstack\n\nThis is repo contains a complete working Todo app, originally described in an excellent [blog post](https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd) by [Sunil Sandhu](https://medium.com/@sunilsandhu) that compares Vue and React.\n\nI took the same app and converted it to Ruby using the [Hyperstack](https://hyperstack.org) framework.  The results are documented in a series of blog posts on Medium:\n\n+ [Part I](https://medium.com/@mitch_23203/the-exact-same-app-in-hyperstack-7f281cef46ca)\n+ [Part II](https://medium.com/@mitch_23203/the-exact-same-app-in-hyperstack-part-ii-5b062074ec20)\n+ Part III (coming soon)\n\n#### Structure of The Hyperstack App\n\nA Hyperstack App is a Rails Application with an additional `hyperstack` directory.  Almost all the coding takes place in this `app/hyperstack` directory.  This is all setup for you when you install Hyperstack. Here is the structure of the `app` directory:\n\n```\napp\n├── assets ...\n├── channels ...\n├── controllers ...\n├── helpers ...\n├── hyperstack\n│   ├── components\n│   │   ├── hyper_component.rb\n│   │   ├── todo_index.rb\n│   │   └── todo_item.rb\n│   ├── models ...\n│   ├── operations ...\n│   └── stores ...\n├── javascript ...\n├── jobs ...\n├── mailers ...\n├── models ...\n├── policies ...\n└── views ...\n```\n\nIn addition to the `app` directory you will see the usual Rails `config` directory and `db` directories, which we can ignore as they are all setup for us with good working defaults.\n\nYou will also see a `spec` directory which is where specs are placed.  Specifically there is one spec file called `todo_spec.rb`.\n\n#### Comparing to Vue and React\n\nAt the top level you will find a `comparisons` directory with the Vue and React versions of the application.\n\n#### Installing and Running\n\n+ Make sure you have rails installed: http://installrails.com/\n+ You will also need yarn installed: https://yarnpkg.com/lang/en/docs/install/\n+ Clone this repo\n+ `cd todo-compare`\n+ `bundle install` (install ruby gems)\n+ `yarn` (install npm packages)\n+ `bundle exec rake`  (run the specs)\n+ `bundle exec foreman start`\n+ visit localhost:5000\n\n#### Playing Around\n\nOnce you are up and running try doing a small edit to the `todo.rb` component.  For example change the header from\n\n```ruby\nH1(class: 'ToDo-Header') { 'Hyperstack To Do' }\n```\nto\n```ruby\nH1(class: 'ToDo-Header') { 'My Hyperstack To Do App' }\n```\nyou should instantly see your changes recompiled and reloaded on the app.\n\n#### Other Branches\n\nThis git branch follows [Part I](https://medium.com/@mitch_23203/the-exact-same-app-in-hyperstack-7f281cef46ca) of the series.  If you `git checkout part-ii` or `git checkout part-iii` you can see the code additions for each of the following parts of the series.  (well once they are published anyway :-) )\n\n#### Problems\n\nIf you have trouble put in an issue at [Stack Overflow](https://stackoverflow.com/questions/ask) and add the `hyperstack` tag.  \n*Prefered method, as it is easy for others to search etc!*\n\nOr visit us at https://gitter.im/ruby-hyperloop/chat.\n\nOr add the issue here.\n\n#### Hey Why Rails?\n\nOne of the powerful things about Hyperstack is that your database tables are automatically proxied to the client, and kept in sync.  To do this we need a database ORM which Rails provides via the ActiveRecord class.\n\nRails also provides also sorts of other backend goodies, such as mailers and queued tasks.\n\nFinally even if your Hyperstack app is a very simple static application Rails provides an easy way to manage your component code.  Using Rails, Hyperstack will pre-render your component code, cache it, and deliver it with almost no runtime server interaction.\n\nYes Rails is big, but you only pay for the parts you use.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperstack-org%2Ftodo-compare","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperstack-org%2Ftodo-compare","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperstack-org%2Ftodo-compare/lists"}