DEV Community: Lewis Sparlin

Hotwire isn't only for Rails

Lewis Sparlin — Wed, 15 Dec 2021 01:19:17 +0000

At the end of 2020 the Basecamp team released a collection of Javascript libraries called Hotwire. Modern web stacks have popularized javascript-rendered front ends and JSON transmissions. Hotwire's primary motivation is to reduce the Javascript footprint and allow application front ends to be created in primarily HTML. It pairs very nicely with the Ruby on Rails ideology and is often demonstrated in that context. I aim to write a series on how Hotwire can be used in any application to simplify development and reduce the need for heavy Javascript downloads. Hotwire currently consists of two javascript libraries: Turbo and Stimulus. The first part of this series introduces Turbo.

HTML over the wire

Hotwire prioritizes HTML over other means of data delivery. Pages can be written in HTML without the overhead of javascript-rendered templates. Pages can be updated by sending HTML from the server (or just plain HTML files) instead of JSON or XML - which involves interpreting data with Javascript. Everything on the web ultimately presents itself as HTML, so why not start there?

What is Turbo?

According to their splash page Turbo is a javascript library that offers developers "The speed of a single-page web applications without having to write any JavaScript". This is pretty cool and the complete opposite of most popular Javascript libraries. Turbo doesn't render HTML from a template, it simply interprets an HTML page and adds common functionality. There is no Javascript interface; any desired functionality is added using plain HTML. data-turbo-* attributes are sometimes used to declare non-default behavior.

The turbo library has three main concepts it calls Drive, Frames and Streams.

Turbo Drive

Turbo Drive is nearly invisible. A developer doesn't directly interact with it in most cases. Adding the Turbo library on any HTML page automatically translates all <a> (link) and <form> tags to Javascript interactions. Visiting a page in the application will quickly replace the page <body> without the browser actually loading a new page. Submitting a form will have the same effect. This gives plain HTML applications a more interactive feel, similar to single-page applications, but without the heavier javascript frameworks. I'd love to give some code examples demonstrating Turbo Drive, but it really is that easy: import it, it works.

import * as Turbo from "@hotwired/turbo";

If you're not bundling javascript, Turbo can be included from a CDN like Skypack or Unpkg

<!-- from a CDN -->
<script type="module" defer>
  import Turbo from 'https://cdn.skypack.dev/@hotwired/turbo';
</script>

Turbo Frames

Turbo Frames (and Streams) is the exciting part of the Turbo library. So much behavior can be added to an app with Frames - still just by writing HTML! I believe there is too much to cover in this Hotwire overview, the next part in this series will be dedicated to Frames. Here is a quick preview of what Turbo Frames can do.

Coffee Boutique

In an alternate reality I run a small coffee stand for people willing to wait for slow, manual coffee brewing methods. I offer pour-over, French press, and Aeropress coffees. The HTML for the self-serve brew method selection looks like this (simplified):

<h1>How shall I brew your ☕️</h1>

<turbo-frame id="coffee_selection">
  <div>
    <h3>Pour-over</h3>
    <p>... describes pour-over ...</p>
    <a href="choose_pour_over.html">
      Pour my coffee
    </a>
  </div>
  <div>
    <h3>French press</h3>
    <p>... describes french press ...</p>
    <a href="choose_french_press.html">
      (French) Press my coffee
    </a>
  </div>
  <div>
    <h3>Aeropress</h3>
    <p>... describes aeropress ...</p>
    <a href="choose_aeropress.html">
      (Aero)Press my coffee
    </a>
  </div>
</turbo-frame>

Wrapping the selection components in a <turbo-frame> causes links inside the tag to only effect the context of that frame. Clicking links or submitting forms will not update the entire page, instead they expect HTML from the response to contain directions on how to update the frame. When the response has a matching turbo-frame ID, the contents in the frame are replaced with the contents from the respective tag in the response.

<!-- choose_pour_over.html -->
<turbo-frame id="coffee_selection">          
  <div>
    <h3>Pour-over</h3>
    <p>Great choice!</p>
    <p>Wait time 5 minutes</p>
  </div>
</turbo-frame

No Javascript was written to cause the component on the page to be replaced with user feedback. The <turbo-frame> tag did all the work. Clicking the "Pour my Coffee" link causes the contents of the file choose_pour_over.html to be fetched and Turbo replaces the frame.

My working code example is on Replit

Turbo Streams

Turbo Streams adds HTML tags that can give more granular page update directions. The <turbo-stream> tag supports HTML attributes that give instructions to replace certain parts of a page or to append or prepend HTML from inside the tag. It's a super powerful part of the Turbo library and deserves its own coverage. I plan on including a Turbo Stream article later in this series to demonstrate the huge potential of communicating front-end update instructions using plain HTML.

A similar replacement like the example above would be more explicit with Turbo Stream markup.

<turbo-stream action="replace" target="coffee_selection">
  <template>
    <div>          
      <h3>Pour-over</h3>
      <p>Great choice!</p>
      <p>Wait time 5 minutes</p>
    </div>
  </template>
</turbo-stream>

Conclusion

Hotwire and specifically Turbo include a lot of useful tools for developing applications without a heavy Javascript framework. Turbo enhances page links and forms for free just by including the library. Frames and Streams are extremely powerful for building front end interactions. And all of it can be done in HTML. Hotwire seems most popular in the Rails community, but it has lots of potential on its own.

