Light-weight Javascript Framework Evaluation (For Django Builders)

Introduction

Many builders are confused once they attempt to discover a Light-weight Javascript Framework for the Django venture as a result of there are such a lot of choices.

On this submit, I’ll speak and examine light-weight javascript frameworks, and aid you determine which one is the very best to your Django venture.

If you wish to:

1. Render HTML in Django, and use Javascript to boost the server-rendred HTML.
2. Say no to the heavy frontend options resembling React, Vue, Svelte, Angular
3. Say no to the Decoupled Structure

Then this submit can assist you!

Why this Put up is Distinctive

In contrast to different posts which solely examine present options within the Django neighborhood, I may also speak about options in different communities (Phoenix, Rails, Laravel) and the way they influenced one another.

Beneath is an inventory of frameworks that I’ll speak about on this submit

1. Phoenix LiveView
2. Laravel Livewire
3. Hotwire (Turbo, Stimulus)
4. StimulusReflex
5. Catalyst
6. HTMX
7. Unpoly
8. Alpine.js
9. Django Reactor
10. Django Unicorn
11. django-sockpuppet
12. Tetra

I hope that may aid you get a greater understanding.

Phoenix LiveView

At first, I might like to speak about Phoenix LiveView, as a result of it’s so vital and impressed so many javascript frameworks.

Phoenix is an online growth framework written within the purposeful programming language Elixir.

Phoenix LiveView is library which permits wealthy, real-time consumer experiences with server-rendered HTML.

The LiveView functions are stateful because of the bidirectional communication with WebSockets.

Occasions in LiveView are common messages which can trigger modifications to its state. As soon as the state modifications, LiveView will re-render the related elements of its HTML template and push it again to the browser, which updates itself in probably the most environment friendly method.

A LiveView begins as an everyday HTTP request and HTML response, after which upgrades to a stateful view on consumer join (Websocket). Any time a stateful view modifications or updates its socket assigns, it’s mechanically re-rendered and the updates are pushed to the consumer.

For instance, to react to a click on on a button:

<button phx-click="inc_temperature">+</button>

On the server

def handle_event("inc_temperature", _value, socket) do
  {:okay, new_temp} = Thermostat.inc_temperature(socket.assigns.id)
  {:noreply, assign(socket, :temperature, new_temp)}
finish

After receiving the message, the server re-rendered the HTML, push it again to the consumer through Websocket, the web page UI could be up to date and consumer really feel it’s real-time.

With LiveView, in lots of instances, builders don’t want to jot down a single line of JavaScript to construct function.

However you must also know, in some instances, builders nonetheless have to sprinkle JavaScript habits straight into the HTML. For instance, tabs, dropdowns, popovers and modals.

Websocket

As we already know, WebSocket is essential in Phoenix LiveView, because it makes bidirectional communication between the consumer and the server doable.

Elixir is a purposeful, concurrent, general-purpose programming language that runs on the BEAM digital machine which can be used to implement the Erlang programming language. Elixir builds on high of Erlang and shares the identical abstractions for constructing distributed, fault-tolerant functions

You must also know, different programming languages resembling PHP, Ruby, Python cannot do the identical as Elixir within the Concurrency space.

And you’ll verify this submit Phoenix Channels vs Rails Action Cable

So builders in different neighborhood often remedy the issue on this manner:

1. Person set off some occasion (click on the button)
2. Use HTTP to switch occasion from the consumer to the server. (not Websocket)
3. Server re-render the part HTML, and return HTML again in HTTP response.
4. Extract HTML from the HTTP response and replace web page UI.

Subsequent, let’s check out another javascript frameworks.

• Django Reactor is a port of Phoenix LiveView, it is determined by Django channels, a package deal which offers Websocket help.
• Django Unicorn is impressed by Phoenix LiveView, but it surely doesn’t rely upon Websocket. When occasion fired on the browser, it sends AJAX request to the backend, after which use the response to replace the web page UI.

