ホテル予約サービスとフライトのコードの分析

分析自体は、競争環境を分析することを目的とした非営利団体のリクエストの一環として2014年3月に行われ、経験から判断すると、多くの小規模な開発者グループ、またはむしろスタートアップになりたい起業家が関心を持っているトピックに関するものです。 検討中のトップサービスのコードを見ると、現時点（2014年8月）で、分析は時代遅れではなく、この方向で開発することを計画しているグループと、競合するプロジェクトのアーキテクチャとテクノロジに精通したい個々の開発者の両方に利益をもたらします。



（応答応答の測定はロシアから行われます。典型的な要求の1つと考えられます。プラハで4日間の3人家族のホテルです。応答のタイムラインはChromeで表示されます。応答速度に興味があります。



基礎となるリンクへ（5リンク

www.booking.com

ostrovok.ru

www.onetwotrip.com/en/#

www.doubletrip.com

www.kupibilet.ru

）、追加できます：

hotels.ru 、

travel.ru 、

iGlobe.ru 、

www.otel.com 、

Oktogo.ru 、

transtour.ru 、

hotelbook.ru

その他。 実際、そのようなサービスを含むサイトやツアーオペレーター会社に人気を博しているため、このようなサービスは多数あります。



この種のサービスの複雑さはそれほど高くないとすぐに言うことができるので、インターフェースの組織は5〜10人の小さなチームにとって手頃な価格です。 しかし、最も高度なサービスはサーバーキャッシングやその他の高度なソリューションを使用しているため、競合他社と比較して品質が異なるため、小規模なチームはこのアプローチを「プル」しません。 したがって、高度なアプローチと、それらと競合することの「どれほど絶望的か」に興味があります。



外国市場では、非常に豊富なサービスの選択肢もあります。これらのソリューションは、ロシアの開発者よりも興味深いものになる可能性があるため、その時点で確認する必要があります。



ヨーロッパ-アメリカ：

ホテルの予約：

www.hostelbookers.com

www.hostels.com

www.gomio.com

www.hrs.com

www.agoda.com

www.hotelclub.com

www.hotels.com

www.wotif.com

www.fastbooking.com

www.makemytrip.com/hotels

www.accorhotels.com

www.bookings-online.net

www.orbitz.com

www.hotelbook.com

www.trip.com

travel.yahoo.com

www.travelocity.com



ツアーとフライトの比較：

www.skyscanner.net

www.expedia.co.uk



アトラクションとプライベートな小規模ホテルを検索：

foursquare.com

www.blackbookmag.com/mobile

www.yelp.com

www.tripadvisor.com



次に、レビューの目的を忘れてはなりません。 質問が競合他社のフロントエンドエンジンである場合、最初のビジネスタスクは「競合他社の中でサービスを促進するための最良の戦略を見つける」ように聞こえます。ここでは、ホテルのリクエストを処理するだけでなく、ホテルの比較やfoursquare.comのような小規模ファーム。 なんで？ 何百もの平等の中で、競争上の優位性を獲得する必要があるからです。 訪問者の興味に合ったフレンドリーな検索-それらの1つかもしれません。

選択した5つのサイトを閲覧

booking.comリーダーグループostrovok.ruは、インフラストラクチャと開発チームへの巨額の投資で知られています。 したがって、それらのコードには、迅速な設計ソリューションと一般的なライブラリはありません。 検索ルーティングは1ページで構成されておらず、ページのソースコードは、サーバー側でページに大量のデータが含まれていることを示しています。 これにより、データベースクエリを繰り返す必要なく、ブラウザに高速出力が提供されます。 同時に、彼らのページには非常に高度な多面的なAJAXリクエストがあり、その形式はフレームワークに明確に帰属することはできません。 これらのリクエストは、データをページに取り込むための多くのタスクを解決します：ルートのリクエスト、POI（Points of Interests）-ホテル、ピボットテーブルおよびマップ上での表示、アパートの写真の描画、フィルターの表示（クライアントまたは新しいリクエストによる）。



簡単にするために、 単純なサービスから複雑なサービスまでの分析について説明します 。

http://www.kupibilet.ru

サービス-ホテル検索時は独立ではなく、フライト検索時のみ独立しています。



プラハ行きのフライトの検索には、リクエストの15秒かかりました。 繰り返し検索では、最初のまったく同じクエリがキャッシュされず、15秒以上かかりました。 レンダリング-0.5秒 www.kupibilet.ru/searchで POSTリクエストの形式で作成されます。 結果は、結果のテーブル（フライト、日、時間、転送など）に入力された複雑なJSONです。

テクノロジースタック：jQuery、jQueryUI、プラグイン、Zingaya（オンラインコール）、自己記述コードの配列、すべてが難読化されています。 MVCフレームワークは注目されていません。 HTMLの入力テンプレートページは使用しません（サーバー上でコードを生成します）。

