Scaffold (Rails 7)
Getting Started with Rails (https://guides.rubyonrails.org/getting_started.html#creating-a-new-rails-project-installing-rails)
Generating the scaffold (https://guides.rubyonrails.org/command_line.html#bin-rails-generate):
Using just one command you will generate all of these files: Model, Migration, Controllers, Routes, Tests, Helpers, and JSON.
$ **bin/rails generate scaffold HighScore game:string score:integer** invoke active_record create db/migrate/20190416145729_create_high_scores.rb create app/models/high_score.rb invoke test_unit create test/models/high_score_test.rb create test/fixtures/high_scores.yml invoke resource_route route resources :high_scores invoke scaffold_controller create app/controllers/high_scores_controller.rb invoke erb create app/views/high_scores create app/views/high_scores/index.html.erb create app/views/high_scores/edit.html.erb create app/views/high_scores/show.html.erb create app/views/high_scores/new.html.erb create app/views/high_scores/_form.html.erb invoke test_unit create test/controllers/high_scores_controller_test.rb create test/system/high_scores_test.rb invoke helper create app/helpers/high_scores_helper.rb invoke test_unit invoke jbuilder create app/views/high_scores/index.json.jbuilder create app/views/high_scores/show.json.jbuilder create app/views/high_scores/_high_score.json.jbuilder
After installing Rails, create your project, and generate your scaffold. Let's try to improve the default interface.
I am using the Tailwind to insert styles on the interfaces and the ViewComponent for “creating reusable, testable & encapsulated view components, built to integrate seamlessly with Ruby on Rails”.
You could see the resulting code at https://github.com/raphox/rails-7-fullstack.
Turbo (heart of Hotwire)
You can see the unique application’s screen in the following image. Yes, this project has just one screen. Let’s try to be simple to focus on the most important things.
In this screen, we have two dynamic areas:
List of products
Form to create and edit the selected product
I created a PR so you can see the exact part of the code that was changed or inserted to use the Hotwire on your project. You can see this PR on https://github.com/raphox/rails-7-fullstack/pull/1.
The unique screen on the system has a few triggers to call actions or make requests.
Plus button to access the ‘kit/products/new’ page
Search input field
Products links to access the product’s edit page
Buttons to update, remove or create products based on the form’s fields data
Using the Turbo, we can override the click event of the plus button to request the HTML of a new product form from the backend and put it in the ‘product_form’ area.
We can use the same approach of the plus button in the link of products and prevent reloading the entire screen HTML and assets.
You won’t see any difference. But the code savings and ease of integration will help you a lot when inserting new features.
The objective here is to insert an event on the search input form to make a request when the user changes the input’s value. When it occurs, the system will make a request to get all products filtered by the ‘name’ column. The result will be inserted into the list after it.
To implement the Stimulus in our current project, we need to follow the following steps:
1. Insert the attribute ‘data-controller=”search-list”’ to the wrapper with the form and the list of the products (app/components/search_list_component.html.erb line 1).
— This attribute is responsible to relate the following code to the DIV element. Get more info here https://stimulus.hotwired.dev/.
2. Insert the attribute ‘data-search_list_target=”inputSearch”’ to the form search field (app/components/search_list_form_component.html.erb line 2).
3. Insert the action (click->search-list#selectItem) to activate the currently selected product (app/components/search_list_item_component.rb lines 20).
4. Insert the attribute ‘search_list_target=”item”’ to each item of the product list (app/components/search_list_item_component.rb lines 21).
I am using https://viewcomponent.org/ to define the view components instead to use a view or partial. Pay attention to this part https://viewcomponent.org/#performance.
I really liked having this structure in my project:
rails-7-fullstack/_list.html.erb at 11a479dafa5c84a1e769721d57792f39914a1204 ·…
I created a PR where you can see the exact part of the code I changed or inserted to use the Stimulus on my project. You can see this PR on https://github.com/raphox/rails-7-fullstack/pull/2.
Top comments (0)