что это и как работает турбо в Яндексе

Оглавление

1. Как устроены турбо-страницы

2. Как подключить турбо-страницы

3. Добавление информации

Турбо-страницы – это разработанный Яндексом формат отображения контента сайтов на мобильных устройствах, ускоряющий загрузку страниц в 15 раз и уменьшающий вес документов в 10 раз при переходе из этой поисковой системы, ленты Дзена или сервиса новостей. Это позволяет владельцам сайтов не терять трафик при медленном мобильном интернете у пользователей и получать прибыль за счет демонстрации рекламы.

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

turbo-stranicy1.jpg

turbo-stranicy1.jpg

С мая 2017 года технология тестировалась на крупных новостных сайтах, с ноября 2017 года стала доступна для всех владельцев сайтов.

Данных об эффективности использования на коммерческих проектах еще немного, а по информационным отмечается уменьшение количества отказов, вызванных медленной загрузкой на мобильных устройствах, на 30 %.

Как устроены турбо-страницы

Технология позволяет адаптировать сайт для мобильных устройств без внесения изменений в код. Возможность быстрого включения-отключения позволяет проводить эксперименты. Технологию можно рассматривать как частичную альтернативу мобильной версии или адаптивному дизайну. Но сайт не становится полностью мобилопригодным, так как при переходе из других источников сохраняется оригинальный способ отображения.

На турбо-страницах могут отображаться следующие элементы, в случае, если они размечены в RSS канале:

• логотип;
• изображение;
• текст;
• блок под рекламу.

Дизайн получается отличным от основного, чтобы обеспечить малый вес. Все, без чего можно обойтись, отключается – фоновые изображения, баннеры, поп-апы и т. д.

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

turbo-stranicy2.jpg

turbo-stranicy2.jpg

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

Такая организация позволяет пользователям увидеть контент, даже если оригинальный ресурс по какой-то причине сейчас недоступен.

Еще одна особенность, вытекающая из-за принципа реализации, – повышенная безопасность. Если ресурс оказывается зараженным, турбо-версия остается без вредоносного кода.

Как подключить турбо-страницы

Для запуска турбо-страниц на поиске нужно иметь подтвержденные права на ресурс в Вебмастере Яндекса, подготовить RSS-файл, отвечающий заданным требованиям. В разделе «Турбо-страницы» – «Источники» нужно указать путь к файлу в поле «Добавить RSS-канал».

turbo-stranicy3.png

turbo-stranicy3.png

RSS-файл имеет ограничения:

• размер до 15 Мб;
• максимум 500 item;
• на канал не более 5000 изображений;
• для одного item до 30 картинок.

Подключить можно до 10 RSS-каналов на сайт, но не более 60 в совокупности на основной домен и его поддомены. Если сайт сделан на популярных CMS (WordPress, 1С-Битрикс, Joomla, Drupal), для генерации можно установить готовый плагин. После сохранения начнется проверка корректности файла RSS. При обнаружении ошибок необходимо внести правки. Если ошибок нет, нужно активировать показы, переведя переключатель у добавленного источника в положение «Вкл». Пользователи смогут увидеть контент в новом формате через несколько дней. Для обновления контента нужно вносить изменения именно в RSS.

Для запуска «Турбо» в Дзене необходимо в подготовленный RSS по стандартным требованиям добавить специальные элементы и атрибуты, описанные в справке.

Показы в Яндекс.Новостях возможны у тех, кто стал партнером сервиса. RSS подготавливается особый, подробности приведены в справке. Также в этом случае обновлять и добавлять новые материалы нужно именно в Новостях, а не передавать в Вебмастер.

В Вебмастере в разделе «Турбо-страницы» – «Настройки» можно указать дополнительные данные, если их нет в канале RSS.

turbo-stranicy4.png

turbo-stranicy4.png

Можно выбрать, как будет выводиться название сайта – по домену или какое-то другое.

Настраивается режим отображения логотипа: квадратный 96 × 96, прямоугольный – от 84 пикселей по высоте, без него. Изображение весом до 30 МБ нужно загрузить в формате PNG.

