HOME > 開発者向けBLOG > Sencha Blog >  Ext JS と Sencha Architect カスタマースポットライト:Williams

Technology Note 開発者向けBLOG

Sencha Blog

Ext JS と Sencha Architect カスタマースポットライト:Williams

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Ext JS and Sencha Architect Customer Spotlight: Williams を翻訳したものです。

Williams Williams はエネルギー・インフラにフォーカスした上場している(NYSE: WMB) フォーチュン 500 企業です。我々は州間のガスパイプライン、石油の中流でのギャザリングや加工、天然ガス、オレフィンの製造や運搬を管理しています。その規模はメキシコ湾の深海からカナダの油砂まで広がっています。

我々の製品、「Amigo」は 現場で使われてるメーター、コンプレッサーステーション、脱水機などの機材をリアルタイムでモニタリングするために提供されています。我々はプッシュ技術を利用し、ユーザーとお客様が、何のデータを見たいかとか、現場での資産間の関係性についての理解を深められるように高度な公式演算をを定義できるようにしたりしています。

Main screen アプリケーションのデスクトップにリアルタイムモニターが表示されるメイン画面です。大きなウィジェットは、二つの状態があります。前面に数字が書いてあり、裏返った後面は小さなトレンドチャートになっています。

Ext JS と Sencha Architect を選んだ理由

Architectは継続的なコーディングを強化します

我々は Ext JS 4 とともに Architect 3 を導入することで、チームにスタンダードな開発手法を提供し、Sencha フレームワークを知らない開発者へのトレーニングも実施しました。最新の Ext JS 5 のリリースにより、我々は未来へのビジョンがより役立つものになると気づき、機能や特性が増やせることがわかりました。

JavaScript の世界の破滅の原因のひとつは、パターンの不足です。これは、 “Wild West Coding” と呼んでいるのですが、つまりは動くなら何でもいいということです。 JavaScript を書くというのは、他のより一貫した言語とはわけが違います。ダイナミックな言語であるということは利点だけでなく、欠点もあります。 一番大きな欠点のひとつは、どんなプロパティ、メソッド、クロージャーが JavaScript のコードペースのどの部分にあっても、正常に作動する可能性が高いという事実です。 しかし、半年後にそのコードに戻った時や、すでに作者がいないコードがどんな仕組みで動いていたかを解明しなければならなくなった時には、あまりいいことではありません。 何が起きるかというと、コードは新しく書き加えられ、より混沌とした状態に陥り、また次に扱う人も同じ状況に陥ってしまう悪循環となってしまいます。これはコストもかかることであり、物後を前に進めるという意味では何も良い事はありません。 それにひきかえ、Architect は MVC パターンを強要します。つまりコードは、コードが本来あるべき場所にしか置く事ができず、そのため簡単に見つけることができ、メンテナンスやアップデートも楽にできます。更には予測可能な命名規則を使えば、コードベースはより理解しやすくなり、リリースサイクルも増加し、問題の切り分けもクリアになるので製品は圧倒的に安定したものになります。もちろん、「正しくない悪いコード」を書く事はできますが、それでも整理整頓されているだけでもかなり違います。

Architect は質の質の低い悪いコーディング癖を減らし、標準に準拠した JavaScript を作ることができます。Ext JS は非常に大きく、多機能なフレームワークであるため、新しい開発者や若い開発者には手に負えないかもしれません。Architect は生産性のあるコーディングの時間短縮を助けてくれます。フレームワーク内の各コンポーネントは沢山のオプションやプロパティがあり、システムを学ぶ上ではものすごく役立ちます。また、Architect は、フレームワークを学んでいる開発者に、よりソリッドなアプリケーションの制作ができるようサポートします。そして、経験をよりつんだ熟練開発者には Ext JS や Touch などの基礎フレームワークがアップグレードされるたびに、新しい機能性を発見することができます。

私たちは Architect をバージョン 2 から使い始め、それから 3.1 までアップグレードしました。新しい機能にはもちろん満足しています。私たちは Architect が開発者とデザイナーを近づけ、より密着した関係で働けるようになることがわかりました。もちろんデザイナーは CSS についてある程度は知っている必要がありますが、CSSの class をアサインしたり、UI を作る裏のロジックを理解する必要はありません。UIが一度作られてしまえば、デザイナーと開発者にとって新しいコンポーネントをスタイリングすることがよりわかりやすくなります。

我々が Architect を バージョン 3 にアップグレードしたのにはいくつか理由があります。私たちの Ext JS アプリケーションをスタイリングするということは、ユーザーの期待する UX を生成するためには非常に重要です。私たちは現在2つのカスタムテーマを作り、ユーザーの好みや環境に合わせていったりきたり切り替えられるようにしてあります。その場合、UI を有効活用し、テーマによって特定のスプライトを変えるだけでなく、CSS クラスも独自な物を使い、丁度良い見た目や感触を実現しています。これは過去にもできましたが、より時間がかかっていました。私たちは 2週間以内で、アプリをベースグレーなテーマから、下記のスクリーンショットの 80%の状態くらいまでリスタイルすることに成功しました。このような迅速な対応は Architect のスタイルツールなしでは実現できませんでした。

Main screen with second custom theme 二番目のテーマでのメインスクリーン

再利用できるコンポーネント

