Superglue vs. Hotwire for modern frontend development

Written by Frank Joseph✏️

The web development landscape is constantly evolving and as user requirements also change, developers continue to explore ways to build frontend applications with a balance of performance, flexibility, and maintenance. JavaScript-heavy frameworks help developers build frontend applications, but they often introduce scalability and maintenance challenges and can be complex to manage.

Modern frontend development approaches such as Superglue and Hotwire aim to simplify creating dynamic and interactive web applications using HTML over the wire, sending HTML directly to the client’s browser instead of JSON.

In this article, we will explore how Hotwire and Superglue are reimagining the web development landscape. We will compare them based on factors like developer experience/ease of use, performance, compatibility with existing stacks, use cases, scalability, community, and ecosystem.

Superglue

Superglue is a framework-agnostic pattern that enables web developers to build end-to-end frontend web applications by sending HTML over the wire and using less JavaScript.

The “glue it” approach of modern frontend development prioritizes interoperability, simplicity, and flexibility, and advocates for a move away from the complexities of a monolithic approach to a more streamlined approach.

Superglue is more of a philosophy and approach rather than a set of tools. With Superglue, developers use a combination of tools to build their frontend instead of relying on a single tool. Think of it this way: rather than use React, Vue, or Angular for frontend development, developers can use templating engines like EJS or Handlebars to dynamically manipulate data, Redux or other state management tools to manage state, and Axios or similar libraries to fetch data.

Why is Superglue necessary?

Superglue, like other modern frameworks, seeks to introduce a modern pattern to frontend web development while trying to solve the following problems:

• Latency: Large frameworks usually come with additional codes, which, in most cases, are unnecessary and can impact application size and contribute to latency
• Using a particular framework can limit your creative power as you are forced to follow a certain pattern. There is also the cost of switching or integrating with other tools
• Picking up or learning and mastering a complex framework is usually difficult and time-consuming for beginners

The Superglue approach offers an alternative that prioritizes simplicity, performance, and flexibility by using the building block of the web and focusing on interoperability.

Superglue features

The following are features associated with the Superglue approach:

• Over the wire update: Performance is optimized by sending only the necessary HTML over the wire. This feature reduces client-side processing, thereby reducing latency and network overhead
• Framework-agnostic: Being framework-agnostic, the Superglue approach allows developers to integrate easily with various backend technologies and frameworks
• Micro-frameworks: Libraries like the Fetch API, lit-html, Marko, and server-sent events (SSE) offer an alternative means to build lightweight web components without heavy JavaScript

Ease of use

Superglue requires an understanding of fundamental web development technologies like HTML, CSS, and JavaScript with which developers can pick up other tools. With Superglue, developers have the freedom to choose their preferred tools. However, using and being able to configure different tools effectively requires experience and in-depth knowledge, which contributes to the steepness of the learning curve.

Performance

Superglue inherently improves performance by avoiding JavaScript-heavy frameworks. Performance optimization depends not only on the developer’s experience but also on the tools they choose to use. For example, developers can use the imageOptim API to optimize images and other visual assets. Additionally, Superglue’s server-side rendering capabilities further improve performance by ensuring that website content appears quickly without needing to download and run extensive client-side code.

Compatibility with the existing stack

Superglue’s strength lies in its interoperability; it integrates well with various backend technologies, especially Python, JavaScript, Django, and Node.js.

Developers using the Superglue pattern enjoy the flexibility of choosing a backend stack depending on product requirements. For example, regardless of whether you are using Node.js or Django as your backend stack, Superglue gives you the freedom to choose the frontend tool of your choice.

Use cases

Because Superglue is not tied to a specific backend stack, it makes future stack migration possible. This flexibility is especially beneficial for projects where control and customization of every aspect of the frontend are essential.

Imagine you are building a simple form to receive user data like their name, email, and password. Using JavaScript-heavy frontend frameworks like React, Vue, or Angular for this use case might not make sense as it could make the application heavy. But with the Superglue pattern, you can easily write an HTML form and use the JustValidate library to validate input:

<form id="user-form">
  <input type="text" name="name" placeholder="Enter your Name"> 
  <input type="email" name="email" placeholder="Enter your email Address">
  <input type="password" name="password" placeholder="Enter your password"> 
  <button type="submit">Register</button> 
</form>

In the JavaScript file, write the following code:

const validator = new JustValidate('#user-form'); 
validator 
.addField('#name', [ 
    { rule: 'required'},
    {rule: 'minLength', value: 3,},
  ]) 

.addField('#email', [ 
    { rule: 'required', errorMessage: 'Email is required'}, 
    { rule: 'email', errorMessage: 'Email is invalid'}, 
]) 
.addField('password', [
  {rule: 'required', errorMessage: 'Password is required'},
  {rule: 'password'},
])
.onSuccess((event) => { 
  event.currentTarget.submit(); 
});

Scalability

Building scalable applications requires well-organized and maintainable code. But managing complex applications that follow the Superglue pattern can be challenging, especially when features are built with different technology stacks.

Building a scalable application following the Superglue philosophy starts with choosing the right tools. This is why developers are advised to choose tools they have experience working with. On the flip side, Superglue encourages building applications with modules, which are easier to optimize and debug. Templating engines like EJS and libraries like JustValidate are lightweight and improve performance and loading time when compared to JavaScript-heavy frontend frameworks like React or Angular.

Community/Ecosystem