В этом же разделе указываются идентификаторы систем веб-аналитики и счетчиков посещаемости. Подключить можно:

• Яндекс.Метрику,
• Google Analytics,
• LiveInternet,
• Рейтинг Mail.Ru,
• Rambler/топ-100,
• Mediascope (TNS).

Для монетизации трафика участники Рекламной сети Яндекса могут указать идентификатор особого рекламного блока для турбо-страниц. Рекламодатели, использующие ADFOX, – добавить код специальной площадки.

отличный инструмент для тестирования ниши и не только — Маркетинг на vc.

ru

Показываю реальные примеры применения турбостраниц. В том числе конкретные цифры. Рассказываю о плюсах и минусах данной технологии.

14 211
просмотров

Конструктор турбо-страниц Яндекса позволяет создавать лендинги, оптимизированные для быстрой загрузки. Доступ к нему можно получить из интерфейса Яндекс Директ. Турбо-страницы появились больше 2 лет назад. Но их все еще мало используют. На мой взгляд, этот инструмент несправедливо обделен вниманием. Я занимаюсь контекстной рекламой и в статье поделюсь своим опытом использования турбо-страниц в качестве посадочных страниц для рекламных кампаний Яндекс Директ.

Пример 1

Заказчик – производит и поставляет быстровозводимые здания. Обратился за настройкой рекламных кампаний в Яндекс Директ.

1. Создание рекламных кампаний на существующий сайт. Сайт современный, симпатичный. Но рассказывает про компанию, а не про услугу, которую мы рекламируем. Перед запуском кампаний указал на это заказчику. Составил список возможных корректировок, предоставил их заказчику. Ответ «Долго, дорого, давайте запускать».

2. Запустили. Вижу малую результативность рекламы. Заказчик недоволен. Высказывает претензии к качеству трафика. Еще раз указываю на недостатки посадочной страницы. Заказчик обещает их обдумать. Пока рекламируемся дальше…

3. Правки в сайт не внесены. Обращения есть, но мало. Цена заявки высокая, даже учитывая средний чек и маржинальность бизнеса. Срок стартового сопровождения подходит к концу. Понимаю, что будет негатив. Решаю сделать турбостраницу. Предложил заказчику, он отнесся скептически. Я говорю, что ему это ничего не будет стоить. Надо только выделить еще рекламный бюджет. Доверился, выделил.

Статистика Директ. Трафик на сайт.

Количество заявок с сайта.

4. Делаю турбо-страницу. Вношу туда только описание услуги, без дополнительных рассказов о компании и других продуктах. Затраченное время – 1.5 часа. Большую часть времени переписывал текст и иконки подгонял.

5. Запускаю турбо-страницу. В первый же день 4 обращения. Заказчик заинтересован. Продолжаем работу. Я начал получать важную статистику по источникам заявок и смог скорректировать ставки. Убрал неэффективное, поднял эффективное.

Результат

Статистика Директ. Трафик на турбо.

Количество заявок с турбо.

Реклама практически не менялась. Кампании остались те же. При запуске турбостраницы были те же фразы, объявления, ставки. Только посадочная другая. Турбо-страница вытащила показатели? Нет. Показатели поднялись за счет более релевантного содержания посадочной страницы. Но создал я ее именно с помощью инструмента Яндекса. Создал очень быстро.

Я показал заказчику, что дело не только в трафике. Обеспечил его заявками (в среднем 3 штуки в день). Цена заявки для его ниши хорошая. Продолжаем работать над количеством и ценой заявок. Планирую уговорить сделать нормальную посадочную. В итоге, инструмент помог мне удержать клиента.

Пример 2

Обратился за настройкой контекстной рекламы. B2B сегмент. Товары для магазинов.

1. Аналогично. Запуск на существующий сайт. Он тоже неплохой. И тоже про компанию, а не про ее продукт.

2. Рекламируемся 2 недели. Заявки есть. Цена заказчика не устраивает. Предлагаю создать турбо-страницу в качестве теста. Заказчик не против. Делаю турбо. Аналогично, рассказываю про конкретный продукт. Затраты времени – 1.5 часа.

