Taskloudを制作する際に使用したライブラリまとめ

Taskloud
LINEで送る
Pocket

久々にフロントの話題です。
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より助かることが多いかもしれません。
スタイルが崩れたり動作がものすごく重くなったりと、こいつが悪さをすることも多いのですが、仕組みをある程度把握していれば、ドハマりすることは無いと思います。

スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ!(Frontrend Advent Calendar 2013 – 06日目)

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のコレクションが追加更新されるので、addremoveイベントの発火に合わせてコードを書いていけばOKです。

さらにMarionetteと組み合わせると、
一覧画面なんかはItemViewにDOMイベントの設定さえすればほぼ勝手に動く状態になります。

まとめ

と、Taskloudではこのようなライブラリを使用しています。
バージョン1のときに色々とフルスクラッチして痛い目を見たので、今回は「なるべくライブラリに任せて自分のコードを書かない」という方針でいきました。

ライブラリを多用しているために、学習コストやライブラリ同士の兼ね合いや調整など新たな問題も起こっていますが、フルスクラッチで書いてドハマりするよりもはるかに安いコストで済んでいると思います。

ハイブリッドアプリやWebアプリのモバイル対応等を作られる方がいらっしゃいましたら、参考になれば幸いです。

LINEで送る
Pocket