Taskloudを制作する際に使用したライブラリまとめ
久々にフロントの話題です。
4 月にTaskloud というアプリをリリースしました。
その際に、色々と使ってみたかったライブラリを使って感触を得たので、
ご紹介がてら使用感をメモしておきます。
FastClick
ftlabs/fastclick
https://github.com/ftlabs/fastclick
Github で star7300 越え。
言わずと知れた、モバイル web アプリでの click 反応速度を早くするライブラリ。
こいつを導入しておくと click イベントを監視している際の、タップ時のもたつきがかなり軽減できます。
また、フォーム等入力要素やリンクなどjs を入れない部分の反応速度も上げられるので、モバイル Web アプリの操作性を上げるには必須といっても過言ではないでのは。
Flipsnap
flipsnap.js
http://pxgrid.github.io/js-flipsnap/
PixelGridという会社さんが作られている、スライダーを実現するライブラリです。
フリップ？ スワイプ？ 操作で左右にページをめくるスライダーは色々とあるのですが、安定性、カスタマイズ性、動作の自然さ・軽快さで一番しっくり来ました。
バージョン 1 の時はボタンでページ移動していたチュートリアルの部分に導入しております。
Zepto
Zepto.js: the aerogel-weight jQuery-compatible JavaScript library
http://zeptojs.com/
ざっくり言えば軽量版 jQuery。
jQuery との互換性を保ちつつ、余計な機能を省いて読み込み速度を高速化しています。
それだけではなく、ハードウェアアクセラレーションを使用した滑らかなアニメーションがデフォルトで有効になってたりと、モバイルなら jQuery より助かることが多いかもしれません。
スタイルが崩れたり動作がものすごく重くなったりと、こいつが悪さをすることも多いのですが、仕組みをある程度把握していれば、ドハマりすることは無いと思います。
Underscore.js
Underscore.js
http://underscorejs.org/
Backbone.js を使用するための依存ライブラリと思っていたのですが、これ単体でも十分に使えます。
リスト操作に弱い js の強い味方です。
Taskloud はタスク管理ツールということで、リストを操作する機会が多いのでフィルタリングだったり一括操作だったりと、大活躍しています。
とても汎用的な機能を提供してくれているので、アプリに限らず色々なところに役立ちそうなライブラリです。
Backbone.js
Backbone.js
http://backbonejs.org/
軽量、自由度の高い MV*なフレームワークです。
素の js が理解できていれば学習コストは提供されているプロパティやメソッドを知るくらいです。
このように学習コストが低いのと、コードの挙動が自然（Angular とかのようなごにょごにょを特に使ってない）なので、
いざというときは、直接ソースを読めば何をしてるかほぼ確実にわかります。
自由度が高すぎてオレオレコーディングで実装すると破綻してしまうので、
上に一枚 Marionette というライブラリを噛ませています。
単体では他の js フレームワークに比べて機能が少なめですが、
多数のプラグインが開発されているので、自由に選べて必要な物だけ組み込めるのが嬉しいところです。
Marionette
Marionette.js
http://marionettejs.com/
Backbone にいくつかの制約と拡張を加えるライブラリです。
特に入れ子になったビューや、一覧画面系の扱いがとても楽になります。
また、分かりきった処理（ビューにモデルを渡してrender().$elのような操作）を書かなくて良くなるので、コードの見通しが良くなります。
記述量が減るし、Marionette が提唱する Backbone.js のお作法に則って実装すれば、
保守性が高く、構造化されたコードを書くことができます。 こちらもコードがシンプルで、ソースを読めば何をしてるか把握できるのが魅力です。
DefinitelyTyped
今回は一定レベルの安全性と保守性を保つために、素の js ではなくTypeScriptを使用しました。
しかし TypeScript はコンパイルや型チェックがある反面、宣言ファイルを作る手間があります。特にサードパーティのライブラリの宣言ファイルを作成するのはとても面倒で尻込みしてしまいがちです。
そんなときに活躍するのがこちら。
色々なライブラリの宣言ファイルの寄せ集め、といった感じのものです。
この宣言ファイル群のおかげで、「このライブラリ使いたいけど.d ファイルが無い…自作するか…」という TypeScript あるあるなハードルの高さを激減してくれます。
また、更新頻度が高く使いたかったライブラリの宣言ファイルがいつの間にか追加されてるということも開発中に多々有りました
Firebase
Firebase – Build Realtime Apps
https://www.firebase.com/
これはライブラリというよりは Web サービスなのですが、ご紹介です。
サーバサイドのコードを一切書くことなく、リアルタイムなデータの保存、反映が可能になる Web サービスです。
バージョン 1 の Taskloud はサーバサイドを Rails で実装し API サーバとして利用していたのですが、
Heroku のサーバは一定時間アクセスがないと落ちて再びアクセスが有った時の起動に時間がかかるという仕様や、メンテのコストも下げたい、無料アプリなのでお金を掛けたくないということで、こちらに乗り換えました。
軽量なタスク管理ツールには情報の更新頻度や同期性はさほど求められませんが、
WebSocket を使うと通信操作がどのような感じになるのか、サクサク動き快適なのか、など実験してみたかったため試験的に導入しています。
backfire
BackFire: Firebase bindings for Backbone.js – Firebase
https://www.firebase.com/blog/2013-01-29-backfire-firebase-bindings-for-backbonejs.html
最後です。
上記の Firebase というサービスを Backbone.js で簡単に利用するためのプラグインです。
Firebase の仕様や振る舞いをさほど気にすることなく、多少コレクションの設定を書き換えれば、あとは Backbone.js のコードにだけ集中できます。
裏側で Firebase と同期して Backbone のコレクションが追加更新されるので、addやremoveイベントの発火に合わせてコードを書いていけば OK です。
さらに Marionette と組み合わせると、
一覧画面なんかは ItemView に DOM イベントの設定さえすればほぼ勝手に動く状態になります。
まとめ
と、Taskloud ではこのようなライブラリを使用しています。
バージョン 1 のときに色々とフルスクラッチして痛い目を見たので、今回は「なるべくライブラリに任せて自分のコードを書かない」という方針でいきました。
ライブラリを多用しているために、学習コストやライブラリ同士の兼ね合いや調整など新たな問題も起こっていますが、フルスクラッチで書いてドハマりするよりもはるかに安いコストで済んでいると思います。
ハイブリッドアプリや Web アプリのモバイル対応等を作られる方がいらっしゃいましたら、参考になれば幸いです。