For instance, to react to a click on on a button in Django Unicorn

<button unicorn:click on="increment">+</button>

The server part

from django_unicorn.parts import UnicornView


class ClicksView(UnicornView):
    rely = 0

    def increment(self):
        self.rely += 1

From Github stats, extra folks like Django Unicorn than Reactor, I assume that’s as a result of:

1. Django Unicorn doesn’t rely upon Websocket, which makes the infrastructure easier.
2. The attributes (for instance unicorn:click on) is cleaner than utilizing Django templatetag.

Laravel is the most well-liked internet framework within the PHP neighborhood.

Laravel Livewire is a full-stack framework for Laravel, which can be impressed by Phoenix LiveView

Let’s check out the counter instance.

<button wire:click on="increment">+</button>

The server aspect:

class Counter extends Part
{
    public $rely = 0;

    public operate increment()
    {
        $this->rely++;
    }

    public operate render()
    {
        return view('livewire.counter');
    }
}

Livewire additionally use HTTP to switch information, however it could actually additionally work with websocket to offer real-time performance.

Truly Livewire and Alpine.js are created by ONE developer, Caleb Porzio, they will work collectively very effectively and other people in Laravel neighborhood often select this mixture.

Beneath is a part, which use each Livewire and Alpine.js:

<div x-data="{ open: false }">
    <button @click on="open = true">Present Extra...</button>

    <ul x-show="open" @click on.exterior="open = false">
        <li><button wire:click on="archive">Archive</button></li>
        <li><button wire:click on="delete">Delete</button></li>
    </ul>
</div>

1. The Alpine.js can do the pure frontend work.
2. The Livewire is used to speak with the backend server.

This venture additionally impressed Django builders and there’s a venture https://www.tetraframework.com/, you may verify if in case you are .

Now we’ve got seen some options that are impressed by Phoenix LiveView, subsequent, let’s check out one other approach to remedy the Javascript situation.

Stimulus

Stimulus is a part of the Rails official frontend resolution Hotwire.

Stimulus is a JavaScript framework with modest ambitions, is designed to boost static or server-rendered HTML, by connecting JavaScript objects to parts on the web page utilizing easy annotations.

These JavaScript objects are referred to as controllers, and Stimulus constantly screens the web page ready for HTML data-controller attributes to seem. For every attribute, Stimulus seems to be on the attribute’s worth to discover a corresponding controller class, creates a brand new occasion of that class, and connects it to the ingredient.

For instance, we’ve got HTML:

<div data-controller="hiya">
  <enter data-hello-target="title" sort="textual content">
  <button data-action="click->hiya#greet">Greet</button>
</div>

And we’ve got hello_controller.js

import { Controller } from "@hotwired/stimulus"

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

  greet() {
    const ingredient = this.nameTarget
    const title = ingredient.worth
    console.log(`Hey, ${title}!`)
  }
}

Notes:

1. When Stimulus detect data-controller="hiya", it’ll create a brand new controller occasion from hello_controller.js and fasten it to the HTML.
2. data-action="click->hiya#greet" means, if consumer click on the button, nice methodology in hiya controller might be executed to deal with the JS occasion.

Stimulus is a pure frontend framework, and can be utilized with ANY backend framework.

1. I extremely suggest you to learn Stimulus 1.0: A modest JavaScript framework for the HTML you already have, revealed in 2018, by DHH, the creator of Ruby on Rails.
2. It’s also possible to verify Stimulus official doc to be taught extra.

StimulusReflex

StimulusReflex extends capabilities of each Rails and Stimulus by intercepting consumer interactions and passing them to Rails over real-time websockets.

StimulusReflex could make Rails app work like Phoenix LiveView (additionally it is impressed by LiveView), through the use of the Rails ActionCable, which integrates WebSockets with Rails.

For instance:

<a href="#"
  data-reflex="click->Counter#increment"
  data-step="1"
  data-count="<%= @rely.to_i %>"
>Increment <%= @rely.to_i %></a>

