📜 ⬆️ ⬇️

Yandex Browser

Today, the new Yandex browser was introduced - the first one, which we did not just assemble from ready-made parts, but designed its appearance virtually from scratch, having worked through every possible detail. Now you can talk about why and how we did it.



A team of several dozen people worked on the browser and carefully weighed all the pros and cons of each solution. We had to understand which of the existing technologies and why should be in the browser from Yandex. And the most important task was to find and implement such solutions that would make Yandex a truly new product in the highly competitive market of similar programs.
')


Browser device


One of the first before us got a choice between the engines. In fact, there are four on the market that are worth talking about: Trident, Presto, Gecko and WebKit. The first is Internet Explorer. It can be used by third-party developers, but, firstly, only Microsoft can make changes to it, and secondly, in this case, the browser would be compatible only with Windows. The second is the proprietary closed-source development of Opera Software. This was the main reason why we abandoned this option.

In fact, a serious choice went between the two open source engines, Gecko and WebKit, and we immediately chose between the engine and the code that the browser interface and extensions to it would work on. We thought about writing our own shell, but as a result we could get a system of extensions that is not compatible with anything on the market. In the end, we decided that it was not worth spending additional resources on it, which in the end could not justify itself. The choice narrowed down to Gecko plus Firefox and WebKit plus Chromium options.



From the point of view of speed, they are not inferior to each other, therefore other factors have become arguments in the decision making process. The main advantage of Gecko bundles plus Firefox is the ability to easily customize the design. From the very beginning this was one of our priority needs - we wanted to make a program with a new interface that will be created by the Yandex team. But choosing this option would cause performance problems. In the Firefox shell, unlike Chromium, the browser itself is engaged in memory management, and, despite the almost complete absence of leaks, its fragmentation still occurs. In addition, the Firefox code is not the most accurate and it would be difficult to make many important changes for us.

The WebKit bundle plus Chromium did not have these flaws. In Chromium, each tab is a separate process and the operating system monitors the release of memory. And usually the OS copes with this task more efficiently than the browser itself. The clean and neat Chromium code makes it much easier to create something new based on it. It was decided to choose this option, even despite an important minus for us - the interface of this shell is very difficult to change. And we wanted to draw a browser from scratch and re-design it in user interaction. Even to change the form of the tabs, I had to understand the code very deeply and rewrite a lot.

Work with interface


It seems that the interfaces of modern browsers are so minimalist that nothing extra remains in them. But we decided that looking at the Yandex window, a person should not see those interface elements that he currently does not need. So there was - or rather, disappeared - arrow "Forward". It can be seen only when there is already, where to go forward.

By the way, even over such a trifle as this arrow may seem, we thought for a long time. It was drawn 50 different options.



As a result, we decided that the format of this element has become a well-established canon, which must be respected. And the final version was drawn, starting from the arrow that the American Institute of Design created. Once he developed a set of icons for navigation, which are now conventionally considered ideal. We redrawed his version, changed the shape and proportions in accordance with his vision, entered in the pixel grid and got an arrow that came up to us.

While working on Yandex, we also studied the history of web browser interfaces. Previously, they were easy to distinguish from each other, and now, if you close the logos of popular browsers, not even every Yandex employee will be able to recognize them. The standard of their interfaces has been formed: at the top are tabs, under them is the address bar, to the left of it are control buttons. We decided not to make revolutions. Using Yandex, a person should not radically change his habits. It is necessary to make them even easier to form.

But in order to make something new, it was necessary to understand how the old works. We relied on a lot of research, but we also conducted our own experiments. For example, those who worked on the Yandex interface observed how some of our colleagues use browsers. And the principal was that it was not the developers. So we were able to "live" to see what ordinary people have habits when working with the Internet.



According to research, a person visits up to seven permanent sites. And it turns out that he usually opens a new tab to see the tab of the one he wants to go to now. One of our innovations was Tablo, which is shown after clicking on the address bar. Thus, in Yandex it is not necessary to open a new tab to go to a new page. We changed the submission of sites, abandoning the screenshots. In our opinion, they poorly help a person find out the page he needs. In the display you will see the laconic widgets, "bricks".

For such popular sites as Habrahabr, VKontakte, Lenta.ru, Facebook and another hundred and fifty others, we have drawn them manually. Views of other pages will be formed by themselves. The browser will determine the favicon of the site, the main color in it will also “draw” the block itself. And all notifications from social networks and mailboxes can be seen immediately on the Scoreboard.