結論 ：リクエストと処理は伝統的に実行され、サービスは約2.5年前（jQuery 1.8.2）、最新のテクノロジーなしで構築されました。 テンプレートエンジンとMVCは作業と開発をスピードアップでき、jQueryUIがないとページが簡単になります。



フライトリクエストは高度なMVCアーキテクチャを必要としないことに注意してください-リクエストは従来、リクエストボタンを押すことで実行されていました。 本当に高度なアプローチの例は、「オンザフライ」でリクエストパーツとデータバインディングのライブ送信のように見えるかもしれません-国、フライトなどの明確化..しかし、私が知る限り、どのサービスもこのアプローチをサポートしていません。 これには、データベースから多くのサーバーヒューリスティックサンプルが必要であり、これはデータベースにとって困難です。

http://www.onetwotrip.com/en

フライトで検索します。 www.onetwotrip.com/_api/searching/startSync/?ad=1&cs=E&route=0104MOWPRG0504&_=1393342802726の形式の投稿リクエストには32秒かかり、その後見栄えの良い（すごい）フロントエンドを描画するには3秒かかりました。 バックエンドのブレーキは、バックエンドエンジンの速度が遅いか、最適性が低いこと、またはベースのカバレッジが大きいことを示す場合があります（判断が難しい）。 フロントエンドの構成：jQuery 1.8.2、jquery.tmpl.min.js（現在は速度が遅いため人気のないテンプレートエンジン）、多数のjQueryプラグイン、データはJSにパックされています。 MVCもありませんが、このページでは必須ではありません。 しかし、どうやら、見た目が非常に良い結果のレンダリングが遅い理由は理解できます。そもそもquery.tmplは遅いテンプレートエンジンであり、jQueryプラグインの趣味は一般的です。



それらのホテルを検索-最初のリクエストで300ミリ秒、カスケードリクエスト（マップ、写真）の処理で5秒、10秒-すべてのレンダリング。 検索後にページが更新され、多くの新しいスタイルとスクリプトが読み込まれます（40ファイル、圧縮なし）。 jQueryUIがあります。

結論

エンジンはページ出力用に最適化されていません（ファイルは圧縮されていません）。その構造を研究し、それ自体で視覚的な手段（多くの有用なライブラリ名）を使用するのに役立ちます。 テンプレートがメインです。 作成日-また2.5年前。 単一ページはフライトの撤回時にのみ機能しますが、一般的には、可能な限り遅いソリューションが使用されます。 ホテルの部屋の図面は次善の方法で読み込まれます-ビューポートにあるものだけでなく、スクロールの上位のすべてが読み込まれます。

http://www.doubletrip.com/

フライトの検索-35秒の検索と15秒のレンダリング。 レンダリング形式はonetwotrip.comに似ています。 jQueryを介した9つの追加のAjaxクエリの結果がレンダリングに参加しました。 テクノロジー：Modernizr（新​​しいCSSと古いブラウザーとの互換性）、すべてのJSは350Kのファイルにまとめられています。 （興味深いことに、さらに詳しく見るために難読化を解除しました。）jQuery、jQueryUIバージョン1.10.3、最新。 日付、カレンダー（すべてなど）の操作などのプラグイン。 MVCからのキーワードの痕跡は見つかりませんでした。 Handlebars（テンプレートエンジン）についての言及があります。 残りはjQueryプラグイン上に構築され、主にViewコンポーネントのレンダリングに焦点を当てています。 コードが難読化されているため、分析が困難であることを思い出させてください。 しかし、ここにはスーパーテクノロジーはなく、見えません。



ホテルを検索します。 レンダリング-5秒、クエリ-1秒。 出力の構造は、IsletのjQuery 1.8.2に非常に似ており、別のテクノロジーを使用してコードが部分的に収集されたことがわかりますが、最初の検索のように、理解しにくい非常に難読化された大きなJSもあります。 ほとんどの場合、これらはすべてホテルや地図の表を描画するためのサービスコードです。 埋め込まれたインラインコードの大きな配列があり、明らかに、ページがロードされるときにモデルデータが送信されます（「singlepage_old」：「control」、「forced_test」：「test」など何百も）。 島の検討が終わるまで分析を延期することをお勧めします（はい、フォームのデザインは似ています）。



Ostrovokと同様に、フィルターを使用してもデータの追加読み込みは行われず、フィルターはページ内のデータを処理します。 （Booking.comとは異なります。）

結論

彼らはコードに従います、彼らは世界を見せません、Ostrovエンジンに外部の類似点があります。 ホテルの選択は伝統的に高速です データベースには、フライトよりも少ない動的データがあります。 バックエンドはデータを物理的に高速にレンダリングできるため、残りはレンダリングに費やされます。 要求とコードの分析から得られるように、これまでのところMVCテクノロジーはありません。 主な強みはどこにでもあります-jQueryを使用してレンダリングし、それらの前にあまり複雑でないajaxクエリを表示します。 ここでは、ページを変更せずにホテルの検索が繰り返されます（2秒で更新されます）。 コードは、それがオストロフのクローンであることを示しています。

