BasecampはStimulus 1.0 JavaScriptフレームワークをリリースした

Basecampの新しいStimulus 1.0は、フル装備のJavaScriptアプリケーションを作成するのではなく、軽量のJavaScriptを使用して、HTMLページをモダン化することを目標にしている。

Basecampはこれを「すでにあるHTMLのための謙虚なJavaScriptフレームワーク」と呼んでいる。

Stimulus以前はBasecampチームはjQueryをはじめとする様々なテクニックとライブラリを使用してきたが、彼らのコードベースは、一貫性、再利用性、新しいメンバーへのオンボーディングなど、あまりに多くのパターンがあり包括的な解決策がなかった。Basecampチームは、モダンなフレームワークのほとんどが、Basecampの抱える問題を解決していないと感じていた。Basecampでは、HTMLはフロントと中心であり、JavaScriptはそれを支援するためのものであって、その逆ではない。

シングルページJavaScriptアプリケーションは、より反応性の高いユーザーインタラクションを提供し、ページ読み込みに白いページを挟むことなく、メモリ内のJavaScriptライブラリを保持するので、人気が高まっている。 Stimulusは、永続的なプロセスで、バックグランドHTTP要求を通じて、リンクと新しいHTMLビューの読み込みをインターセプトする別のライブラリ、Turbolinks上に構築することで、シングルページアプリケーションの利点を維持することを目指している。TurbolinksはGitHubによって開発されたアプローチであるpjaxに由来する。ほとんどのフレームワークとの主な違いは、StimulusはJSONデータをクライアントサイドでHTMLに変換するのではなく、新しいHTMLのフラグメントをサーバーから読み込むところである。

Stimulusは、多くのuniversalまたはisomorphic JavaScriptフレームワークとは異なる。多くのisomorphicフレームワークが最初のページビューにのみサーバーサイドレンダリングを使うのに対し、新しいHTMLビューの読み込みにフォーカスを当てている。

Stimulusは、3つの主要なコンセプト — コントローラー、アクション、ターゲット—を提供し、これらの機能でHTMLを徐々に拡張している。 開発者は、カスタム属性でHTMLを開始する:

<!--HTML from anywhere-->
<div data-controller="hello">
  <input data-target="hello.name" type="text">

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

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

次に、そのHTMLを操作するコントローラを作成する:

// hello_controller.js
import { Controller } from "stimulus"

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

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

Basecamp CTOとRuby on Railsの作者であるDavid Heinemeier Hansson氏は次のように述べる:

Stimulusは既存のHTMLドキュメントを操作することに関心を持っています。時々、要素を消したり、アニメーションしたり、ハイライトしたりするCSSクラスを追加します。時々、グループ化して、要素を並べ替えます。時々、表示できるローカル時間にキャッシュできるようにUTC時間を変換して、要素のコンテンツを操作します。

StimulusでDOM要素を作りたいケースがありますが、それを自由にできます。将来的にはより簡単にするかもしれません。でもそれは、少数派のユースケースです。これは要素を作ることなく操作することにフォーカスしています。

StimulusはDOMの作成とレンダリング、状態の追跡など、フレームワークがWebアプリケーションの完全な制御を想定しなくてもよかった10年前のシンプルな時代へのモダンな回帰である。主な焦点は、本格的なJavaScript Webアプリケーションではなく、少しプログレッシブな拡張が必要なコンテンツWebサイトである。

HOOQのソフトウェアエンジニアであるZufrizal Yordan氏はTwitterでコメントした:

Stimulusで気に入っているのは、JSでUIを提供するのではなく、プログレッシブな拡張をしていることです。これが簡単な場合もあります。そうでない人は、そうでないアプローチをします。現在のトレンドと比べて、完全なJSにならないと聞きました。

同じようなJavaScriptフレームワークとは対称的に、StimulusはTypeScriptで書かれている。

Basecampチームは、快適な型アノテーション、ツール、リファクタリング、バグの防止、クラス、コード補完、インラインドキュメントなどの理由でTypeScriptを選択した。BasecampエンジニアのSam Stephenson氏はInfoQにTypeScriptを利用するメリットを説明した:

まず型は、私がそれを書くかどうかによります。TypeScriptのoptionalアノテーションは、編集とリファクタリングプロセスをより快適にしてくれます。私はCocoaスタイルのデリゲートインターフェイスを使って、密結合せずにクラスを作成できるのが好きです。コンパイラとエディタは、実装時に書き込むメソッドのto-doリストを提供できるので、TypeScriptのインターフェイスシステムは便利です。

StimulusはMITオープンソースライセンスで提供されており、GitHub上で提供されている。