hotwire

--==[ jsrn.net ]==--

In the beginning, there was HTML.

						
Welcome to my website!

						
I really like football!
					

We want things to look like things.

						

						  
welcome to my website!
						  james' website which is the best one

						  
I really like football and good charlotte!
						
					

Now we want things to do things.

"Should I learn React or Vue?"

"Use vanilla JavaScript!"

You might know Basecamp.

Basecamp (originally 37signals) brought us such hits as...

• Basecamp (project management software)
• HEY (boutique email)
• Ruby on Rails
• Yelling at clouds
• Hemorrhaging 30% of your staff over the course of a few days

Turbo + Stimulus + Strada

Turbo

• Speed up page changes and form submissions
• Divide complex pages into components
• Stream partial page updates over WebSocket

... without writing any JavaScript.

Drive

The artist formerly known as Turbolinks. Accelerate links and forms by replacing full page loads.

Frames

Decompose page into independent contexts.

Streams

Deliver page changes over WebSockets or in response to form submissions.

Native

Wrap your Rails app in a native shell with seamless transition between web and native sections.

{
  "identifier": {
    "channel": "Turbo::StreamsChannel",
    "signed_stream_name": "Ilol0THpFIg=="
  },
  "message":"<turbo-stream
               action='append'
               target='messages'>
                 <template>
                   <p id='message_15'>
                     26 May 16:05: Hi!
                   </p>
                 </template>
               </turbo-stream>"
}
					

☟

  

    26 May 16:05: Hi!
  

					

Stimulus

An HTML-centric approach to state and wiring

  

  
    Greet
  

  
  

// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
	static targets = [ "name", "output" ]

	greet() {
		this.outputTarget.textContent =
			`Hello, ${this.nameTarget.value}!`
	}
}

	

	
		Greet
	

	
	

// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
	static targets = [ "name", "output" ]

	greet() {
		this.outputTarget.textContent =
			`Hello, ${this.nameTarget.value}!`
	}
}

Strada

• Allegedly standardise how the web and native parts of a mobile app talk to each other
• Allegedly progressively level-up web interactions with native replacements

The Future

The concepts are really interesting.

Hotwire itself may continue to flourish.

The ideas behind Hotwire may take root elsewhere in a more serious way.

Should we be putting so many of our eggs in one basket?

Thanks