Latest Ext JS 7.8 is now available. Learn more

Ext JS ユーザー紹介: Paymo

May 13, 2018 186 Views
Show

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

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

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

Paymo Dashboard built on Ext JS. Paymo helps your team seamlessly manage projects through their entire life cycle, from initiation to planning, working, making adjustments, and getting paid. 

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」に関連づけられていることを保証します。この事実によって、アプリの一領域におけるタスク名の変更は、自動的に、アプリケーション全体に渡ってタスク名を更新することになります。
Task Management within Paymo built on Ext JS. Use tasks, task lists, due dates, milestones, and the Kanban module to organize tasks and activities.

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

Advanced Task Management within Paymo, built on Ext JS. Switch to an advanced tasks view with filters or check the full task view to see all task details. 

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コミュニティに貢献すること

 

Recommended Articles

Ext JS ClassicとModernツールキットの違いを理解する

Ext JSは、強力なWebアプリケーション/モバイルアプリケーションを構築するためのJavaScriptフレームワークです。フレームワークには、140を超える高性能でフルテスト済のカスタマイズ可能な UIウィジェット/コンポーネントが搭載されています。さらに、すべての最新ブラウザに対応し、クロスプラットフォーム開発をサポートしています。Ext JSは、アプリを構築するための2つのツールキット(Classic ToolkitとModern Toolkit)を提供しています。それぞれのツールキットは、異なるユースケースに対応するように設計されており、独自の機能と利点を提供します。

Ext JS 7.8リリース

このたび、Senchaチームは、Sencha Ext JS 7.8のリリースを発表しました。このリリースでは、7.7リリースに続き、Grid、Timefield、Chart、TreePanelなどユーザーの皆さんからの要望に応え、ModernおよびClassicツールキットに数多くの品質強化を行っています。また、Ext JS 7.8には、Classicツールキットの新機能Froalaに加え、CheckBox、Grid、DataViewの改善、Grid、Combo、CheckBox、Chart、Date Field、TreePanel、Storeなどに対する要望の多かった機能、双方のツールキットに対する品質改善が含まれます。

Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript エコシステムの最新情報について学ぶユニークな機会と言えます。

Ext JS 7.7リリース

このたび、Senchaチームは、Sencha Ext JS 7.7のリリースを発表しました。このリリースでは、7.6リリースに続き、Grid、Modern Sliderfieldなどユーザーの皆さんからの要望の多かった機能の強化に加え、双方のツールキットで、Grid、Chart、TreePanel、Timefield、ComboBox、Storeなどにフォーカスして品質改善を行っています。

Sencha 2023/2024 ロードマップアップデート

このブログ記事では、近い将来に計画しているSencha製品のリリースについての詳細を説明します。 Sencha チームでは、日々お客様と対話を続けており、皆さんのフィードバックが、製品全体の方向性の決定に大きな役割を果たしています。 ロードマップアップデートの詳細を説明する前に、Senchaの新しいサービスを含め、ここ数ヶ月で提供した内容についてまとめておきたいと思います。

JavaScript開発者必見のオンラインイベント「SenchaCon 2023」

常に最新のテクノロジー、ツール、トレンドを把握することの重要性を理解しているJavaScript開発者。そんなエンジニアを対象とした、オンラインイベント「SenchaCon 2023」が開催されます。 このカンファレンスでは、あらゆるレベルのJavaScript開発者が集い、スキルアップやナレッジを共有できる環境を提供します。SenchaCon 2023には、注目のスピーカーが登壇し、興味深いコンテンツをお届けします。まさに、必見のイベントです。 SenchaCon 2023は、米国中部標準の2023年4月12日9時(日本時間4月12日23時)に開催されます。

View More

<!--

coming soon

Something Awesome Is

COMING SOON!
-->

<!--

[gravityform id="31" title="true" description="true" field_values="order_type=other"]
-->