Posted by Pascal Widdershoven on 16-7-2018

These days, SPA’s (Single Page Applications) are an undeniable trend on the web. However, I personally think there are many use cases where a ‘traditional’ server rendered application still makes sense. For example for CRUD-style / admin applications, or in general when your application doesn’t require highly interactive features.

For use cases like these, it’s generally more convenient and faster to use server side rendering. However, also these kind of applications can benefit from small bits of interactivity like a copy to clipboard feature, selecting multiple checkboxes in a table at once etc.

Stimulus is a relatively new Javascript framework designed specifically for server rendered applications. It provides tools to bind Javascript to your server rendered HTML. It’s modest in feature set, but provides just the right tools, abstractions and conventions to add these little nuggests of interactivity to your application in a sane way.

For example implementing a Copy to clipboard button looks something like this:

1. Render your HTML on the server.

1
2
3
4

<div data-controller="clipboard">
  PIN: <input data-target="clipboard.source" type="text" value="1234" readonly>
  <button data-action="clipboard#copy">Copy to Clipboard</button>
</div>

2. Create a Javascript controller file that will handle this action.

1
2
3
4
5
6
7
8
9
10

import { Controller } from "stimulus";

export default class ClipboardController extends Controller {
  static targets = [ "source" ];

  copy() {
    this.sourceTarget.select();
    document.execCommand("copy");
  }
}

That’s it! Now if you want to add a Copy to clipboard feature anywhere in your app, all you have to do is add these few data attributes to your HTML.

Turbolinks

Stimulus also works very well combined with Turbolinks. Turbolinks is a small library you can drop into your page which will massively speed up your app, with hardly any work required on your part. It does this by applying a neat trick; it fetches subsequent pages in your app via Ajax and merges the new page into the current page. This reduces the work the browsers have to do for each navigation greatly.

Combining Turbolinks and Stimulus will make your app feel very responsive, interactive where it needs to be and best of all you don’t have to re-architect your app to achieve this.

Note that Turbolinks originated from Ruby on Rails, but works with any server side rendering technology. At Kabisa we’ve used Turbolinks together with Elixir Phoenix for example.

If you want to learn more about Stimulus be sure to check out its handbook. The Turbolinks docs are also excellent and even have a section on using Turbolinks together with Stimulus.

Happy coding!