The data-reflex attribute permits us to map an motion on the consumer to code that might be executed on the server.

class CounterReflex < ApplicationReflex
  def increment
    @rely = ingredient.dataset[:count].to_i + ingredient.dataset[:step].to_i
  finish
finish

On the server, we use ingredient.dataset[:count] to entry the data-count, increment the worth by 1 and set @rely. The Reflex will then push the DOM again to consumer through Websocket. Finally, consumer will replace the web page UI.

Please verify https://docs.stimulusreflex.com/ to know extra about StimulusReflex

This venture additionally impressed Django builders and there’s a venture django-sockpuppet, which is port of the StimulusReflex.

Turbo

Turbo derived from Rails Turbolinks package deal, now additionally it is a part of Rails official frontend resolution (Hotwire).

Stimulus pairs superbly with Turbo to offer a whole resolution for quick, compelling functions with a minimal quantity of effort.

One attention-grabbing function introduced by Turbo is Turbo Stream

A Turbo Streams message is a fraction of HTML consisting of <turbo-stream> parts. The stream message beneath demonstrates the seven doable stream actions

<turbo-stream motion="append" goal="messages">
  <template>
    <div id="message_1">
      This div might be appended to the ingredient with the DOM ID "messages".
    </div>
  </template>
</turbo-stream>

With Turbo Stream, we are able to return HTML from the server to manipunate web page DOM with out utilizing Javascript, this will allow us to construct many highly effective options resembling chat room, auto full search field, and and many others.

One other function of Turbo is Turbo Body

Turbo Frames permit predefined elements of a web page to be up to date on request. Any hyperlinks and varieties inside a body are captured, and the body contents mechanically up to date after receiving a response

Turbo Body present a possibility to decompose pages into self-contained fragments.

Each Turbo Stream and Turbo Body are impressed by Phoenix LiveView

I extremely suggest you to verify this youtube video What is Hotwire?

Catalyst

Internet Elements is a collection of various applied sciences permitting you to create reusable customized parts

Stimulus impressed Catalyst Catalyst, GitHub’s internet part set of patterns.

Github is the online part lover, Stimulus impressed them to construct Catalyst, which assist builders to construct internet parts utilizing Stimulus like syntax.

The backend Part can have one-to-one relationship with frontend internet part, permitting builders to work on a single abstraction for each front-end and backend.

<hello-world>
  <enter data-target="hello-world.title" sort="textual content">

  <button data-action="click on:hello-world#greet">
    Greet
  </button>

  <span data-target="hello-world.output">
  </span>
</hello-world>

import { controller, goal } from "@github/catalyst"

@controller
class HelloWorldElement extends HTMLElement {
  @goal title: HTMLElement
  @goal output: HTMLElement

  greet() {
    this.output.textContent = `Hey, ${this.title.worth}!`
  }
}

Catalyst is a really attention-grabbing tech, and you’ll verify hyperlinks beneath to be taught extra.

HTMX

HTMX lets you entry AJAX, CSS Transitions, WebSockets and Server Despatched Occasions straight in HTML, utilizing attributes

<button hx-post="/clicked" hx-swap="outerHTML">
  Click on Me
</button>

1. The attributes have hx prefix
2. The above HTML code means: when a consumer clicks on this button, situation an AJAX request to /clicked, and substitute all the button with the response

With HTMX, the workflow could be very easy, consumer set off occasion and ship request, the server return HTML, after which the consumer replace the web page in accordance with the response.

HTMX focus extra on the communication between the server utilizing Ajax, it looks as if Django Unicorn, however the backend doesn’t have to implement stateful part, simply render HTML with Django view and get issues achieved.

You may verify https://htmx.org/examples/ to know extra about HTMX.

There’s a venture Unpoly which do comparable work as HTMX, you may verify in case you are .

Alpine.js

Alpine is a rugged, minimal instrument for composing habits straight in your markup.

Let’s verify an instance counter constructed by Alpine.js