By the way, the browser logo, like himself, is drawn inside Yandex. In this case, we attracted external designers, including foreign ones, but everything they drew did not suit us. The sketch of the logo, which was eventually approved, was simply drawn in a notebook in a notebook by project manager Dmitry Timko. And then it was finalized together with our designer Mikhail Nezhdanov.

Yandex logo, like other browsers, is round. We thought to make it different, but we decided to pay tribute to the tradition according to which the logos of such programs play around the shape of the globe. In addition, the round shape will help a person quickly identify the browser icon on the desktop.

Browser stuffing


While working on the interface, we were repelled by the idea that its elements should not prevent a person from seeing sites. In the work on the filling of the browser one of the most important for us packages was that it should correctly display any document that the user has met on the Internet. We tried to minimize the number of additional actions that would need to be taken to view or listen to a particular file. To solve this problem, we had to choose between different technological options. As a result, we obtained licenses for some of them, having considered that it was they who best accomplished our task. For example, we agreed with Adobe and immediately embedded in the browser Flash. To view the PDF files, pdf.js could also be used, which Adobe itself is working on, but we stopped at FoxIt viewer. So far it seems that he is better at solving our problems, but nevertheless, we continue to follow the development of Adobe.

And, for example, Yandex will play MP3 files through the system functions of the operating systems. But we also thought that not all pages should immediately open to the user, because not all pages on the Internet are equally safe. The browser uses our own technology Safe Browsing. It gives him the opportunity to check the URL in the database known to us as dangerous. Every day we check more than 20 million pages and our database is most relevant for users of Yandex services. And using the system from Kaspersky Lab, the program checks for viruses the files that the user downloads directly to his computer. This does not eliminate the need to have an antivirus, but it prevents the download of files that are known for certain that they may be harmful.

The browser will also use solutions from Opera Software. In particular, we will use Opera Turbo technology, which allows you to quickly load pages, even at low connection speeds. Turbo mode will appear in the next version of the product.

Cloud technologies


At the dawn of the Web, the browser was a normal program that had one task - to show a page well, the address of which the user typed in the address bar or opened by clicking on the open button of the file. Now it’s even hard to believe that such was the case with the first web browsers.

Now everything has changed so much that ordinary people rarely type the real address in the omnibox of a modern browser. And his task was the need to help people navigate the huge Internet, give the opportunity to quickly and effectively find the right, to ensure safety, while remaining as inconspicuous as possible.

When you display pages, enter search queries, spell check and translate, locate and check for viruses, you can and should use the wealth of knowledge that world companies have. Not all browser manufacturers have their own cloud technologies and they have to cooperate with those who can provide them.

Fortunately, we have a full range of cloud services. At the same time, it is important to understand that Yandex has always remained for the Runet as close as possible, local, knowing about what distinguishes the Runet user and how best to respond to him.

We have a search, and therefore knowledge about hundreds of millions of sites and billions of pages. This allows us to give instant answers directly from the search line. For example, even the weather, the corkscore point, the telephone code of Kaliningrad, or the date of birth of Steve Jobs can be seen already while entering requests in the omnibox. As you can see, all this is in the search prompts of Yandex Search. Their technology allows us to show a person the addresses of sites with the letter m, if he forgot to change the layout and put a soft sign in the omnibox.

The translator, which in Yandex can translate both pages entirely, as well as individual words and sentences simply on highlighting, works entirely on Internet statistics. That is, a huge number of parallel documents that are in the Yandex index. And the masks by which Safe Browsing is checked are built on the basis of approximately tens of millions of dangerous pages known to Yandex and relevant to its users.

In addition, Yandex has very good geolocation for the browser. Thanks to the Maps, a lot of geodata will be available to users directly from the search line. For example, the corkscore in their region.

Search and development of browsers are now becoming one of the most interesting areas of the Internet industry. This is important both for us and for people, because in a highly competitive environment, users always benefit. We want to maintain a variety of modern technologies and continue to give people choices. That is why, for example, you can select a search engine in a browser from Yandex already from the omnibox at the time of entering a request. And the move to Yandex, which can import and cookies, is made as convenient as possible - it will even open tabs that were in the window of your previous program.

You can download and try the new browser today, starting at 17:00, at browser.yandex.ru .

UPD: From this second, a new browser from Yandex can be downloaded. Try and make your own opinion.

Source: https://habr.com/ru/post/152905/


All Articles