Analysis of the code of hotel reservation services and flights

    The analysis itself was made in March 2014 as part of a non-profit request with the aim of analyzing the competitive environment and concerns a topic that, judging by experience, interests a lot of small groups of developers, or rather, entrepreneurs who want to become startups. Looking at the codes of the considered top services, at the moment (August 2014), the analysis is not outdated, and can benefit both groups who are planning to develop in this direction, and individual developers who want to get acquainted with the architectures and technologies of competing projects.

    (Measurements of response responses are carried out from Russia, one typical request is considered: a hotel for a family of 3 people for 4 days in Prague. Response timelines are viewed in Chrome. Interested in response speed, rich control in the interface.)

    To the links taken as the basis (5 links

    ), can add: , , , , , ,
    other. In fact, there are dozens of such services, since they give popularity to the site and the tour operator company containing such a service.

    We can immediately say that the complexity of the service of this kind is not the highest, so the organization of the interface is affordable for a small team of 5-10 people. But the most advanced services use server caching and other advanced solutions, as a result of which their quality is at a different level compared to competitors, small teams will not “pull” this approach. Therefore, we will be interested in advanced approaches and how “how hopeless” it is to compete with them.

    In foreign markets there is also a very rich selection of services, which should be reviewed at the time, because the solutions may turn out to be more interesting than Russian developers.

    www.fastbooking .com

    Tours and flights comparison :

    Search for attractions and private small hotels:

    Then, we should not forget the purpose for which we will review. If the question now is about the competitors' front-end engine, then the initial business task may sound like “find the best strategy to promote your service among competing ones,” and here it may come to the fore not just processing requests for hotels, but a service such as comparing hotels and small farms like does. Why? Because among hundreds of equal it is necessary to acquire a competitive advantage. Friendly search that meets the interests of visitors - may be one of them.

    Browse Selected 5 Sites

    The leader group,, is known for its huge investments in infrastructure and the development team. Therefore, in their code we do not see quick design solutions and popular libraries. Search routing is not organized one-page, and the source code of the page shows that a large amount of data is included by the server side in the page. This provides fast output for any browser without the need to repeat database queries. At the same time, on their pages there are very advanced multi-faceted AJAX requests, the form of which cannot be unambiguously attributed to any framework. These requests solve many tasks for pulling data into a page: requesting routes, POI (Points of Interests) - hotels, displaying in a summary table and on a map, drawing photos of apartments,

    For simplicity, we describe the analysis from simple services to complex ones .

    Service - not independent when searching for hotels, it is independent only when searching for flights.

    Finding flights (to Prague and back) took 15 seconds of the request. Repeated search did not cache the first exact same query and also took more than 15 seconds. Rendering - 0.5 s. Made in the form of a POST request at . The result is a complex JSON that populated the resulting table (flights, days, hours, transfers, etc.).
    Technology stack: jQuery, jQueryUI, plugins, Zingaya (online calls), an array of self-written code, everything is obfuscated. MVC frameworks have not been noticed. The input template page for HTML does not use (generates code on the server).
    conclusions: The request and processing are performed traditionally, a service was built without modern technologies, about 2.5 years ago (jQuery 1.8.2). Template engine and MVC could speed up work and development, and the absence of jQueryUI would make the page easier.

    It should be noted that flight requests do not require the advanced MVC architecture - they are performed traditionally by pressing the request button. An example of a truly advanced approach might look like a live submission of request parts and data binding “on the fly” - clarification of the country, flights, etc. .. But, as far as I know, none of the services now supports this approach, because This requires a lot of server heuristic samples from the database, and this is difficult for databases.

    Search by flight. A post request of the form took 32 seconds, then drawing a good looking (wow) frontend took 3 seconds. The brakes on the backend can indicate a slower backend engine or its lower optimality, or a greater coverage of the bases (it is difficult to judge). The composition of the front-end: jQuery 1.8.2, jquery.tmpl.min.js (now the unpopular template engine, due to slowness), a number of jQuery plugins, the data is packed in JS. MVC is also missing, but it is not required on this page. But, apparently, the reason for the slow rendering of their very visually good result is understandable: query.tmpl as a slow template engine in the first place and the hobby for jQuery plugins in general.

    Search for hotels with them - 300 ms for the first request, 5 seconds for processing cascading requests (map, pictures), 10 seconds - all rendering. The page is refreshed after the search, many new styles and scripts are loaded (40 files, no compression). There is jQueryUI.
    Conclusions .
    The engine is not optimized for page output (files are not compressed), which helps to study its structure and use visual means in itself (many useful library names); templates are in the main. Creation date - also 2.5 years ago. Single page works only on the withdrawal of flights, but in general, slower solutions are used than they could be. There is a suboptimal loading of hotel room drawings - all that are higher in scroll are loaded, and not only those that are in the viewport.

    Search for flights - 35 seconds of search and 15 seconds of rendering. The rendering format is similar to The results of 9 additional ajax queries via jQuery participated in the rendering. Technologies: Modernizr (compatibility of new CSS with old browsers), all JS are packed into a file weighing 350K. (Arranged interestingly, deobfuscated to look further.) JQuery, jQueryUI version 1.10.3, the newest. Plugins such as working with dates, calendar (such for all). No traces of keywords from MVC were found. There is a mention of Handlebars (template engine). The rest is built on jQuery plugins and is mainly focused on rendering the View component. Let me remind you that the code is obfuscated, so the analysis is difficult. But there is no super-technology, it is not visible.

    Search for hotels. Rendering - 5 seconds, queries - 1 second. The structure of the output is very similar to the Islet, jQuery 1.8.2, and it can be seen that the code was partially collected using another technology, but there is also an incomprehensible heavily obfuscated large JS, as in the first search. Most likely, these are all service codes for drawing tables for hotels and maps. There are large arrays of embedded inline codes in which, apparently, Model data is transmitted when the page is loaded (such as 'singlepage_old': 'control', 'forced_test': 'test' and hundreds of others). It is better to postpone the analysis after consideration of Ostrovka (yes, there the design of the forms is similar.

    Like on Ostrovka, the use of filters does not lead to additional data loading, the filters work with the data on the page. (Unlike
    Conclusions .
    They follow the code, they don’t show the world, there is an external resemblance to the Ostrov engine. Hotel selection is traditionally faster because there is less dynamic data in the database than on flights. A backend can physically render data faster, so the rest is spent on rendering. There is no MVC technology anywhere so far, as you can get from the analysis of requests and code. The main strength is everywhere - rendering using jQuery and not too complicated ajax queries in front of them. Here, a repeated search for hotels takes place without changing the page (update in 2 seconds). The code says that it is a clone of Ostrov.

    Viewing the code says that we have already analyzed it with the example. We will not waste time searching for differences. But it should be noted that the search for flights in Ostrovka is positioned with the site, and the search is organized in it differently - not like on But both have already been analyzed. On the Islet we see just a different combination of search engines (no questions about what - whose).

    Hotels All requests passed in 400 ms and led to a page reload, 10 seconds - rendering. A subsequent request does not restart it, 3 seconds - rendering. Repeated search from the start uses the browser cache, so a new rendering of the search results also takes 3 seconds, but the time to reboot (first request) is 4 seconds.

    No flights search.

    Code analysis. A lot of code and styles inline (in HTML code). Which is not too bad, but apparently there is a legacy of old development techniques. This page must be generated on the server, which is definitely longer than if it were assembled from static components. Therefore, we wait 4 seconds before the start of loading this page. This is a bit much, although in this case it is unlikely that the user will run away somewhere - before that, he carefully entered the data for the search, and the first page was done well and accurately.

    jQuery 1.4.4 (2010 basis), Dropdown / tooltip lib (Artur Burtsev), jquery-hashchange-plugin, accounting.js 2011, jquery-popunder, in addition, a lot of native obfuscation, about 500-700 K JS. Template engine Handlebars v1.0.12 2011. jQuery UI 1.8.6 is also old.

    By the way, data loading on all sites is almost like MVC in the area of ​​flight and date hints (calendar widgets). But we all know that such widgets work on their own, without an MVC base under them. Therefore, here we can not expect to meet MVC-s on the client site.
    Conclusions .
    The code is not made according to the best optimization practices. The layout is not drawn at the beginning of the download. Until these 700K code in the middle of the page is loaded, the page will not be rendered. The HTML itself in this case is another 660K. The core of the code has not been updated since 2011. Most likely, the update was not incorporated in the architecture, unlike, where we saw fairly new versions of the components. Therefore, the site does not use the capabilities of technology to obtain benefits - they took their to others. For example, they were the first. You can familiarize yourself with the site as an example of some non-optimal solutions in order to think about how not to get into the same position in the development process.

    General conclusions: None of the sites reviewed uses the MVC library practices to exchange data with the backend, except for the historically traditional AJAX for repeated searches on hotel and flight pages. Non-optimal solutions and addiction to jQuery UI are often visible, which is needed for calendars and tips, but is heavyweight, and eats away its share of traffic (in the working configuration - 150-500 K codes). The Ostrovka clones seem quite literate, but they are built on the same principles described in the private conclusions for each site.

    Competitive Opinion: This group of services attracts a very wide layer of entrepreneurs in its implementation. Along with top services, the development of which attracts literally millions of dollars and the construction of the front-ends of which are now considered, there are dozens of attempts to make analogues and achieve some related goals. Due to the presence of a number of open and often free APIs for informing about flights and hotels, the collection and publication of information turns out to be a feasible task for a small company, which can present a travel company or portal in a favorable light among competitors. But do not forget about the top projects, which clearly show how much money was invested in the interface and usability that we see with them, and compare the class of beginner players in this field.

    Also, from the point of view of the developer, you can see that the top sites are organized not by the highest standards of modern best practices, and here startups can hope for a small gain in the competition with those who “took not by decreasing, but by number”. One cannot overestimate the importance of architecture: the leaders are not those who have beautiful and modern code, but those who have invested more money in development. Of course, developers have an understanding of architecture, but not reflecting it in the codes suggests that writing to the highest standards is not the main thing in the success of the case. (Which, however, is by no means an opening for business.)

    Also popular now: