umbrella.jsを（少し）使ってみた

動機

• パフォーマンス優先
• 開発効率も落としたくない
• jQueryはできれば使いたくない（重量、将来性）
• ajaxは必須

umbrella.js

• ドキュメント日本語訳　http://tr.you84815.space/umbrella/

有利性

• 軽い

  必要最低限のAPIのみで構成されているためかなり軽量。（jQuery 3.2.1 : 90kb, umbrella.js 2.8.0: 9.5kb）

• jQueryと似ている

  使用方法やAPIをjQueryに（意図的に）近似させているため、jQuery経験者であれば学習・調査コストをかけず、jQuery同等の開発生産性も得られることが期待できる。

  ざっくり言うとjQueryの$がuに変わるだけなので、殆どjQueryを使っているような感覚で書ける。

example

• .addClass()

  - jQuery: 
  ```
  $('#foo').addClass('bar');
  ```
  
  - umbrella.js: 
  ```
  u('#foo').addClass('bar');
  ```
  

不利性

• 使用できるAPI（関数）が少ない

  これはそのように意図して設計されているため不利性というより必然だがjQueryで使えるAPIの全てが使える訳ではない。
  APIはDOM操作とAjaxとイベントハンドリングに限定されている。
  その他の、animate系や、defferedなどユーティリティ系のAPIが必要な場合は、別途ライブラリを導入するか、スクラッチで書く必要がある。

• 情報が（まだ）少ない

  比較的新しいライブラリのため、日本語の情報は当然だが、stackoverflow等でも有用な情報が見つけにくい。
  jQueryであれば、詰まった時やconsoleエラー、「あれこれなんだったっけ？」という時はGoogle検索ですぐに回答が（大量に）出てくるが、umbrella.jsについては、まだあまり情報が蓄積されていない印象。
  詰まった時はGoogle検索、ではなく内部デバッグ（中身を見る意味での）が必要となる。（というかその方が早い気がする）

  例えば、jQueryでも頻繁に使用する.val()がなかったので、input要素のvalueを取りたい場合どうするのか、Googleでは回答は見つからないためconsole.log等でオブジェクトの内部を確認してvalueをどこに保持しているかを探す。
  結局.val()に相当する（便利な）書き方はなさそうなので下記のように取得するしかなかった。（他によい方法があれば教えてくださいm(__)m）

  /**
   * ボタンクリックでinput要素のキーワードを取得してajaxリクエストを投げる
   */
  u('button').on('click', (e) => {
  
    e.preventDefault();
  
    // input要素のvalueを取得する
    let keyword = u('input[name=keyword]').nodes[0].value; // TODO: もっと良い方法はないか
  
    ajax(action, options, after, before);
  
  });
  

• 対応ブラウザ

  githubページには以下の記載がある。

  Support: IE11+

  https://github.com/franciscop/umbrella

  jQueryの代替である以上、モダンブラウザ向であることは推測できるが Android、iOS の対応バージョンについては記載が見当たらなかった。
  ただ、.addClassのドキュメント内に以下の記載があるため、Android 4.3 以上には対応している（ように意図している）と推測することはできるか。いずれにしろ、android、iOSについては個別に検証が必要かもしれない。

However, there are also some advantages of using Umbrella's methods instead of native methods. For example, with .addClass() vs native classList.add():

• cross-browser: the classList.add() with multiple elements is not compatible with IE10-11 & Android 4.3-

所感

DOM操作、ajax、イベントハンドリングについてはumbrella.jsで必要十分という印象。
その他のAPIが必要であれば個別に導入すればよいかな。
amimate系であればvelocity.jsなどのより優れたライブラリはあるし、Deferredは既にPromiseやasync/awaitが使える環境であれば不要かも。
レガシーブラウザへの対応が不要であれば「取り敢えずjQueryを使う」という選択肢の代替には十分なり得る印象。