<div x-data="{ rely: 0 }">
    <button x-on:click on="rely++">Increment</button>
    <span x-text="rely"></span>
</div>

1. With x-data, we declared a counter part, which has rely=0
2. x-on:click on means if consumer click on the button, the rely++ will run.
3. x-text="rely" means the DOM ingredient will show the rely worth of the part.

As you may see, it’s straightforward to make use of Alpine.js to sprinkle JavaScript habits straight into the HTML.

Alpine.js directives syntax could be very comparable with Vue.js, as a result of Vue.js could be very fashionable within the PHP neighborhood.

Alpine.js is an effective choice to take care of pure frontend stuff, for instance: tabs, modals.

Please verify https://alpinejs.dev/ if you wish to know extra about Alpine.js

Tough Comparability

Now, we already know many light-weight javascript frameworks, subsequent, we’ll examine a few of them and discover out some promising options.

Django Reactor

As we all know, this package deal wants you to put in Django channels, a package deal which offers Websocket help.

In contrast with HTTP, Websocket wants extra sources on the server (for instance: redis connections), and make issues extra sophisticated when you might want to scale your internet software.

That’s the reason I don’t suggest any frontend framework which require Websocket (Django Reactor, django-sockpuppet)

Truly, in case you check out Laravel Livewire, and Hotwire (official frontend framework in Rails neighborhood), they use HTTP to switch information by default, and Websocket is elective.

Django Unicorn

Django Unicorn use HTTP to switch information, and the attributes are clear.

It may assist the consumer do communication between the server utilizing Ajax with out writing Javascript.

If you wish to sprinkle JavaScript habits straight into the HTML (tabs, dropdowns, popovers and modals), you would possibly nonetheless want vanilla javascript or different framework resembling Alpine.js

django-unicorn + Alpine.js generally is a promising resolution.

HTMX

HTMX additionally focuses extra on the communication between the server utilizing Ajax. In contrast to Django Unicorn, it’s a generalized framework, and builders can consumer it with any backend framework.

When utilizing HTMX with Django, builders can nonetheless use Django views to return HTML, no want to the touch part, which is simple.

If you wish to sprinkle JavaScript habits straight into the HTML (tabs, dropdowns, popovers and modals), you will have beneath choices:

1. Vanilla javascript
2. Alpine.js
3. hyperscript is a sister venture of HTMX

From the neighborhood, many individuals like HTMX + Alpine.js resolution, for instance: https://django-htmx-alpine.nicholasmoen.com/

HTMX + Alpine.js generally is a promising resolution.

Hotwire (Turbo + Stimulus)

As we all know, Hotwire is the official frontend resolution within the Rails neighborhood, which incorporates Turbo and Stimulus.

The Turbo package deal incorporates:

1. Turbo Drive accelerates hyperlinks and type submissions by negating the necessity for full web page reloads. Which deliver SPA expertise to our app.
2. Turbo Frames decompose pages into impartial contexts, which scope navigation and could be lazily loaded.
3. Turbo Streams ship web page modifications over WebSocket, SSE or in response to type submissions utilizing simply HTML and a set of CRUD-like actions.
4. Turbo Native assist construct hybrid apps for iOS and Android

The Stimulus is designed to boost static or server-rendered HTML, by connecting JavaScript objects to parts on the web page utilizing easy annotations

1. We will see Turbo as a competitor of HTMX, they convey with the backend server.
2. Stimulus could be seen as a competitor of Alpine.js, they do pure frontend work.

Hotwire can be utilized with ANY backend framework, and additionally it is very talked-about within the PHP neighborhood (Symfony).

So Turbo + Stimulus generally is a promising resolution.

Which Resolution Ought to I Select

Now we received beneath promising options:

1. django-unicorn + Alpine.js
2. HTMX + Alpine.js
3. Turbo + Stimulus (Hotwire)

Within the Django neighborhood, it appears HTMX + Alpine.js is extra fashionable than django-unicorn + Alpine.js, since they’re comparable, I’ll solely speak about HTMX + Alpine.js within the subsequent sections. For those who favor django-unicorn, please be happy to change.