https://ostrovok.ru/

コードを表示すると、doubletrip.com /の例で既に分析されていることがわかります。 違いを探す時間を無駄にしません。 ただし、オストロフカでのフライトの検索はサイトkupibilet.ruに配置され、検索はdoubletrip.com/のように異なる方法で構成されていることに注意してください。 しかし、両方ともすでに分析されています。 島では、検索エンジンの異なる組み合わせのみが表示されます（何についての質問はありません-誰が）。

http://www.booking.com/

ホテル すべての要求は400ミリ秒で渡され、ページの再読み込み、10秒-レンダリングに至りました。 後続のリクエストは、3秒で再起動しません-レンダリング。 最初から繰り返し検索を行うにはブラウザキャッシュが使用されるため、検索結果の新しいレンダリングにも3秒かかりますが、再起動（最初の要求）にかかる時間は4秒です。



フライト検索はありません。



コード分​​析。 インラインの多くのコードとスタイル（HTMLコード内）。 それほど悪くはありませんが、明らかに古い開発手法の遺産があります。 このページはサーバー上で生成する必要があり、静的コンポーネントから組み立てられた場合よりも明らかに長くなります。 したがって、このページの読み込みが開始されるまで4秒待機します。 この場合、ユーザーがどこかで逃げることはまずありませんが、その前に、検索用のデータを慎重に入力し、最初のページは適切かつ正確に行われました。



jQuery 1.4.4（2010年基準）、ドロップダウン/ツールチップライブラリ（Artur Burtsev）、jquery-hashchange-plugin、accounting.js 2011、jquery-popunder、さらに多くのネイティブ難読化、約500〜700 K JS。 テンプレートエンジンハンドルバーv1.0.12 2011。 jQuery UI 1.8.6も古いです。



ちなみに、すべてのサイトでのデータの読み込みは、フライトと日付のヒント（カレンダーウィジェット）の領域におけるMVCのようです。 しかし、そのようなウィジェットは、MVCベースなしで独自に機能することは誰もが知っています。 したがって、ここではクライアントサイトでMVC-sを満たすことは期待できません。

結論

コードは最適化のベストプラクティスに従って作成されていません。 ダウンロードの開始時にレイアウトは描画されません。 ページの中央にあるこれらの700Kコードがロードされるまで、ページはレンダリングされません。 この場合のHTML自体は別の660Kです。 コードのコアは2011年以降更新されていません。おそらく、コンポーネントのかなり新しいバージョンが見られたdoubletrip.com/とは異なり、更新はアーキテクチャに組み込まれていませんでした。 したがって、このサイトはテクノロジーの機能を使用して利益を得ません。 たとえば、彼らは最初でした。 開発プロセスで同じ位置に入らないようにする方法を考えるために、いくつかの最適でないソリューションの例としてサイトに慣れることができます。



一般的な結論 ：レビューされたサイトでは、ホテルやフライトのページを繰り返し検索するための歴史的に伝統的なAJAXを除き、MVCライブラリのプラクティスを使用してバックエンドとデータを交換していません。 最適化されていないソリューションとjQuery UIの中毒は、多くの場合表示されます。これは、カレンダーやヒントに必要ですが、重量があり、トラフィックのシェアを使い果たします（作業構成-150-500 Kコード）。 Ostrovkaクローンは非常に読み書きができるように見えますが、各サイトの非公開の結論で説明されているのと同じ原則に基づいて構築されています。



競争環境に関する意見 ：このサービスグル​​ープは、その実装において非常に幅広い起業家層を引き付けます。 開発に文字通り数百万ドルを費やし、そのフロントエンドの建設が現在考慮されているトップサービスに加えて、類似物を作り、いくつかの関連する目標を達成するための多くの試みがあります。 フライトやホテルについて通知するための多くのオープンで頻繁に無料のAPIが存在するため、情報の収集と公開は、競合他社の間で有利な旅行会社やポータルを提示できる中小企業にとって実行可能なタスクであることがわかりました。 しかし、トッププロジェクトについては忘れないでください。このプロジェクトでは、インターフェイスにどれだけのお金が投資されているかがわかり、この分野の初心者プレイヤーのクラスを比較しています。



また、開発者の観点から見ると、トップサイトは最新のベストプラクティスの最高水準ではなく組織化されていることがわかります。ここで、スタートアップは「減少ではなく数で」、競争相手に少し利益を期待できます。 アーキテクチャの重要性を過大評価することはできません。リーダーは、美しくモダンなコードを持っている人ではなく、開発により多くのお金を投資している人です。 もちろん、開発者はアーキテクチャを理解していますが、コードにそれを反映しないことは、最高水準への書き込みがこのケースの成功の主なものではないことを示唆しています。 （ただし、これは決してビジネスの入り口ではありません。）