Customize Stimulus Attributes, Avoid Conflicts

Lewis Sparlin — Wed, 10 Nov 2021 21:33:19 +0000

Stimulus is all about giving you front-end functionality with minimal JavaScript fuss and weight, but in certain cases, its data attributes can run into conflict with other libraries. I've recently made a pull request to add this to their docs, but for anyone else who's encountered this conflict, a little reconfiguration of the library's schema can keep your Stimulus implementation conflict-free.

Outside of a build system, Stimulus is initialized as documented in their handbook:

import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
window.Stimulus = Application.start()

Stimulus uses HTML data attributes to target and add listeners to elements on the page. In Stimulus if you wanted a button to show a modal, you might write something like this:

<button data-action="modal#show">
 Set up your profile
</button>

If you were to include Stimulus in a project that already had several JavaScript libraries, you may encounter what I encountered. The HTML attribute data-action was already being monitored by another library. Fortunately, after reading through their code I discovered there are parameters that can be passed to Application. The data attributes Stimulus looks for can be customized by passing a different "schema".

import { Application, defaultSchema } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
const customSchema = {
 ...defaultSchema,
 actionAttribute: 'data-stimulus-action'
}
window.Stimulus = Application.start(document.documentElement, customSchema)

This would allow you to create Stimulus event listeners using your custom attribute:

<button data-stimulus-action="modal#show">
 Setup your profile
</button>

Stimulus is a great tool that gives you a lot of power on the front end for very little overhead— if you'd like to see a blog series from me to get a thorough introduction to the library, let us know!

Hacktoberfest and Hello

Lewis Sparlin — Wed, 03 Nov 2021 20:45:16 +0000

Hi 👋, I'm Lewis! In addition to being a Hacktoberfest retro, this is also my DEV introduction. This being my first DEV post I'm tempted to ramble on a bit, but you can learn more about me in my bio if you're interested. This month I'll be doing my best to write more and share my experiences and what I'm learning. Although I have been working in tech for a long time, Hacktoberfest 2021 was my first earnest effort contributing to Open Source.

Hacktoberfest 2021

Hacktoberfest is:

a month-long celebration of open source software run by DigitalOcean

In a nutshell, developers were able to authenticate with Github and after 4 confirmed pull requests merged for open source projects, get free swag. Of course for many people, a free tee shirt isn't a huge motivator. Personally I felt it was a great learning experience and it was satisfying to give back to Open Source projects. The personal growth and community involvement were the greatest rewards.

Community 💙

I was introduced to Hacktoberfest by a wonderful online community I joined this year, Virtual Coffee. Aside: you should join Virtual Coffee, they're the most authentic group I've ever met online!! As a community, they challenged members to be involved. They facilitated mentorship and had weekly check-ins to give everyone opportunity to talk about where they were contributing.

I had the privilege of mentoring @adiatiayu, who is well known here and on CodeNewbies for her excellent writing. I really enjoyed getting to know her and the maintainers I interacted with over the past month. As an introvert, doing Hacktoberfest with a community was the motivation I needed to really get involved.

Things I didn't know about Github

I've used Github for work for years, but there were several cool new things I learned thanks to getting into Hacktoberfest.

Getting a repository contributor-friendly
Thanks to @kirkcodes for this great presentation on VirtualCoffee's YouTube channel. I haven't had a chance to open source a project myself, so I'll be glad I wrote this down someday. Under the Github Insights tab, the community section has an interactive list of recommended as the ideal setup to start an open source project that is contributor-friendly. I knew about README of course, but there are so many other great ways for maintainers to guide their contributors.

Pull Request Templates!
Having interacted now with several OSS projects that utilize this, it's now hard to imagine contributing without them. If you're not familiar, you can add the file .github/PULL_REQUEST_TEMPLATE.md to a repository and contributors will have a starting point when opening up a pull request! A pull request template can communicate to contributors what you expect them to describe in their pull request description. This is extremely helpful and allows contributors (like me) be familiar with expectations. Something simple like this would suffice in most cases.

## What Changed
<!-- describe what you changed -->

## Issues
<!-- mention the issue this addresses -->

## Screenshots
<!-- Add some screenshots -->

Templates can also be created for the various types of issues as described by Github's documentation.

Building Confidence

Imposter syndrome is a regular topic in developer communities and it effects me too. Wavering confidence and the tendency to doubt my own abilities has been a consistent struggle throughout my journey as a developer. This last month I found that contributing to open source can be a great confidence boost. It feels good to get involved in projects I care about. There is affirmation in knowing that people I don't know appreciate code I send to them over the internet. I also learned new patterns and ways of approaching things by getting into other people's code. I highly recommend contributing to open source earlier than I did for those who have the ability. It's great for everybody involved.

Contributions

The following projects all have excellent maintainers and core teams that were a joy to work with. I am especially fond of Forem (the DEV platform). Shoutout to @nickytonline and @coffeecraftcode for being extremely welcoming members of Forem. I plan to continue being a regular contributor thanks to the great experience I had during Hacktoberfest.

forem / forem

For empowering community 🌱

codethesaurus / codethesaur.us

A polyglot developer reference tool to compare programming language concepts side-by-side! Great for learning new languages or using for reference.

Virtual-Coffee / virtualcoffee.io

Public site for Virtual Coffee

Thank you to DigitalOcean and Virtual Coffee for the opportunity and encouragement to get involved in open source!