Alex's Slip-box

These are my org-mode notes in sort of Zettelkasten style

Hotwire rails

Created on August 21, 2021

Updated on March 15, 2024

Tags: javascript, ruby, rails

:ID: 1E969F0A-52A6-4D2C-A227-5BF6AE253044

# What is this?

Hotwire is a way of building web applications that, at its core, is about sending server rendered HTML over “this wire” (ie, HTTP or websocket). It is composed of three things:

  1. Turbo: This is really the main thing. With this library alone, we can do HTML over the wire.
  2. Stimulus: A JS framework that doesn’t care about rendering stuff, but rather with dynamic behavior typical of an SPA.
  3. Strada: something to do with mobile – not sure. As now this moment it has not been made public

See https://github.com/hotwired for all the libraries.

# Add to Rails application

Add the hotwire-rails gem. Follow the instructions in the Readme.

NOTE:

  • This appears to basically be a wrapper for turbo-rails and stimulus-rails.
  • The hotwire:install rake task will yarn add both NPM packages @hotwired/turbo-rails and stimulus.

# Rails 7

By default Rails 7 will use import maps. Consider also using esbuild. See also jsbundling-rails and GoRails How to use ESBuild…

# esbuild

rails new foo --javascript=esbuild --css=bootstrap
  • bin/dev

    Rails apps are now started with bin/dev for development. This uses foreman to manager three processes defined in Procfile.dev 

    web: unset PORT && bin/rails server -p 3000 -b '0.0.0.0'
js: yarn build --watch
css: yarn build:css --watch
  • package.json

    Defines two build commands: 

    "scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
  "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}

# Turbo

# Concepts

# Turbo links

Intercept the request from a clicked link. Remake the request using fetch and replace the body element as opposed to a page reload.

# Turbo frames

Same thing as turbo links, but updates are applied to only sections of the dom defined with <turbo-frame> elements.

# Turbo streams

More control over how the DOM is updated. HTML can be appended, updated, removed …etc. See also Turbo Streams.

# DOM morphing

This is something new in Turbo 8. Morphing is a different way of updating the DOM. It does a diff and the new and old templates and updates the stuff that changed. Turbo will be using idiomorph. See also https://evilmartians.com/chronicles/the-future-of-full-stack-rails-turbo-morph-drive

# Tutorials

# Resources

Search Results