Статистика Директ. Трафик на сайт.

Количество заявок с сайта.

3. Запуск турбо-страницы. Первый день – 4 заявки на почту. Существенно упала цена обращения. Реклама та же. Ничего не меняли, только страницу.

Статистика Директ. Трафик на турбо.

Количество заявок с турбо.

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

Здесь я сработал на опережение. Заказчик не высказывал недовольства напрямую, но я видел, что результаты его не впечатляют. Изменил отношение к своей работе с помощью турбо-страницы. Вложил 1.5 часа дополнительного времени.

Пример 3

Обратились за настройкой рекламных кампаний. B2B сегмент, производство товаров для отелей, гостиниц, ресторанов итд.

Сразу понимаем, что сайт не очень. Решили начать с турбо-страницы. Результат ниже.

Статистика, Директ.

Количество заявок.

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

Итого

На самом деле, результат дает не турбо-страница. Результат дает хорошее предложение, показанное заинтересованной аудитории. А турбо-страница позволяет это предложение быстро разместить и быстро показать. Именно в этом ценность данного инструмента. Минимальные затраты времени и денег за хороший результат. Инструмент рабочий, простой и эффективный.

После получения положительного результата от турбо-страницы, я всегда рекомендую собрать нормальный лендинг с использованием аналогичной структуры и текстов. Все-таки задача турбо-страницы, на мой взгляд, именно тестирование. Она позволяет быстро и дешево проверить эффективность связки реклама-предложение. А дальше надо развивать. И вот этого функционал пока не позволяет.

Плюсы турбо-страницы

Бесплатно

Даже Директ не обязательно оплачивать. По крайней мере пока.

Достаточное количество стандартных блоков и даже шаблонов

Все свои идеи на них не реализуешь, но основные необходимые блоки имеются.

Улучшаются

С момента, как я начал ими пользоваться, появилось много новых возможностей. Добавили отслеживание UTM меток, несколько новых блоков, позволили делать десктопную версию. В общем, продукт развивается.

Легко создавать

Очень просты в освоении. Поскольку функционала минимум и он интуитивно понятен.

Действительно быстро загружаются

А это очень важно в современном мире мобильного интернета.

Нормально выглядят

Очень простенько. Без каких-либо претензий на супер дизайн. Но выглядят приятно.

Минусы турбо-страницы

Ноль возможностей для дизайна

По сути, вы можете менять только текст, картинки, цвет кнопок и фона.

Нельзя поставить сторонние скрипты

Вы не сможете добавить на страницу Call-Tracking, интеграцию с CRM и даже Google Analytics.

Про интеграцию CRM.

Да, никто не мешает настроить получение заявок из почты. Но мне бы хотелось прямую интеграцию. Вот тут наглядно показывал зачем.

Ответы на вопросы

Почему нет ссылок на сайты

Потому что начнётся обсуждение заказчиков, их бизнеса, жён, друзей, цвета глаз их котов итд. Задача статьи — поделиться инструментом. А не обсуждать конкретные сайты. Если кому-то очень интересно – пишите в личку. Обсудим.

Как можно сравнивать результат, если ты не показываешь, что было и что стало

У меня нет задачи показать разницу содержимого. Это вопрос прототипирования и дизайна сайтов. Я же хотел поделиться инструментом, который позволяет быстро собрать страницу с хорошей конверсией, если ты хоть немного понимаешь, что должно быть на сайте для рекламного трафика. Если не понимаешь – инструмент может не сработать. Но это не вина инструмента.

Он называет 0.5% хорошей конверсией. Увольте его

Ни в одном из рассмотренных случаев не отслеживаются звонки и обращения на почту, то есть конверсия выше. И все это B2B с высоким средним чеком и маржинальностью. Даже 5 000 за заявку для них может быть норм. Хотя я страдаю, глядя на такие цифры. Еще там основная масса трафика из РСЯ, ключи широкие итд. Это неважно в рамках рассмотрения инструмента.

Заголовок про тестирование, а ты кейсами хвастаешься

3 случай – чистое тестирование. 1 и 2 – тоже. Я выяснял, правда ли, что проблема в трафике. По сути, я тестировал нишу заново. Результаты на старте были слабыми и не дали никакой полезной статистики. При этом предложения у заказчиков были хорошими, но не раскрытыми. Я раскрыл их, как видел, с помощью турбостраницы. И протестировал.

Бросаем сайты и делаем турбо?

Причина повышения конверсии не в том, как сайт делался. А в том, что там написано. Если вы можете быстро создать подобную страницу на существующем сайте или быстро внести изменения в имеющуюся, то турбо вам не нужны. Во всех случаях, внесение правок затягивалось. Я видел, что теряю заказчиков, применил инструмент.

Сколько Яндекс заплатил?

К сожалению, пока нисколько. Я очень надеюсь, что свяжутся и заплатят:)

Почему бы не сделать то же самое на каком-нибудь конструкторе? Например, на тильде

По моему опыту, создание аналогичных посадочных на тильде заняло бы в 2-3 раза больше времени. Для себя решил, что незачем его тратить, если результат будет схожий. Напомню, за эти страницы мне не платили. И задача была показать результат рекламы.

Итого итого

Хотел донести, что:

• Турбо-страница проста в освоении и быстро создается.
• Она быстро загружается и хорошо воспринимается пользователями.
• Дизайна и имеющихся блоков достаточно, чтобы приводить конверсии. В B2B точно.
• Турбо-страница имеет ряд ограничений. Поэтому останавливаться на ней не стоит.

Все! Сам с собой пообщался, с вами инструментом поделился. Если было интересно и полезно — можете поблагодарить меня лайком:) Спасибо, что прочитали:)

Turbo Справочник

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

В частности, вы больше не можете полагаться на полную загрузку страницы для сброса среды при каждом переходе. Объекты JavaScript window и document сохраняют свое состояние при изменении страницы, и любые другие объекты, которые вы оставляете в памяти, останутся в памяти.

С осознанием и некоторой осторожностью вы можете спроектировать свое приложение, чтобы изящно справиться с этим ограничением, не тесно привязывая его к Turbo.

﹟ Работа с элементами скрипта

Ваш браузер автоматически загружает и оценивает любые элементы


Вам также следует рассмотреть возможность настройки вашей системы упаковки ресурсов для отпечатков пальцев каждого сценария, чтобы он имел новый URL-адрес при изменении его содержимого. Затем вы можете использовать атрибут data-turbo-track для принудительной полной перезагрузки страницы при развертывании нового пакета JavaScript. Дополнительные сведения см. в разделе «Перезагрузка при изменении активов».

﹟ Понимание кэширования

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

При навигации по истории (через Restoration Visits) Turbo Drive будет восстанавливать страницу из кэша без загрузки свежей копии из сети, если это возможно.

В противном случае при стандартной навигации (через Application Visits) Turbo Drive сразу же восстановит страницу из кеша и отобразит ее в виде предварительного просмотра, одновременно загружая свежую копию из сети. Это создает иллюзию мгновенной загрузки страниц для часто посещаемых мест.

Turbo Drive сохраняет копию текущей страницы в своем кеше непосредственно перед рендерингом новой страницы. Обратите внимание, что Turbo Drive копирует страницу, используя cloneNode(true) , что означает, что все прикрепленные прослушиватели событий и связанные данные отбрасываются.

﹟ Подготовка страницы к кэшированию

Прислушивайтесь к событию turbo:before-cache , если вам нужно подготовить документ до его кэширования Turbo Drive. Это событие можно использовать для сброса форм, свертывания развернутых элементов пользовательского интерфейса или удаления любых сторонних виджетов, чтобы страница была готова к повторному отображению.

 document. addEventListener("turbo:before-cache", function() { 
 // ... 
 }) 

Аннотируйте элементы с помощью data-turbo-cache="false" , если вы не хотите, чтобы Turbo их кэшировал. Это полезно для временных элементов, таких как всплывающие уведомления.

﹟ Обнаружение, когда предварительный просмотр виден

Turbo Drive добавляет атрибут data-turbo-preview к элементу , когда он отображает предварительный просмотр из кэша. Вы можете проверить наличие этого атрибута, чтобы выборочно включить или отключить поведение, когда отображается предварительный просмотр.

 if (document.documentElement.hasAttribute("data-turbo-preview")) { 
 // Turbo Drive отображает предварительный просмотр 
 } 

﹟ Отказ от кэширования

Вы можете контролировать поведение кэширования для каждой страницы, включив элемент в вашей страницы и объявив директиву кэширования.

Используйте директиву no-preview , чтобы указать, что кэшированная версия страницы не должна отображаться в качестве предварительного просмотра во время посещения приложения. Страницы, помеченные как недоступные для предварительного просмотра, будут использоваться только для восстановительных посещений.

Чтобы указать, что страница вообще не должна кэшироваться, используйте директиву no-cache . Страницы, помеченные как не кэшированные, всегда будут загружаться по сети, в том числе во время посещений для восстановления.

  
 ... 
  
  

Чтобы полностью отключить кэширование в приложении, убедитесь, что каждая страница содержит директиву no-cache.

﹟ Отказ от кэширования со стороны клиента

Значением элемента также можно управлять с помощью клиентского API, доступного через Turbo. cache .

 // Установить для управления кешем текущей страницы значение `no-cache` 
 Turbo.cache.exemptPageFromCache() 
 // Установить для управления кешем текущей страницы значение `no-preview` 
 Turbo.cache.exemptPageFromPreview() 
 

Обе функции создадут элемент в , если элемент еще не присутствует.

Ранее установленное значение управления кэшем можно сбросить с помощью:

 Turbo.cache.resetCacheControl() 

﹟ Установка поведения JavaScript

Возможно, вы привыкли устанавливать поведение JavaScript в ответ на события window.onload , DOMContentLoaded или jQuery ready . В режиме Turbo эти события будут срабатывать только в ответ на начальную загрузку страницы, а не после каких-либо последующих изменений страницы. Ниже мы сравниваем две стратегии подключения поведения JavaScript к модели DOM.

﹟ Наблюдение за навигационными событиями

Turbo Drive запускает серию событий во время навигации. Наиболее важным из них является событие turbo:load , которое срабатывает один раз при начальной загрузке страницы и снова после каждого посещения Turbo Drive.

Вы можете наблюдать событие turbo:load вместо DOMContentLoaded для настройки поведения JavaScript после каждого изменения страницы:

 document.addEventListener («турбо: загрузка», функция () { 
// ... 
 }) 

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

Также обратите внимание, что навигация Turbo Drive может быть не единственным источником обновления страниц в вашем приложении, поэтому вы можете переместить свой код инициализации в отдельную функцию, которую вы можете вызывать из turbo:load и из любого другого места, где вы можете изменить ДОМ.

По возможности избегайте использования turbo: загрузите событие , чтобы добавить другие прослушиватели событий непосредственно к элементам в теле страницы. Вместо этого рассмотрите возможность использования делегирования событий для регистрации прослушивателей событий один раз в документе или окне .

См. полный список событий для получения дополнительной информации.

﹟ Прикрепление поведения к стимулу

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

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

Stimulus позволяет аннотировать ваш HTML с помощью атрибутов контроллера, действия и цели:

 
 
  
 Приветствие 
  

Внедрите совместимый контроллер, и Stimulus подключит его автоматически:

 // hello_controller. js 
 импорт {контроллера} из "@hotwired/stimulus" 
 экспорт класса по умолчанию расширяет контроллер { 
 приветствие() { 
 console.log(`Привет, ${this.name}!`) 
 } 
 
 получить имя() { 
 вернуть this.targets.find("имя").значение 
 } 
 } 
 

Stimulus подключает и отключает эти контроллеры и связанные с ними обработчики событий всякий раз, когда документ изменяется с помощью API MutationObserver. В результате он обрабатывает изменения страницы Turbo Drive, навигацию Turbo Frames и сообщения Turbo Streams так же, как и любой другой тип обновления DOM.

﹟ Создание идемпотентных преобразований

Часто вам нужно выполнять преобразования на стороне клиента в HTML, полученный с сервера. Например, вы можете использовать информацию браузера о текущем часовом поясе пользователя, чтобы сгруппировать набор элементов по дате.

Предположим, вы аннотировали набор элементов с атрибутами data-timestamp , указывающими время создания элементов в формате UTC. У вас есть функция JavaScript, которая запрашивает в документе все такие элементы, преобразует метки времени в местное время и вставляет заголовки даты перед каждым элементом, который появляется в новый день.

Подумайте, что произойдет, если вы настроите эту функцию для работы на turbo:load . Когда вы переходите на страницу, ваша функция вставляет заголовки даты. Уйдите, и Turbo Drive сохранит копию преобразованной страницы в своем кеше. Теперь нажмите кнопку «Назад» — Turbo Drive восстановит страницу, снова запустит turbo:load , и ваша функция вставит второй набор заголовков даты.

Чтобы избежать этой проблемы, сделайте функцию преобразования идемпотентной . Идемпотентное преобразование безопасно применять несколько раз, не изменяя результат после первоначального применения.

Одним из способов сделать преобразование идемпотентным является отслеживание того, выполнялось ли оно уже, путем установки атрибута data для каждого обрабатываемого элемента. Когда Turbo Drive восстановит вашу страницу из кеша, эти атрибуты все еще будут присутствовать. Обнаружьте эти атрибуты в своей функции преобразования, чтобы определить, какие элементы уже были обработаны.

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

﹟ Сохранение элементов при загрузке страницы

Turbo Drive позволяет помечать определенные элементы как постоянные . Постоянные элементы сохраняются при загрузке страницы, поэтому любые изменения, которые вы вносите в эти элементы, не нужно повторно применять после навигации.

Рассмотрим приложение Turbo Drive с корзиной для покупок. В верхней части каждой страницы есть значок с количеством товаров, которые в данный момент находятся в корзине. Этот счетчик динамически обновляется с помощью JavaScript по мере добавления и удаления элементов.

Теперь представьте себе пользователя, который перешел на несколько страниц в этом приложении. Она добавляет товар в корзину, затем нажимает кнопку «Назад» в своем браузере. При навигации Turbo Drive восстанавливает состояние предыдущей страницы из кеша, а количество товаров в корзине ошибочно изменяется с 1 на 0.

Вы можете избежать этой проблемы, пометив элемент счетчика как постоянный. Назначьте постоянные элементы, присвоив им HTML id и аннотировав их с помощью data-turbo-permanent .

 
1 элемент
 

Перед каждым рендерингом Turbo Drive сопоставляет все постоянные элементы по ID и переносит их с исходной страницы на новую, сохраняя их данные и обработчики событий.

Далее: Установка Turbo в ваше приложение

Turbo | Проект Один

Введение

Когда пользователь делает запрос к вашему приложению, ваш контроллер является частью MVC, которая получает его и отвечает кодом 9. 0005 .html.erb просмотр файла. Пока вы работали над своими приложениями, вы, возможно, создавали представления с похожими функциями и макетами. Что, если бы был способ изменить только те части наших представлений, которые отличаются, и не нужно беспокоиться об обновлении контента, который мы не собираемся менять в первую очередь? Мы могли бы сократить время загрузки для пользователя и объем данных, которые наше приложение должно отправлять.

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

Результаты обучения

Просмотрите их сейчас, а затем используйте их, чтобы проверить себя после выполнения задания

• Что такое СПА?
• Что такое Hotwire?
• Что такое Турбо и четыре его компонента?
• Когда можно использовать Turbo Frame?
• Как мы используем Turbo Streams для обновления наших страниц?
• Для чего мы используем Turbo Native?

Одностраничные приложения (SPA)

