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 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.
Superglue, like other modern frameworks, seeks to introduce a modern pattern to frontend web development while trying to solve the following problems:
The Superglue approach offers an alternative that prioritizes simplicity, performance, and flexibility by using the building block of the web and focusing on interoperability.
The following are features associated with the Superglue approach:
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.
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.
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.
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:
Learn more →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();
});
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.
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 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.
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.
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:
data-action attributesThe 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.
Developers who are familiar with the Rails ecosystem find it easier to get started with Hotwire.
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.
Hotwire is specifically designed for Rails applications, so integrating Hotwire with technologies outside the Rails ecosystem can be complex.
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.
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.
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.
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.
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!
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Discover how to use TanStack Table, formerly known as React Table, to build a table UI for a variety of use cases.
Explore what prototypes are, how the prototype chain works, and how to use the prototype chain to create inheritance between objects.
Set up TypeScript with Node.js and Express, focusing on configuring key elements for a smooth development experience.
Examine the differences between the .ts and .tsx file types, their use cases, and best practices for a React TypeScript project.
One Reply to "Superglue vs. Hotwire for modern frontend development"
That’s interesting, but now some frameworks are handling server-side rendering themselves, so they are sending HTML directly from the server.
NextJS is heavily investing on it for the React ecosystem. They can stream HTML as needed from the server, handling even form validations on server-side (using React Server Components)