BT

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

| 作者: Dylan Schiemann フォローする 7 人のフォロワー , 翻訳者 尾崎 義尚 フォローする 0 人のフォロワー 投稿日 2018年2月19日. 推定読書時間: 5 分 |

原文(投稿日:2018/02/14)へのリンク

あなたのリクエストに応じて、ノイズを減らす機能を開発しました。大切な情報を見逃さないよう、お気に入りのトピックを選択して、メールとウェブで通知をもらいましょう。

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上で提供されている。

 
 

Rate this Article

Adoption Stage
Style
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT