Немного о App Radio Hustle
запостил Кир Трибунский


Когда я показываю друзьм App Radio Hustle (давайте далее называть его сокращённо App?), случается примерно такой диалог:

— О, новый интерфейс
— Не только интерфейс, это же одностраничное веб-приложение
— ???

Тут начинается мини-лекция со мной в роли лектора, содержащая кучу слов вроде SPA, react, redux... Как правило в этот момент меня перестают слушать, потому что для неразработчика что сайт, что веб-приложение — одно и то же. Ну сами посудите: и то, и другое открывается в браузере, что-то можно посмотреть, что-то скачать. В чём разница-то?

Сейчас я постараюсь объяснить, что же такого особенного в нашем App'е.

Если ты знаешь, что такое react и как работают SPA — тебе будет неинтересно читать. Лучше заходи в нашу группу , пообщаемся там :)

Чем принципиально отличается App Radio Hustle от старого сайта?
Начнём с более общего вопроса: чем отличается сайт от веб-приложения? Не будем говорить о внешнех отличиях, вся суть в том, как они работают.

Вот представь, что ты открываешь radio-hustle.com. Твой браузер скачивает html-разметку. Выглядит она как-то так:

<html>
<head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    I'm simple website
    <script src="main.js"></script>
</body>
</html>

Это, конечно же, пример. Реальную разметку можно посмотреть так: зайди с компьютера на сайт и нажми Ctrl+U

Из разметки браузер понимает, какие элементы сайта (тэги) имеются и как они должны располагаться относительно друг друга.

Тэг link сообщает браузеру откуда брать css-файлы (отвечают за то, как будут выглядеть тэги), а тэг script говорит, где брать скрипты (отвечают за экшн на сайте).

Затем браузер скачивает стили и скрипты. Стили интерпретирует и с помощью них раскрашивает страницу, а скрипты выполняет.

И вот ты загрузил главную страницу и переходишь на базу танцоров, нажав на соответствующую кнопку. И всё повторяется: опять качаются разметка, стили, скрипты...

Это, конечно, сильно упрощённое и утрированное описание работы браузера, когда он отображает страницы, но оно хорошо передаёт основной недостаток концепции сайта как набора страниц: постоянно подгружается что-то, что уже было скачано, и может скачаться что-то лишнее (например, стили для тэгов, которых нет на открытой странице, но они есть на других), при этом вся страница отрисовывается браузером заново каждый раз.

Для исправления этого недостатка была придумала концепция одностраничного приложения (single page application). Концепцию SPA используют Google Docs, Gmail, LinkedIn и много ещё кто.

Теперь и Radio Hustle тоже :)

Когда ты открываешь App, браузер скачивает html-разметку один единственный раз. Помимо обязательных тэгов вроде html, head, body, такая разметка содержит один тэг, который называют root'ом, и тэг со скриптами.

Далее браузер выполняет скрипты: он смотрит, что нужно показать пользователю, выбирает необходимые тэги и отображает их, помещая как дочерние тэги root'а. Когда пользователь переходит по ссылке, например, на базу танцоров, браузер не перерисовывает всё заново: он оставляет те элементы, которые повторяются, а то, что не нужно будет показывать, удаляет. При этом фактического перехода между страницами не осуществляется (страница-то всего одна!), всего лишь меняется контент.

Это сильно ускоряет процесс взаимодействия с сайтом, а если учесть, что браузер умеет кэшировать то, что уже было ранее скачано, то переходы по страницам SPA осуществляются практически мнгновенно.