Modern, user-friendly web applications powered by Server Rendered HTML? This example shows how to build a modern, user-friendly web application based on HTML and the hotwire approach. We will develop a server rendered web application in Go with Buffalo enhanced by the Turbo that powers Basecamps mail service Hey.
Run the example
$ buffalo dev
Now point your browser to http://127.0.0.1:3000.
You'll see the app with a list of TODOs and a feed of todos on the right:
You can also try the example without Turbo and without any JavaScript at all. To use the example without Turbo just set the cookie skipTurbo to true.
Turbo is set up by including the Turbo JavaScript in the HTML header. In Buffalo the header is rendered by the layout template application.plush.html.
Add the Turbo JavaScript to application.plush.html:
<head>
<script src="https://unpkg.com/@hotwired/[email protected]/dist/turbo.es5-umd.js"></script>
...
</head>The home pages shows a feed of todos of other users as a feed on the right. This feed is loaded lazily as Turbo Frame
Example for Turbo Frame in todo/index.plush.html:
<turbo-frame class="col-4" id="feed-frame" src="/feed">
<div class="alert alert-light" role="alert">
Loading feed ...
</div>
</turbo-frame>Turbo Streams allow the server to send just fragments of HTML over the wire and only replace these fragements on the client. The example uses Turbo Streams to create new todos.
The submitted form returns a Turbo Stream if possible, see todo.go:
if acceptsTurboStream(c.Request()) {
// Handle Turbo requests
turboAction := "replace"
turboDomID := "todo_new_form"
return c.Render(http.StatusOK, r.Func("text/vnd.turbo-stream.html", createTurboWriter("todo/new.plush.html", turboAction, turboDomID)))
}
// Handle normal requests
return c.Render(http.StatusOK, r.HTML("todo/new.plush.html"))Check out how to use Turbo Streams over WebSockets in my example github.com/remast/go_websocket_turbo
A must is the full hotwire demo implemented in Go github.com/while1malloc0/hotwire-go-example.