Hyperstack vs Hotwire (translation)

I'll try to get used to the habr and fill in the translation of the article from my other resource here .

---

This is a very opinionated but hopefully honest and accurate comparison between Hyperstack and Hotwire.

First of all, what are these things?

Both solutions help bring modern UI to Rails.

Both rely on Websockets to receive state change notifications.

Hyperstack

• Everything is written in Ruby (including client code)

  
  
  
  
  

• Under the hood, React is used to build a UI with the ability to access React libraries

  
  
  
  
  

• Easily keeps Rails models in sync between UI and server. Often without additional code

  
  
  
  
  

• Removes the need to write controllers (but you can continue to use them if you want)

  
  
  
  
  

• Gives the maximum possible amount of work to the client's side

  
  
  
  
  

• Provides a powerful data access control mechanism built on Pundit policies

  
  
  
  
  

• Can be used in existing Rails applications

  
  
  
  
  

Hotwire

• This is the next evolution of Rails Turbolinks

  
  
  
  
  

• Extends the standard Rails MVC system by pushing incremental updates to the presentation layer

  
  
  
  
  

• Uses traditional Rails approaches

  
  
  
  
  

• Leaves most of the work on the server side, making the client side very lightweight

  
  
  
  
  

• Eliminates most (but not all) JS code you might need to write

  
  
  
  
  

• Maintained by DHH and presumably by the Rails community

  
  
  
  
  

, “Tweet” (https://gorails.com/episodes/hotwire-rails) Hyperstack. : UI , .

Hyperstack , . , layout , .

Hyperstack - 78 lines vs — Hotwire — 156

- , ?

, “Tweet Card”, "" "".

Hyperstack:

Hotwire:

.

Hyperstack React-, , DSL. DSL HTML- . EditTweet , 11 .

Hotwire ERB HTML, , turbo_frame_tag



. .

React, Hyperstack “state-driven” . “”, “editing”, EditTweet ( 14). EditTweet save cancel, “editing state” false. .

Hotwire , “Edit” , .

“Like” “Retweet”, Hyperstack .on(:click)



, ActiveRecord increment!



. Hyperstack ()

Hotwire , edit : , . , , :

, , Hyperstack , — . html.erb , 70+ UI- .

. .erb json



, API. , Hotwire jbuilder, 2 , .

, . Hotwire , , (after_...



) twitter.rb

? . . ? , 3 . , Hyperstack ( ) routes.rb



, .

, . , “Like”

?

- , . (!)

Hotwire :

• 
  
  
  
  

• ( 14 )

  
  
  
  
  

• json
  
  
  
  ,

  
  
  
  
  

• button_to



_tweet.html.erb
  
  
  
  

  
  
  
  
  

16 , Rails - action controller, view helpers, jbuilder, active record router - Ruby, HTML ERB.

Hyperstack?

:

BUTTON { "Likes (#{tweet.likes_count})" }
.on(:click) { tweet.increment!(:likes_count) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

active record increment!



HyperComponent DLS, .

?

, . Hyperstack . , Rails Rails “convention over configuration” .

Hotwire , . , , ERB DSL. Rails, .

, . , Hotwire , Hyperstack — . , .

React. React, "state-driven" , . , (, , ) . , React , , .

: . , - . . , , . , , - . , , ? , Ruby .

: Hyperstack vs Hotwire 26 2021 . : @catprint aka Mitch VanDuyn

From the translator

We decided to select this article to cover various modern frontend Rails currents. We have not yet decided on such tools until the end, but we started using Stimulus on several projects and are moving towards Hotwire.