Subsequent, I’ll examine HTMX + Alpine.js with Turbo + Stimulus.

Ecosystem

Let’s first check out Hotwire.

Hotwire is the official frontend framework in Rails, it’s construct by folks at Basecamp, and powers the Basecamp, HEY electronic mail service. (and different Rails internet functions)

Each Basecamp and HEY are giant internet functions, which suggests Hotwire is stable and works good as your codebase develop greater and greater.

And there are various prime quality tutorials, open supply tasks about Hotwire. Since Hotwire is pure frontend framework, we are able to simply make them work with any backend internet frameworks. (Symfony, Django, Flask…)

1. Awesome StimulusJS
2. Turbo Showcase
3. https://thoughtbot.com/blog/tags/hotwire

Backed by Rails neighborhood and a few profitable enterprise firms, Hotwire has wholesome ecosystem.

Typically, in case you meet downside, you may simply discover reply at StackOverflow, somebody’s weblog, or Github.

Subsequent, let’s check out Alpine.js and HTMX

Alpine.js could be very fashionable, and there are various sources about it.

From what I see, many of the blogs, movies, open sources tasks about HTMX, come from Python builders (Django, Flask), I assume that’s as a result of Laravel and Rails have already got default frontend resolution, so most builders wouldn’t strive HTMX.

I attempted to seek out what enterprise firms which are utilizing Alpine.js + HTMX to construct what merchandise, however I cannot discover that information.

So the ecosystem of Hotwire appears higher than Alpine.js + HTMX, and the giant internet functions give builders confidence that they will keep it up because the venture develop.

Problem of Set up

HTMX + Alpine.js is straightforward to put in, we are able to import through CDN hyperlink, no want transpile or bundle resolution.

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

After which you may write code to boost the HTML, which is cool!

To put in Turbo + Stimulus in your Django venture, now you want a bundle resolution.

Some Django builders complain they don’t like to the touch tedious Webpack config or frontend config stuff. Luckily, the venture python-webpack-boilerplate can assist you create frontend venture which bundled by Webpack inside minutes, even you don’t have any thought the best way to config Webpack.

python-webpack-boilerplate additionally has detailed doc and pre-defined config that will help you preserve Javascript and CSS/SCSS in good fashion.

From Rails 7, it launched a brand new tech importmap to make use of JavaScript libraries made for ES modules (ESM) with out the necessity for transpiling or bundling.

Sooner or later, Django builders can change to importmap and drop the Webpack, and a few folks already did try. django-importmap

So HTMX + Alpine.js is straightforward to put in than Turbo + Stimulus, however many individuals overestimate the issue.

As a result of I’m fairly certain a newbie Django developer can use python-webpack-boilerplate to put in Turbo + Stimulus inside ONE hour.

Directives or Vanilla Javascript

HTMX has about 30 customized attributes (additionally referred to as directives).

Alpine.js has about 18 customized attributes (additionally referred to as directives).

For some folks, directives is the killer function, which may allow them to get issues achieved straight within the template.

Nevertheless, the directives provides a brand new layer of complexity, even individuals who already discovered Javascript, nonetheless have to be taught the syntax (for instance, what does hx-trigger="keyup modified delay:1s" imply?).

The Stimulus in Hotwire solely use attributes to go worth from the server-rendered HTML to the Stimulus Controller, and the Stimulus Controller is written with regular Javascript syntax, which is extra pleasant to Javascript folks.

Encapsulation

About 10 years in the past, once we construct internet software, we’re instructed we higher decouple HTML, CSS, and JavaScript

At the moment, we write Javascript code in a separate JS file with the assistance of framework resembling jQuery.

1. If we need to change content material, we edit HTML
2. If we need to change fashion, we edit CSS
3. If we need to change frontend habits, we modify Javascript.

Let’s check out the Alpine.js official Dropdown part