もうひとつの Ext JS の素晴らしい機能は、用意されたツールをカスタマイズできるだけでなく、プロジェクトや製品間で共有し、再利用できるコンポーネントを作ることが可能なところです。こういった再利用はブランディングや UX での一貫性を保つのに役立ちます。その結果、私たちの UI エレメントのビジュアルランゲージは製品の間でも広がり、ユーザーは同様なた操作法なので、自動的にアプリケーションの使い方を理解することができます。

Vertical Navigation インクリメンタルサーチが上部についた縦型ナビゲーション。これはバッファードグリッド上でフィルターし、平均して130ミリ秒でサーバーと往復で通信します。

例:上記のスクリーンショットでは、削除、保存、新規作成、コピー、カスタムボタン、命名コントロールなどが入っているバー (オレンジ色のボックスでハイライトされています) があります。このバーは、スタイルされたシンプルなコンテイナーですが、実はコンポーネント化されていて、このアプリ内で使われているだけでなく、他のプロジェクトでも使用されています。インクリメンタルサーチが上部についた縦型ナビゲーションも再利用が可能でアプリ内でも複数の箇所で登場します。

このスクリーンショットは私たちが複数のスタイルのグリッドを使っていることを表しています:Point/Analog Browser、 Working Points、 そしてポップアップです。ただのグリッドだからといって、グリッドの様に見えなければいけないというわけではありません。私たちは Ext.toolbar.Toolbar を使う事で数式パートを表示するようにしていて、ツールバーに見えないようにスタイリングしてあります。

Formula Editor 数式エディタはポップアップを使う事で、ユーザーがSencha toolbar ウィジェットに代入する値を選択できるようになっています。

Ext JS と Sencha Architect を使用する事業価値

Ext JS と Architect を使うことで、私たちの総保有コスト (TCO) を下げることができます。それは開発者がプロジェクトごとにコンポーネントを再生成する必要なく、一つひとつのプロジェクトに集中でき、業務要件を果たすことができるからです。柔軟な Sencha フレームワークのおかげで、私たちの要件を満たしてくれるまで、既存のコンポーネントを徹底的にカスタマイズすることができます。私たちはゼロから物を作る必要は無く、業務要件を果たすために完全にコンポーネントをカスタマイズすることができます。

費用便益分析 (cost benefit analysis) を行えば、強固なフレームワークとコンポーネントの再利用がいかに有益かがわかりやすくなります。一度安定した再利用できるコンポーネントができればプロジェクトを開発するコストも正確に予測できるようになります。このプロセスでは常に、リスク分析や変異性などを考慮しなければいけませんが、より正確に予測できるアイテムが多ければ多い程、分析の精度は高まります。請負人であろうが社員であろうが、我々はプロジェクトでご飯を食べていっているので、それらのプロジェクトは投資されないと実現しません。

私たちは新製品の開発時間が短縮できただけでなく、アプリがデプロイされた後のアップデートやメンテナンスの時間も大幅に短縮できました。Architect を使うことで、若手の開発者がコードベースを改良したりメンテナンスしている間に、熟練開発者が新しい機能を作ったり、新しいアプリケーションのコンポーネントをカスタマイズすることができます。そして、開発チームを10人以下の小さいチームに抑えることで、素早くお互いを助け、学び合えるようにオープンなコミュニケーションを促進させています。

新しい開発者へのアドバイス

フレームワークをまず覚えましょう!何でもかんでもオーバーライドしようとすることはやめましょう。フレームワークはあなたが知っている以上に多機能なはずです。

これは jQueryではありません。フレームワークが提供するパターンを利用して、“Wild West Coding” は控えましょう。

パフォーマンスに注意してください。フレームワークは強力ですが、巨大な企業アプリケーションでは同時に複数のことを行おうとすると固まってしまうことはあります。DOM が重いことを行う場合は、Ext.suspendLayouts() Ext.resumeLayouts() を使うことを覚えましょう。

モバイルデバイスで動くからといって、モバイルデバイスに適応しているとは限りません。 これは開発者よりもマネージャーにとって大事なのかもしれませんが、プラットホームやフレームワーク間で (Ext JS もしくは Sencha Touch) デザインを考慮しなければいけないこともあります 。この考慮というのは、マウスと指の違い、データの量、メモリー使用量、スクリーンのサイズと向き、などのことです。

Architect はあなたの友達です。 どんなツールでも一緒ですが、Architect を学ぶには時間がかかるかもしれませんが、その時間は実際に使用する時の開発スピードの速さですぐに取り返せます。Architect はあなたを様々な面から手助けしてくれます。私たちのチームの生産力も高まりました。スクリーンショットで紹介しているアプリケーションは、全て Architect 単独で作られたものです。

最後に

Ext JS と Architect は Web アプリケーションやモバイルアプリケーションを作る上で共に素晴らしいツールです。Sencha は柔軟で拡張もしやすいコンポーネントを含んだ上質なフレームワークやツールセットを提供しています。Ext JS は 大きいデータ量を扱う企業レベルのアプリ開発に適していますが、他のフレームワーク (AngularJS や jQuery) はそういった目的のためには作られていません。大容量データを扱うアプリケーションを組み立てる場合、その目的の為に作られたツールを使う事がベストだとわかりました。もちろんどんな物でも作ったり動かすことはできますが、安定性やメンテナンスのしやすさというものを犠牲にしなければならないでしょう。もし大きなデータ量を扱い、速さも求め、完全にカスタマイズされた UI が必要なアプリがある場合、Ext JS と Sencha Architect を使うべきです。

PAGETOP