Code analysis of hotel booking services and flights
(Measurements of responses of requests 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 look in Chrome. Response speed, richness of management in the interface are interested.)
For reference links (5 links
www.booking.com
ostrovok.ru
www.onetwotrip.com/ru/#
www.doubletrip.com
www.kupibilet.ru
), can add:
hotels.ru ,other. In fact, there are dozens of such services, since they give popularity to the site and the travel company that contains such a service.
travel.ru
iGlobe.ru ,
www.otel.com ,
Oktogo.ru ,
transtour.ru ,
hotelbook.ru
We can immediately say that the complexity of the service of this kind is not the highest, therefore the interface organization is by the power of 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 hopelessly” we will compete with them.
')
In foreign markets there is also a very rich choice of services, which should be reconsidered at one time, because the solutions may be more interesting than those of Russian developers.
Europe-USA:
Hotel Reservations:
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
Comparison of tours and flights:
www.skyscanner.net
www.expedia.co.uk
Search for attractions and private small hotels:
foursquare.com
www.blackbookmag.com/mobile
www.yelp.com
www.tripadvisor.com
Then, we should not forget the purpose with which we will make a review. If the question now is in the front-end engine of competitors, then the initial business problem may sound like “to find the best strategy to promote your service among competing ones”, and here not only the processing of hotel requests, but service such as comparing hotels and small farms, as does foursquare.com. Why? Because among the hundreds of equals, you need to gain a competitive advantage. Friendly search that meets the interests of visitors - maybe one of them.
Overview of 5 selected sites
The leaderboard booking.com, ostrovok.ru known for huge investments in infrastructure and the development team. Therefore, in their code, we do not see solutions for fast design and popular libraries. Routing when searching is organized not one page, and the source code of the page shows that a large amount of data is included by the server side into the page. This ensures fast delivery for any browser without having to repeat database queries. At the same time, on their pages there are very advanced multifaceted AJAX requests, the form of which cannot be uniquely attributed to any framework. These requests solve a lot of tasks for pulling data into the page: request of routes, POI (Points of Interests) - hotels, display in the pivot table and on the map, photo drawing of apartments, display filters (client or through a new request).
For simplicity, let's describe the analysis from simple services to complex ones .
http://www.kupibilet.ru
Service - independent when searching for hotels, it is independent only when searching for flights.
The search for flights (to Prague and back) took 15 seconds of inquiry. The second search did not cache the first exactly the same query and also took more than 15 seconds. Drawing - 0.5 sec. It is executed as a POST request at www.kupibilet.ru/search . The result is a complex JSON that filled 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 not seen. The HTML input page does not use templates (generates code on the server).
Conclusions : the request and processing is performed traditionally, the service is built without modern technologies, about 2.5 years ago (jQuery 1.8.2). The template engine and MVC could speed up the work and development, and the lack of jQueryUI would make the page easier.
It should be noted that requests for flights do not require an advanced MVC architecture - they are executed traditionally by pressing the request button. An example of a truly advanced approach could look like a live submission of parts of requests and data binding “on the fly” - specifying the country, flights, etc. But, as far as I know, none of the services currently support this approach, because this requires a lot of server heuristic samples from the database, and this is a bit heavy for databases.
http://www.onetwotrip.com/ru
Search by flight. Post request like www.onetwotrip.com/_api/searching/startSync/?ad=1&cs=E&route=0104MOWPRG0504&_=1393342802726 took 32 seconds, then rendering a good-looking (“wow”) frontend - 3 seconds. Brakes on the backend can talk about a slower backend engine, or its lower optimality, or a greater coverage of the bases (difficult to judge). The composition of the frontend: jQuery 1.8.2, jquery.tmpl.min.js (unpopular template now, due to slowness), a number of jQuery plug-ins, data are packaged 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 a passion for jQuery plugins in general.
Search for hotels in them - 300 ms for the first request, 5 seconds to process cascade requests (map, pictures), 10 seconds - all drawing. The page is updated after the search, many new styles and scripts are loaded (40 files, without compression). There is jQueryUI.
Conclusions .
The engine is not optimized for the output of the page (files are not compressed), which helps to study its structure and use visual tools in itself (many useful library names); patterns lie in the main. Creation date - also 2.5 years ago. Single-page works only on the output of flights, but in general, slower solutions are used than they could be. There is a suboptimal uploading of hotel room drawings - everything that is higher in scrolling is loaded, and not just those in the viewport.
http://www.doubletrip.com/
Flight search - 35 seconds of search and 15 seconds of rendering. The rendering format is similar to onetwotrip.com. The results of 9 additional AJAX queries via jQuery participated in the drawing. Technologies: Modernizr (compatibility of new CSS with old browsers), all JS are packed into a file weighing 350K. (Arranged interesting, deobfuscated, to look further.) JQuery, jQueryUI version 1.10.3, the newest. Plugins like working with dates, calendar (such are all). No keyword traces from MVC found. There is a mention of Handlebars (template engine). The rest is built on jQuery plugins and is mainly focused on drawing 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 by hotel. Drawing - 5 seconds, requests - 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 collected partly by another technology, but there is also an incomprehensible strongly obfuscated big JS, as in the first search. Most likely, these are all service codes for drawing tables for hotels and a map. There are large arrays of embedded inline codes, in which, apparently, the data of the Model 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 for a while after considering the Island (yes, there the design of the forms is similar.
As on the Island, applying filters does not result in reloading data; filters work with data in the page. (Unlike Booking.com.)
Conclusions .
The code is being watched, the world is not shown, there is an external similarity with the Ostrovka engine. The hotel selection is traditionally faster, since there is less dynamic data in the database than on flights. The backend can physically transfer data faster, so the rest is spent on drawing. Nowhere is MVC technology available, as it can be investigated from the analysis of requests and code. The main strength is everywhere - drawing with jQuery and not too complex Ajax requests before them. Here the repeated hotel search takes place without changing the page (update in 2 seconds). The code says that it is a clone of the Island.
https://ostrovok.ru/
Viewing the code says that we have already analyzed it using the example of doubletrip.com/. Let's not waste time searching for differences. But it should be noted that the search for flights in Ostrovka is positioned with the site kupibilet.ru, and in it the search is organized differently - not like on doubletrip.com/. But both of them have already been analyzed. On the Island we see just a different combination of search engines (without questioning about what is - whose).
http://www.booking.com/
Hotels All requests were completed in 400 ms and led to the page reloading, 10 seconds - rendering. Subsequent request does not reload it, 3 seconds - drawing. Re-search from the start uses the browser's cache, so the new drawing of the search results also takes 3 seconds, but the time to reload (the first request) is 4 seconds.
Flight search is not available.
Code analysis A lot of code and styles inline (in HTML code). That is not too bad, but apparently there is a legacy of old development techniques. This page should be generated on the server, which is definitely longer than if it were collected from static components. Therefore, we wait 4 seconds before the start of loading this page. This is a bit too much, although in this case there is little likelihood that the user will run away somewhere - before that he diligently entered the data for the search, and the first page was done well and accurately.
jQuery 1.4.4 (2010 base), Dropdown / tooltip lib (Artur Burtsev), jquery-hashchange-plugin, accounting.js 2011, jquery-popunder, in addition, a lot of own obfuscation, approximately 500-700 K JS. Template Handlebars v1.0.12 2011. jQuery UI 1.8.6 is also old.
By the way, uploading data on all sites almost like in MVC is in the field of flight prompts and dates (calendar widgets). But we all know that these widgets work on their own, without the MVC base under them. Therefore, here too we can not expect to meet MVCs on the client of the site.
Conclusions .
The code is not made according to the best optimization practices. Layout is not drawn at the beginning of the download. As long as the 700 K code in the middle of the page does not load, the page will not be rendered. The volume of HTML itself in this case is still 660K. The basis of the code has not been updated since 2011; in the architecture, the update is most likely not laid, unlike doubletrip.com/, 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 own to others. For example, they were the first. You can get acquainted with the site as an example of some sub-optimal solutions, to think about how not to get into the same situation in the development process.
General conclusions : none of the sites reviewed use MVC library practices for exchanging data with the backend, with the exception of historically traditional AJAX when re-searching on the pages of hotels and flights. Often visible are non-optimal solutions and addiction to jQuery UI, which is needed for calendars and prompts, but heavy, and eats away its share of traffic (in the working configuration - 150-500 K codes). Ostrovka clones seem to be quite literate, but they are built according to the same principles described in the private conclusions for each site.
Opinion about the competitive environment : This group of services attracts a very wide range of entrepreneurs to implement. Along with top-end services, the development of which attracts literally millions of dollars and the structure of the front-ends of which are now considered, there are dozens of attempts to make analogs and achieve some related goals. Due to the presence of a number of open and often free APIs for informing about flights and hotels, gathering and publishing information turns out to be a feasible task for a small company that can present a tourist 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, which we see, and compare the class of novice players in this field.
Also, from the point of view of the developer, you can see that the top sites are not organized according to the highest standards of modern best practices, and here startups can hope for a small win in the competition with those who “took not the decrease, but the number”. The importance of architecture cannot be overestimated: the leaders are not those who have a beautiful and modern code, but those who have invested more money in the development. Of course, developers have an understanding of the architecture, but its non-reflection in the codes indicates that writing to the highest standards is not the main thing in the success of a business. (Which, however, is not at all a business discovery.)
Source: https://habr.com/ru/post/235045/
All Articles