Прежде чем перейти к Turbo, важно понять концепцию одностраничного приложения или SPA. СПА – это
реализация для веб-приложений, которые загружают только один веб-документ. Вместо того, чтобы постоянно заменять этот документ новым при каждом запросе, веб-сайт динамически перезаписывает текущую страницу с новой информацией, чтобы страница загружалась быстрее и больше походила на родное приложение. Обновление страницы никогда не происходит. Подумайте о веб-сайтах, таких как Gmail или Facebook, где вы видите совершенно новое электронное письмо или публикацию в хронике без необходимости обновлять свою страницу.

Создание одностраничного приложения в Rails

Существуют различные платформы Javascript, помогающие разработчикам реализовать функциональные возможности SPA. Возможно, вы слышали о некоторых из них, таких как AngularJS или ReactJS. Однако у Rails есть собственное решение для создания SPA без написания Javascript. Это решение представляет собой набор библиотек, находящихся под эгидой Hotwire.

Горячая проволока

В Rails 7 все новые приложения включают Hotwire по умолчанию. Hotwire на самом деле является общим термином для трех разных фреймворков. Эти рамки:

1. Турбо
2. Стимул
3. Страда

Урок, который вы сейчас читаете, полностью посвящен Турбо. Мы рассмотрим Stimulus в другом уроке. Strada — это еще не выпущенная платформа, которая должна работать вместе с Turbo для создания адаптивных мобильных приложений. Вам не нужно беспокоиться о Strada в рамках этого курса, просто ознакомьтесь с названием, которое вы будете время от времени упоминать.

Турбо

Turbo — сердце зонта Hotwire. Цель Turbo состоит в том, чтобы использовать четыре различных метода для создания быстрого SPA без необходимости написания кода Javascript.

Вот краткий обзор четырех техник Турбо вместе. По мере того, как вы продолжите читать этот урок, мы рассмотрим каждую часть более подробно

1. Turbo Drive : Мы уже рассмотрели это в предыдущем уроке.
2. Turbo Frames : Turbo Frames, как и Turbo Drive, также помогают с быстрой навигацией, но для предопределенных частей страницы. Вместо того, чтобы запрашивать всю страницу, вы можете определить область вашего HTML как Turbo Frame и заменить только содержимое внутри этой области.
3. Turbo Streams : Turbo Stream доставляет изменения веб-страницы для мгновенной вставки, обновления или удаления области веб-страницы. Примером этого может быть пользователь, создающий новую публикацию, и эта публикация сразу же вставляется в верхнюю часть ленты индекса публикации без какого-либо обновления или перенаправления.
4. Turbo Native : Turbo Native — это метод, который позволяет разработчикам добиться таких же переходов в стиле Turbo в мобильном приложении для iOS или Android.

Турбо-рамы

Создание рамки

Представьте себе лист бумаги и вырезание в нем небольшого квадратного отверстия. Вы можете изменить то, что вы видите через дыру, заменив другой лист бумаги позади него, но остальная часть бумаги всегда будет выглядеть одинаково. В этом и заключается идея Turbo Frames. Турбо-фреймы позволяют нам предварительно определить часть нашей страницы, которая будет заменена во время запроса. Любые ссылки или формы внутри нашего фрейма будут делать специальный запрос, который приводит только к изменению фрейма. На странице также может быть несколько Turbo Frames.

Кадр обозначается обтеканием области внутри элемента . В Rails для этого есть специальный помощник, <%= turbo_frame_tag %> .

Базовый Turbo Frame, использующий хелперы Rails, может выглядеть так:

 <%= turbo_frame_tag "статья" сделать %>
  Некоторый контент
<% конец%>
 

, который будет генерировать:

 <турборама>
  Некоторый контент

 

Обратите внимание, что кадры имеют идентификатор. Идентификатор — это то, как Turbo может идентифицировать кадр, чтобы узнать, какой из них какой.
С помощью помощника Turbo Frame вы можете заменить идентификатор переменной. Например:

 <% @articles.each сделать |статья| %>
  <%= turbo_frame_tag статья сделать %>
    <%= статья.название %>
  <% конец%>