Superglue is more of a philosophy than a tool, so the community might not be as established when compared to a language or a framework like Rails. Available libraries and resources that align with Superglue's philosophy are scattered across different tools and projects. Developers following the Superglue concept need to stay up-to-date with new innovations and updates in frontend development modules and libraries.

Hotwire

Hotwire is an alternative approach to building modern web applications without a heavy JavaScript framework by sending HTML over the wire. It focuses on server-side rendering.

Hotwire was initially designed for the Rails ecosystem but now it can be integrated with frameworks such as Laravel, Django, Wagtail, and many others. It provides a collection of features and tools (e.g., Stimulus and Turbo) that improve frontend development without using heavy JavaScript frameworks.

Hotwire features

Turbo

This uses a combination of several techniques to create fast, modern, and progressive web applications without writing heavy JavaScript. Turbo offers a simpler alternative to JavaScript-heavy frontend frameworks, which put all the logic in the frontend and confine the server side of your app to being little more than a JSON API.

Using Turbo means you can write all your application logic on the server side and you also let the server serve HTML to the browser. When a webpage refreshes, CSS and JavaScript have to be reinitialized and reapplied to the page. Imagine how slow the process can be with a fair amount of CSS and JavaScript.

At its core, Turbo gets around this reinitialization problem by maintaining a persistent process similar to SPAs (single-page applications). It intercepts links and loads new pages via Ajax. The server still returns fully-formed HTML documents.

Stimulus

This is a modest JavaScript framework. Unlike other JavaScript-heavy frontend frameworks, at the core of its design, Stimulus enhances server-rendered HTML by connecting JavaScript objects (controllers) to elements in HTML pages using annotation.

Stimulus continuously monitors the page, waiting for HTML data-controller attributes. For each attribute, Stimulus looks at the attribute’s value to find a corresponding controller class, creates a new instance of that class, and connects it to the element. Think of the Stimulus data-controller attribute as a bridge connecting HTML to JavaScript as the class attribute is the bridge connecting HTML to CSS.

Stimulus’s use of data attributes helps separate content from behavior in the same way that CSS separates content from presentation. Aside from controllers, the three other major Stimulus concepts are:

• Actions: This connects controller methods to DOM events using data-action attributes
• Targets: This locates elements of significance within a controller
• Values: This reads, writes, and observes data attributes on the controller’s element

Why is Hotwire necessary?

• SEO: Server-side rendered HTML content is easy to crawl and index by search engines compared to JavaScript-heavy frameworks
• Modular web development: Hotwire favors a modular approach to web development. For example, Turbo handles webpage updates while Stimulus manages interactivity
• Hotwire reduces complexities when compared to JavaScript-heavy frameworks.
• Hotwire improves performance

The following is a sample code snippet to illustrate how to use Turbo and Stimulus to handle updates and interactivity respectively:

<div id="comments-section" data-turbo-frame> 
  <button data-controller="comments">Add Comment</button> 
</div>

This is a sample HTML code. The data-turbo-frame attribute informs Turbo that the element with an ID of comment-section is a potential update target. It also includes a button with a data-controller attribute set to comments. This instructs Stimulus to associate a controller with this button.

In a comment_controller.js file, add the following code:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [‘comments’]
  connect() {
    console.log("New comment controller connected!")
  }

  submitComment(event) { 
    event.preventDefault();
    fetch('/api/comments', 
    { 
      method: 'POST', 
      body: new FormData(this.commentsTarget) 
    }) 
      .then(response => response.json()) 
      .then(data => {
      this.commentsTarget.insertAdjacentHTML('beforebegin', data.html); }); }
  }
}

This code defines the comment controller class. It uses the static targets property to specify that this controller targets an element with the ID comment. The connect method logs a message to the console when the controller is connected to the button element.

The submitComment method gets triggered when the button is clicked — this is handled behind the scenes by Stimulus. The preventDefault method prevents the default form submission behavior and the remaining part of the code simulates sending data to the server using the Fetch API.

Refer to these guides for more information on how to use Stimulus and Turbo.

Ease of use

Developers who are familiar with the Rails ecosystem find it easier to get started with Hotwire.

Performance

Turbo manages page updates and reduces data transfer, thereby improving performance. Additionally, it includes built-in performance optimization techniques that reduce the need for manual optimization.

Compatibility with the existing stack

Hotwire is specifically designed for Rails applications, so integrating Hotwire with technologies outside the Rails ecosystem can be complex.

Use cases

Applications, especially those built with Rails, need modern, performant, and easy-to-integrate frontend stacks. Hotwire is ideal for building applications with real-time communication functionalities and is fit for projects seeking the SEO advantages of server-side rendering.

Scalability

Hotwire implements separation of concerns (e.g., Turbo manages page updates and Stimulus manages interaction), which helps applications built with Hotwire scale well. Building complex and data-intensive applications using Hotwire may require additional tools and a scalable design architecture.

Community/Ecosystem

Hotwire greatly benefits from the well-established Rails ecosystem and the active participation of its community members. The Hotwire documentation was a result of a community-driven effort.

Conclusion

In this article, we explored how Hotwire and Superglue are reimagining modern frontend development. We compared their features and evaluated their performance, scalability, ease of use, community support, and compatibility with existing stacks.

Hotwire, with its focus on server-side rendering and minimal JavaScript, offers a streamlined approach for Rails applications and more. On the other hand, Superglue provides a flexible, framework-agnostic approach that emphasizes interoperability. Both approaches aim to address the complexities of JavaScript-heavy frameworks, offering developers efficient alternatives for building dynamic web applications.

---

LogRocket: Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

LogRocket records console logs, page load times, stack traces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free.