<div class="flex justify-center">
    <div
        x-data="{
            open: false,
            toggle() {
                if (this.open) {
                    return this.shut()
                }

                this.$refs.button.focus()

                this.open = true
            },
            shut(focusAfter) {
                if (! this.open) return

                this.open = false

                focusAfter && focusAfter.focus()
            }
        }"
        x-on:keydown.escape.forestall.cease="shut($refs.button)"
        x-on:focusin.window="! $refs.panel.incorporates($occasion.goal) && shut()"
        x-id="['dropdown-button']"
        class="relative"
    >
        <!-- Button -->
        <button
            x-ref="button"
            x-on:click on="toggle()"
            :aria-expanded="open"
            :aria-controls="$id('dropdown-button')"
            sort="button"
            class="bg-white px-5 py-2.5 rounded-md shadow"
        >
            <span>Actions</span>
            <span aria-hidden="true">&darr;</span>
        </button>

    </div>
</div>

Notes:

1. That is a part of the total code.
2. Do you actually consider writing Javascript in your template file is a good suggestion?
3. For those who verify the code after 1 month, may you shortly perceive what the Alpine.js part do?
4. If you might want to replace some logic, you would possibly want to alter a number of templates?

Even Alpine.js offers a approach to register part (Alpine.information), so builders can reuse the code. From what I see, only a few Django builders do this.

Stimulus encourage builders to jot down Javascript in .js, and one controller is for one one sort of labor. (For instance: dropdown_controller.js), this helps the frontend code higher organized.

After you write some Stimulus parts, you may reuse them in handy manner.

You may verify Stimulus Components, which can assist you perceive and observe the DRY (Do not Repeat Your self) precept with Stimulus.

Code High quality, Code Linting

TypeScript is a strict syntactical superset of JavaScript and provides elective static typing to the language.

Each Stimulus and Turbo are written with TypeScript,

And you can even write Stimulus controller with TypeScript

https://github.com/stimulus-use/stimulus-use is an attention-grabbing venture, it discovered from React Hook and convey the use syntax to Stimulus. So we are able to simply write callback methodology within the Stimulus controller.

As a 3-party package deal which might be utilized by different folks, it’s written in TypeScript, to enhance the code high quality.

For the reason that Stimulus Controller is a Javascript file, builders also can use mature code linting instrument resembling Eslint and Prettier to maintain the Javascript code in good fashion.

Let’s check out Alpine.js + HTMX

1. Each Alpine.js and HTMX are written with common Javascript.
2. Some folks additionally shared TypeScript resolution in Alpine.js, however only a few folks use it.
3. The code linting instrument cannot aid you detect Javascript very effectively within the template.

Studying Curve

Alpine.js + HTMX is straightforward to put in and get began, however issues would possibly turn into slightly sophisticated as your venture develop.

Turbo + Stimulus is slightly onerous to put in and get began, however when you perceive the ideas, the remainder is to construct function with Vanilla javascript. You don’t want to recollect customized directives resembling (hx-trigger, hx-get, hx-post), or the argument syntax resembling keyup modified delay:1s.

Conclusion

If you wish to begin shortly (prototyping) and don’t prefer to be taught Javascript, you may select Alpine.js + HTMX (or Alpine.js + django-unicorn).

If you don’t thoughts studying some Javascript, and need a stable resolution, please strive Hotwire. You would possibly really feel gradual at first, however after you be taught it, you’ll prefer it and you do not want to change to a different resolution till your product exceed the scale of https://basecamp.com/, or https://www.hey.com/

FAQ

Are there good studying sources about Hotwire and Django?

I launched a ebook to assist folks to be taught Hotwire with Django in a scientific manner, please verify The Definitive Guide to Hotwire and Django

Ought to I exploit Turbo and Stimulus collectively?

They’re constructed to unravel totally different issues, and you need to use certainly one of them in your venture.

For instance, you need to use Stimulus as a alternative of jQuery.

If doable, you higher use them collectively for higher consumer expertise.