<% конец%>
 

Приведенный выше пример будет генерировать турбо-кадр для каждой статьи. Каждый фрейм будет иметь уникальный идентификатор, например article_1 или article_2 , и все, что нам нужно было включить, это наша переменная article.

Подключение к другим фреймам

Теперь, когда у нас есть первый фрейм, мы можем заменить его содержимое ссылкой, запрашивающей новое содержимое фрейма. Все, что нам нужно сделать, это поместить ссылку внутри Turbo Frame, где запрашиваемый вид также включает кадр Turbo с тем же ID .

Давайте заменим вид /show на вид /edit для статьи:

 # просмотры/статьи/show.html.erb
...
<%= turbo_frame_tag @article do %>
  Контент для нашей статьи!
  <%= link_to "Редактировать статью", edit_article_path(@article) %>
<% конец%>
...
 

 # просмотры/статьи/edit.html.erb
...
<%= turbo_frame_tag @article do %>
  Форма для редактирования статьи
  <%= link_to "Вернуться к статье", @article %>
<% конец%>
...
 

Это все, что нам нужно сделать! Turbo распознает, что наш целевой URL, страница /show или /edit , имеет соответствующий Turbo Frame, и заменит область фрейма содержимым из фрейма новой страницы. Еще следует отметить, что это работает и с формами. В нашем контроллере, если действие update содержит redirect_to @article , то наш Turbo Frame будет обновляться, когда мы отправляем нашу форму, как если бы мы щелкнули ссылку.

Теперь, когда у нас есть соответствующие фреймы, которые могут заменить свое содержимое, что насчет содержимого, расположенного за пределами фрейма? Все, что находится за пределами кадра, не меняется. Если бы мы переходили от /show к /edit , то содержимое за пределами фрейма по-прежнему было бы тем же содержимым страницы /show , и мы не получали бы никакого содержимого за пределами /edit . кадр же. Мы не переходили на новую страницу, мы только запросили новый html с другого маршрута и вставили его на нашу текущую страницу. текущий url тоже не меняется. Мы останемся на пути /show , и если мы обновимся, мы все равно увидим представление /show . (Обратите внимание, что это поведение по умолчанию можно изменить, используя Turbo Drive data-turbo-action для продвижения истории браузера и обновления текущего URL-адреса .)

Выход из турборамы

Иногда у вас может быть ссылка внутри Turbo Frame, которую вы хотите использовать как обычную навигацию по странице. Для этого добавьте data-turbo-frame="_top" в элемент. Пример с хелпером ссылок Rails:

 <%= link_to "Вернуться к статье", @article, data: { turbo_frame: "_top" } %>
 

Нацеливание на турбораму снаружи

Можно и наоборот. Мы можем сделать так, чтобы ссылка, существующая за пределами нашего Turbo Frame, действовала так, как если бы она находилась внутри Frame, и обновить ее. На этот раз мы устанавливаем атрибут данных turbo-frame , чтобы он указывал на идентификатор конкретного кадра. Допустим, мы хотим назначить турбо-кадр для отображения либо списка постов, либо списка изображений:

 <%= link_to "Показать сообщения", posts_path, data: { turbo_frame: "list-region" } %>
<%= link_to "Показать изображения", images_path, data: { turbo_frame: "list-region" } %>
<%= турбо_кадр %>
 

Щелчок по любой из приведенных выше ссылок отправит запрос по соответствующему пути и вернет содержимое внутри нашего кадра "list-region" .

Источник и отложенная загрузка

Кадры могут иметь атрибут src . Когда это указано, фрейм будет заполнен после начальной загрузки страницы путем выполнения отдельного запроса к связанному пути. Мы также можем обернуть содержимое заполнителя внутри этого src кадр для создания заполнителя скелета.

Например:

 ...
<%= turbo_frame_tag, src: article_path do %>
  <дел>
    Я заполнитель! После завершения запроса к article_path,
    Я буду заменен содержимым внутри турбо-фрейма этой страницы
    с идентификатором «Статьи».