少しの背景
私は2013年にEnglishDomに入社しました。最初の仕事は、現在の機能と将来のサービスのための管理パネルを開発することでした。 BackboneとBootstrap、またはEmberとBootstrapを使用してこのアーキテクチャを作成し、独自のUIフレームワークを作成したいと考えました。 1つの選択肢は、 Ext JSをUIフレームワークとして使用することでした。
ドキュメントを理解し、例を見て、半日後にローカルデータを使用して最初のテーブル（グリッド）を作成しました。
結論1：エントリーのしきい値は小さく、すべてが明確でシンプルです。
このモジュールは以前と同じように見えます。
作業の最初の2日間で、単一のhtmlタグを記述せず、 CSSセレクターの記述方法をすでに忘れていたことに気付きました。 しかし、私がしたことはクロスブラウザでした。
結論2：Ext JSでは、クロスブラウザーUIの作成は素晴らしく高速です。
私が気づいた別のポイント：これらは、ビュー、ストレージ（ストア）、およびトランスポート（プロキシ）のための長い（200行を超える）構成です。 定義の代わりに、他のオブジェクトに入れ子になっている配列に入れ子になったオブジェクトを書いたので、それらを書くことは珍しかったです。 良くも悪くもわかりませんが、それは私にとっては珍しいことでした。
結論3：Ext JSコードは大きな設定ファイルに似ています。
たとえば、これはテーブルコードがどのように見えるかです：109行と多くのネスト、そしてこれはストレージなしで、ただのビューです。
テーブルビューコード
Ext.define('KitchenSink.view.grid.ArrayGrid', { extend: 'Ext.grid.Panel', requires: [ 'Ext.grid.column.Action' ], xtype: 'array-grid', store: 'Companies', stateful: true, collapsible: true, multiSelect: true, stateId: 'stateGrid', height: 350, title: 'Array Grid', viewConfig: { stripeRows: true, enableTextSelection: true }, initComponent: function () { this.width = 600; this.columns = [ { text : 'Company', flex : 1, sortable : false, dataIndex: 'company' }, { text : 'Price', width : 75, sortable : true, renderer : 'usMoney', dataIndex: 'price' }, { text : 'Change', width : 80, sortable : true, renderer : function(val) { if (val > 0) { return '<span style="color:' + 'green' + ';">' + val + '</span>'; } else if (val < 0) { return '<span style="color:' + 'red' + ';">' + val + '</span>'; } return val; }, dataIndex: 'change' }, { text : '% Change', width : 75, sortable : true, renderer : function(val) { if (val > 0) { return '<span style="color:' + 'green' + '">' + val + '%</span>'; } else if (val < 0) { return '<span style="color:' + 'red' + ';">' + val + '%</span>'; } return val; }, dataIndex: 'pctChange' }, { text : 'Last Updated', width : 85, sortable : true, renderer : Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }, { menuDisabled: true, sortable: false, xtype: 'actioncolumn', width: 50, items: [{ iconCls: 'sell-col', tooltip: 'Sell stock', handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); Ext.Msg.alert('Sell', 'Sell ' + rec.get('company')); } }, { getClass: function(v, meta, rec) { if (rec.get('change') < 0) { return 'alert-col'; } else { return 'buy-col'; } }, getTip: function(v, meta, rec) { if (rec.get('change') < 0) { return 'Hold stock'; } else { return 'Buy stock'; } }, handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex), action = (rec.get('change') < 0 ? 'Hold' : 'Buy'); Ext.Msg.alert(action, action + ' ' + rec.get('company')); } }] } ]; this.callParent(); } });
しばらくして、より複雑なタスクが発生し始めました。 たとえば、あるタスクではビューの構成を動的に変更する必要があり、別のタスクではバックエンドの標準トランスポートを変更する必要があり、3番目では、メソッドの1つで現在のビューのコンテキストを取得する必要があります。 また、いくつかのコンポーネントで重複したコードがすでに表示されていることにも気付きました。
結論4：エントリーのしきい値は小さいですが、高品質のアーキテクチャを一度に構築することは失敗します。
これらの問題を解決するために、ドキュメントと専門サイトを一時停止して読み直す必要がありました。 いくつかの発見をした後、私は思慮深く、スケーラブルに、モジュール式に、拡張可能に、新しいコードを書き、古いコードをリファクタリングし始めました。
結論5：フレームワークは、そのアーキテクチャアプローチ（MVCおよびMVVM）を促進します。これに従うと、自転車や問題は発生しません。
その後、私はドキュメントを読むのにより多くの時間を費やし始めました。 ドキュメントでは、各コンポーネントにコンポーネント階層（継承チェーン）、使用するモジュール、特定のメソッドのソースコード、public / private / forbidden / new / chainメソッド、およびすべてのイベントのリストがあります。
結論6：ドキュメントは素晴らしいです、 JSDuckは良いツールです
これは、テーブルコンポーネントの継承階層、依存関係、サブクラスがJSDuckでどのように見えるかです。
したがって、 テーブルのドキュメント。
タスクも単純だったので、私はほとんど単純なコンポーネントを書きました。 ほとんどの場合、これはテーブルを表示し、ツリーを作成することです（ treepanel ）。 しかし、製品チームが新しい機能を受け入れた後、彼らは提供されたインターフェースの欠点のいくつかを指摘しました。
別のページネーション、テーブルのフィルタリング、および標準セットにはないいくつかの小さなものが必要でした。 そして、彼らは公式のプラグインにさえいませんでした。
たとえば、テーブルには184のメソッドと105の異なるイベントがあります。 このように、最もトリッキーなタスクとインターフェイスでも十分です。
105テーブルイベント
activate
add
added
afterlayout
afterrender
beforeactivate
beforeadd
beforecellclick
beforecellcontextmenu
beforecelldblclick
beforecellkeydown
beforecellmousedown
beforecellmouseup
beforeclose
beforecollapse
beforecontainerclick
beforecontainercontextmenu
beforecontainerdblclick
beforecontainermousedown
beforecontainermouseout
beforecontainermouseover
beforecontainermouseup
beforedeactivate
beforedeselect
beforedestroy
beforeexpand
beforehide
beforeitemclick
beforeitemcontextmenu
beforeitemdblclick
beforeitemmousedown
beforeitemmouseenter
beforeitemmouseleave
beforeitemmouseup
beforereconfigure
beforeremove
beforerender
beforeselect
beforeshow
beforestaterestore
beforestatesave
blur
boxready
cellclick
cellcontextmenu
celldblclick
cellkeydown
cellmousedown
cellmouseup
close
collapse
columnhide
columnmove
columnresize
columnschanged
columnshow
containerclick
containercontextmenu
containerdblclick
containermouseout
containermouseover
containermouseup
deactivate
deselect
destroy
disable
dockedadd
dockedremove
enable
expand
filterchange
float
focus
glyphchange
headerclick
headercontextmenu
headertriggerclick
hide
iconchange
iconclschange
itemclick
itemcontextmenu
itemdblclick
itemmousedown
itemmouseenter
itemmouseleave
itemmouseup
lockcolumn
move
processcolumns
reconfigure
remove
removed
render
resize
select
selectionchange
show
sortchange
staterestore
statesave
titlechange
unfloat
unlockcolumn
viewready
現在の機能も適切であり、ユーザーの問題を解決するように思えましたが、時間があったので、必要に応じてインターフェースを作成することにしました。 公式フォーラムとGitHubにアクセスして、これらのタスクのプラグインを探しました。 品質の異なるそれらが十分にありました。 タスクを明確に解決したプラグインもありましたが、それらは非公式であり、適切なドキュメントがなく、バグがありました。 私はそれらを書き直さなければならなかった。
結論7：フレームワークには多くのさまざまなコンポーネントとAPIが含まれていますが、すべてのタスクを解決できるわけではなく、オープンソースのプラグインがすぐに機能するとは限りません。
時間が経ち、管理パネルにはすでに20を超えるセクションがありました。コンテンツ、ユーザー、学生の訴え、郵送、サーバーの監視、エラーをきめ細かく管理できました。 私は開発者として嬉しかった-すべてがうまくいき、バグはほとんどなかった。 ある時点で、管理パネルのユーザーから上訴と苦情が始まりました。 問題は、お気に入りのブラウザでフリーズや遅延が発生したことです。
これは、Ext JSが多数のDOMノードを作成し、多くの再描画が発生し、fpsが0に落ちることがあるためです。
この問題の解決策は、コードを最適化し（これを行う方法に関するヒントがあります）、ハードウェアをアップグレードすることです。
結論8：Ext JSは「重い」フレームワークです。
また、質問に対する答えが見つかりませんでした。 一般に、私はこの問題（別の自転車）を解決する方法を知っていましたが、「正しい方法で」書き、最も極端な場合のために「自転車」を残したかったです。 フォーラムで質問をしたところ、驚いたことに、彼らはすぐに答えてくれ、問題の解決を助けてくれました。
結論9：コミュニティは積極的に問題の解決を支援しており、フレームワークは本当に活気に満ちています。
もちろん、Ext JSを使用したオープンソースの人気を考慮して、すべてがそれほど単純で明確なわけではありません。 Habréのライセンスに関する良い記事があります;それに対するコメントも役に立ちます。
結論10：ライセンスを注意深く読み、フレームワークを使用する独自のバージョンを見つける必要があります。
Senchaには他にも多くの製品があります。 すべてのツールを使用したわけではありませんが、たとえば、 React Ext JSとSencha Architectを試してみたいと思います。これまでにこのような製品を見たことがないからです。
結論11：開発中の優れたエコシステム。
当社は顧客とそのトレーニングの進捗状況を非常に心配しており、トレーニングのあらゆる側面をフォローしたいと考えています。 このタスクを達成するには、優れたCRMが不可欠です。 技術部門がツールを作成することを決定しましたが、何を推測しますか？ 新しいデジタル教科書で何を書きますか。 タスクはシンプルであることが判明し、2人の開発者（フロントエンドとバックエンド）による1スプリント（10日間）で、学生と教師のすべてのリクエストを集約し、システム内にタスクを作成し、システム自体がチケットステータスを持つカンバンボードのようなシンプルなMVP CRMが作成されました。 また、アピールごとに、数回クリックするだけで問題を解決し、ユーザーに対応することができます（メールレターを解析し、生徒や教師とやり取りします）。
別のフレームワークを選択した場合、このタスクにはさらに時間がかかると確信しています。
これがこのツールの外観です。
タスクは列間で移動できます（ドラッグアンドドロップ）。 各タスクはモーダルウィンドウで開きます。 通話の履歴全体を確認できる場所で、チケット自体を解決できます。
結論12：アプリケーションのビジネスロジックに集中し、タスクの最初の数分からそれを書くことができます。
ここで詳細に停止したいと思います。
この結論は、Ext JSを長年使用し、BackboneとReactJsで記述されたクライアントアプリケーションのタスクを並行して使用した後、最も重要な結論の1つであると考えています。 比較するものがあります。
これは、特定の問題を解決するためのテクノロジーの選択の成功例の1つです。 ビジネスロジックの記述は、顧客が開発者に期待するものであり、実際に支払われるものです。
より頻繁に起こる-彼らはファッショナブルなフレームワークを取り、さまざまなプラグインの友人を作るのに多くの時間を費やし（たとえば、react-router-reduxを使用してreact-reduxを使用するreact-redux）、別のコンポーネントを作成してオープンソースに入れ、独自のクールな100500バベルのルーターまたはプラグイン。 また、独自のコンポーネントIF、Switch for JSXを作成することもできます。
これはすべて素晴らしいことですが、ビジネスの側面から見ると、開発者が自分自身に問題を作成し、そのソリューションの複雑さについて隅々まで話し、しばらくして彼が英雄的に解決し 、拍手する人を見ているようです。 そのようなもの。
それでも、メイントピックに戻ります。
私はこのシステムを書いた唯一の人物であり、Ext JSで働いたことがないプロジェクトの新規参入者がシステムを理解し、それが結果を生み出すまでにどれくらいかかるかという質問に常に悩まされていました。 新しい従業員を紹介し、このプロジェクトの作業について説明した後、結果は非常にまともでした。 恐怖は実現しませんでした。
管理パネルの開発が開始されてから4年が経過しました。 新しいフレームワーク、テクニック、アプローチが登場し、古いものは流行しなくなり、一部はあまり流行しませんでした。 私たちの機能の一部はもはやビジネスに必要ではなく、その一部はかなり前に書き直され、そのコードの一部はまだ生産中であり、以前と同じように機能し、動作します！
結論13：Ext JSコードは時の試練をパスしました。
まとめ
私たちが直面しなければならなかったさまざまなタスクのおかげで、Ext JSでの開発の経験が本当に好きで、他のフレームワークでの他の経験と比較することはできません。 私が本当に気に入ったAPIのアーキテクチャの方法、アプローチ、美しさ。 他のフレームワーク（別の自転車）で同じアプローチを自分で実装することさえ夢見ていました。
上記に基づいて、私は結論付けました-Ext JSは複雑な管理パネルを構築する問題を解決するのに最適です。
コメントで、このような問題を解決するために使用するツールとフレームワーク、遭遇した困難、およびビジネスロジックの作成に費やす時間を教えてください。
リーダーボーナス
オンラインコースを使用して3か月間の英語学習を無料でご利用いただけます。 これを行うには、2017年12月31日までリンクをたどるだけです。
ITプロフェッショナル向け英語コースの個別レッスンでお会いできることを嬉しく思います。
無料の入門レッスンを受けて 、あなたの知識レベルに関する包括的なフィードバックを得てから、好みの教師とトレーニングプログラムを選択してください！