Ext JS ユーザー紹介: Paymo

Paymoは、2008年、フリーランスや小規模企業を主なターゲットとした、シンプルなタイムトラッキングアプリケーションとして誕生しました。それ以来、事業の多様化、アプリケーションへの機能の追加により、着実に成長を遂げています。

過去10年間の歩みを早送りで振り返ってみると、Paymoは今や、本格的なオンラインプロジェクトマネジメントソフトウェアへと変貌し、世界各地の70,000にのぼる小規模企業やフリーランスにサービスを提供しています。同ソフトウェアの主要な目的は、プロジェクトを最初から最後まで、単一の環境下で、シームレスに管理するために必要な機能であるタスクおよびタイム管理、タイムトラッキングとレポーティング、チームのスケジューリングとプロジェクトアカウンティングをすべて提供することです。

同アプリは、フリーランス向けには限定無料プランで、中小企業向けには2種類の有料プランで提供されます。学校や大学は1年間、無料利用でき、NPOには50％の割引プランが用意されています。

Ext JSで構築したPaymo ダッシュボード。Paymoによって、プロジェクトチームは、プロジェクトの立ち上げから企画、実施、調整、支払までのライフサイクル全般にわたって、シームレスに管理することができます。

Ext JSを選択した理由

2012年、私たちは、オンラインアプリの利点をすべて維持しつつ、デスクトップ上と同様のWebエクスペリエンスを顧客に提供するために、既存のプロジェクトマネジメントパッケージ（古典的なPHP Web 1.0アプリ）を書き換える決定をしました。最初の調査段階を経て、私たちは、Sencha Ext JSの採用を決めました。モバイルデバイスでも使用できる強固なWebフレームワークを必要としていたのです。

クラスシステム

Ext JSの一番の長所はクラスシステムです。これは、フレームワークのクラスとコンポーネントの全階層を、クラスをベースとしたオブジェクト指向プログラミング（OOP）スタイルで階層化できるSencha独自のメカニズムで、Javascriptが本来持っているプロトタイプベースのパラダイムとは異なる点です。

クラスベースのOOPを採用しているJava、C#、C++といった言語の経験がある開発者であれば、このフレームワークを容易に習得できます。そして、システム内のクラスとコンポーネントを明確に可視化し、この階層でどこでも拡張、カスタマイズが可能となります。Ext JSは、「閉じた」モノリシックなシステムという第一印象を与えますが、実際にはそうではありません。

Docs

さらに、極めて重要な点として、フレームワークの異なるバージョンにも対応可能な、Senchaが提供するよく整理されたオンラインドキュメントが挙げられます。Docsは、フレームワークの背後にあるコンセプトを明確、詳細に記述しているので、時間とコストの節約につながります。

App開発ライフサイクル

Paymoチームは、Sencha Ext JSが、以下のようなアプリ開発のあらゆる側面を網羅できる点を評価しました。

• データ
• レイアウト
• ルーティング
• テーマ構成
• ローカライゼーション
• ビルド

パッケージは、MVC/MVVMアーキテクチャをサポートするスタイルもいくつか提供します。フレームワーク アーキテクチャがガイドラインを提供してくれるので、若手の開発者にとっては有用な特徴です。

Ext JSのもうひとつの強みは、アプリデータをロードし、保存できるデータレイヤーです。データレイヤーは「Model」、「Store」、「Proxy」、「Session」といった多数のクラスで構成されており、データ構造を容易に定義することができます。

Paymo内では、「Model」はユーザー、プロジェクト、タスクといったアプリのエンティティに相当します。他方、「Store」はモデルを格納したコレクションで、そこからソート、フィルターまたはページング処理が可能です。「Session」は、「Model」の重複がないこと、特定の「Model」を包含するすべての「Store」が同じ「Model」に関連づけられていることを保証します。この事実によって、アプリの一領域におけるタスク名の変更は、自動的に、アプリケーション全体に渡ってタスク名を更新することになります。

Ext JSで構築したPaymo内のタスク マネジメント。タスク、タスクリスト、期限、マイルストーン、カンバンモジュールを使って、タスクと活動を整理します。

Ext JSで構築したPaymo内のアドバンスト タスク マネジメント。フィルターでアドバンスト タスクビューに切り替えたり、フルタスクビューをチェックして、すべてのタスク詳細を確認できます。

コンポーネント ライブラリ

Ext JSに含まれるビルト済のUIコンポーネントと非UIコンポーネントのライブラリは膨大で、豊富な選択肢を提供します。SASS構文の助けを借りれば新しいテーマの設定はきわめて容易であり、変数、入れ子ルール、mixin、インライン・インポート等を使って、万事においてスピードアップを図ることができます。テーマの内部構造が一貫した体系化を助けます。

新しいコンポーネントの作成と再利用についても同様のことが言えます。とにかく簡単で、すべてのプラットフォームを横断して共有されるコードが、シームレスなエクスペリエンスを実現します。

私たちは早い段階から、グリッド、ウィンドウ、タブパネル、ボタン、メニュー等、Ext JSの強力なコンポーネント ライブラリを活用しました。グリッドコンポーネントとページング処理したDOMをレンダリングする機能（Buffered Renderer）を使って、アプリケーションのロード速度とユーザーエクスペリエンス全体を向上させることができました。

さらに、クロスブラウザ／クロスプラットフォームの互換性も強みです。これによって、開発チームは、ビジネスロジックに一層注力し、HTML/CSSスタイリングでの作業時間を短縮することができました。

Ext JSを使うビジネス上の価値

私たちは、Ext JS、Sencha TouchおよびSencha Cmdを使用して、Webテクノロジーだけで様々なプラットフォームを多数開発することができ、それと同時に、異なるプラットフォーム上でコンポーネントを再利用してきました。Sencha Cmdの使用により、ビルドシステムを当社の継続的デリバリーシステムに統合することができたのです。

私たちは、Ext JSを使用することで、当時市販されていた他のソリューションと比較して、開発時間を半分に短縮できたと評価しています。

新規導入を進める開発者の皆様へのアドバイス

• ドキュメンテーションを注意深く読んだ上で着手すること
• 必要な場合を除き、プライベートメソッドは使わないこと。これを守ることにより、Ext JSの新しいバージョンへのアップデートが容易になります
• 不要なコンポーネントは削除し、意図する用途に合わせてコンポーネントを使用するよう努めること
• DOMサイズとCSSパフォーマンスに細心の注意を払うこと
• 可能なときにはSenchaコミュニティに貢献すること