I tried using Hotwire to make Rails 6.1 scaffold a SPA


Hotwire published by DHH brother, I thought it would be convenient to reflect real-time updates with Websocket, but when I touched it for a moment, when I get HTML without screen transition with get I was wondering how I could do it, so I changed the screen of rails g scaffold` to SPA.

You can imagine the basics of Hotwire by referring to the official video and Make real-time chat with Hotwire.


What was made https://github.com/blueplanet/hotwire-scaffold

--By displaying the input form directly in the index, I was able to make it a SPA --~~ I wanted to install bootstrap and do the input form with modal, but I could get the HTML, but I couldn't do display modal after receiving it, so I gave up ~~ -turbo v7.0.0-beta.2 now draws the response even if the status code is abnormal, so use stimulus and turbo and close modal if it succeeds. In case of error, `was realized as it is

#When an error occurs in the controller`render :new`To`status: :unprocessable_entity`add to
def create
  @post = Post.new(post_params)

  respond_to do |format|
    if @post.save
      format.html { redirect_to @post, notice: 'Post was successfully created.' }
      format.json { render :show, status: :created, location: @post }
      format.html { render :new, status: :unprocessable_entity }
      format.json { render json: @post.errors, status: :unprocessable_entity }

#turbo on form:submit-to the end event`modal#close`Link methods
<%= form_with(model: post, data: { controller: "modal", action: 'turbo:submit-end->modal#close' }) do |form| %>

#For modal close action`event.detail.formSubmission.result.success`You can judge the result with
close(event) {
  if (event.detail.formSubmission.result.success) {

--Points for SPA --If you use turbo_frame_tag'post_form', you can do it almost without changing the existing view. --By adding data: {turbo_frame:'post_form'} to link_to, the element with the same HTML id (post_form) as the above turbo_frame_tag will be replaced from the linked response. - https://github.com/blueplanet/hotwire-scaffold/blob/master/app/views/posts/index.html.erb


-hotwire-rails does the main job just by setting the combination of turbo-rails and stimulus-rails. Is turbo-rails --turbo is defined only for 5 types of movements append / prepend / replace / update / remove, and the other movements are like trying hard with stimulus. --You can use the update process as a trigger to broadcast the process that updates the view, but if you need multiple processes, you still don't know how to limit the order of the processes. --stimulus is not well understood yet

Good place

--By simply combining turbo_frame_tag anddata: {turbo_frame:'post_form'}, the view generated by the existing scaffold could be made into a SPA. --By combining turbo_stream_from andbroadcast *, the result of the correction system could be reflected in real time.

Where you want to improve

--With webpacker, the submit button inside turbo_frame_tag is still disabled even though the Form submit response is 200. --Therefore, the rails project was initialized with --skip-javascript. ――I couldn't find out, but it doesn't seem to be consistent with rails/ujs. --Inconvenient because there is no webpacker, rails/ujs disappears, and form_with ... remote: true system cannot be used. --Even without ujs, You can still use the data-confirm and data-disable-with. and Documented, but if you can, delete generated by scaffold link didn't work.


--If you use turbo, you don't have to write js. It feels like, but you need to get used to the turbo's way. --Since it cannot be used with ujs or webpacker`, it may be better to wait a little longer for introduction to existing projects.

Reference link

-Make real-time chat with Hotwire

Recommended Posts

I tried using Hotwire to make Rails 6.1 scaffold a SPA
I tried to build a simple application using Dockder + Rails Scaffold
I tried to make a group function (bulletin board) with Rails
I tried to implement a server using Netty
I tried to make a talk application in Java using AI "A3RT"
[Rails] Implementation of multi-layer category function using ancestry "I tried to make a window with Bootstrap 3"
I tried to make a login function in Java
[Rails] I tried to create a mini app with FullCalendar
I tried to make a message function of Rails Tutorial extension (Part 1): Create a model
I tried to make a client of RESAS-API in Java
[Rails] I tried to implement "Like function" using rails and js
I tried to make a reply function of Rails Tutorial extension (Part 3): Corrected a misunderstanding of specifications
I tried to make a message function of Rails Tutorial extension (Part 2): Create a screen to display
I tried to make it an arbitrary URL using routing nesting
[Java] I tried to make a maze by the digging method ♪
I tried to introduce CircleCI 2.0 to Rails app
After learning Progate, I tried to make an SNS application using Rails in the local environment
I tried to make a parent class of a value object in Ruby
[Rails] I tried to implement a transaction that combines multiple DB processes
[iOS] I tried to make a processing application like Instagram with Swift
I tried to make a Web API that connects to DB with Quarkus
I tried to make my own transfer guide using OpenTripPlanner and GTFS
Java beginner tried to make a simple web application using Spring Boot
I made a virtual currency arbitrage bot and tried to make money
I tried barcode scanning using Rails + React + QuaggaJS
I tried to make Basic authentication with Java
[Rails] How to create a graph using lazy_high_charts
[Rails] I tried to raise the Rails version from 5.0 to 5.2
I tried to organize the session in Rails
java I tried to break a simple block
I tried to develop a man-hour management tool
I did Java to make (a == 1 && a == 2 && a == 3) always true
I tried to develop a DUO3.0 study website.
I wanted to make (a == 1 && a == 2 && a == 3) true in Java
I tried to create a LINE clone app
[Rails] I made a draft function using enum
Try to make a music player using Basic Player
How to make a follow function in Rails
I tried to develop a website to record expenses.
I tried to break a block with java (1)
I tried to make a sample program using the problem of database specialist in Domain Driven Design
[LINE @] I tried to make a Japanese calendar Western calendar conversion BOT [Messaging API]
I tried to make a machine learning application with Dash (+ Docker) part3 ~ Practice ~
[First environment construction] I tried to create a Rails 6 + MySQL 8.0 + Docker environment on Windows 10.
[Rails / JavaScript / Ajax] I tried to create a like function in two ways.
I want to be able to read a file using refile with administrate [rails6]
I tried to make a simple game with Javafx ① "Let's find happiness game" (unfinished)
[Java] I tried to connect using a connection pool with Servlet (tomcat) & MySQL & Java
Rails6 I want to make an array of values with a check box
[Android] I tried to make a material list screen with ListView + Bottom Sheet
[Small story] I tried to make the java ArrayList a little more convenient
I tried using Gson
I tried using Galasa
I tried using a database connection in Android development
I tried to develop a ramen shop sharing website.
I tried to decorate the simple calendar a little
I tried to operate SQS using AWS Java SDK
I want to use a little icon in Rails
I tried to create a Clova skill in Java
I tried using Log4j2 on a Java EE server
I tried to make FizzBuzz that is uselessly flexible