Бесшовные переходы между экранами SPA с помощью shared element transition API

Джейк Арчибальд рассказал о новом пропозале для создания бесшовных переходов между экранами SPA — "Smooth and simple page transitions with the shared element transition API".

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

Эти проблемы призван решить shared element transition API. С его помощью можно легко создавать простые переходы между экранами и сложные переходы с разделяемыми элементами. Вот так реализуется простой переход:

async function navigateToSettingsPage() {
  await document.documentTransition.prepare({
    rootTransition: 'cover-left',
  });
  updateDOMForSettingsPage();
  await document.documentTransition.start();
}

Shared element transition API пока доступен в Chrome в экспериментальном режиме. Также на данный момент его можно использовать только в рамках одной страницы, но у авторов спецификации есть планы по его расширению для обеспечения бесшовных переходов между разными страницами сайта.

#chrome #api #spa

https://developer.chrome.com/blog/shared-element-transitions-for-spas/

App History API — улучшенный роутинг для SPA

Cэм Торогуд рассказал про новое экспериментальное API для упрощения реализации клиентского роутинга в SPA — "Modern client-side routing: the App History API".

Для управления роутингом в SPA используется History API. History API отвечает за историю браузера, всё остальное (обработка событий навигации, управление переходами между экранами, сохранение временного состояния) ложится на плечи разработчика. App History API устраняет эти недостатки, связывая историю браузера, событие навигации и переходы между экранами.

Работа с App History API происходит с помощью объекта appHistory. Для обработки событий навигации нужно установить обработчик на событие navigate. Обработчик будет перехватывать все события навигации, в том числе при отправке POST-запросов и при программном изменении истории. В API есть встроенные средства для управления процессом перехода на новые экраны SPA с возможностью установки обработчиков на успешный переход или переход с ошибкой.

На данный момент App History API доступен только в бете Chrome 95 за экспериментальным флагом.

#spa #api #experimental

https://web.dev/app-history-api/

Ускорение отрисовки комментарии Хабра

Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".

Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.

Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.

Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.

#performance #spa #vue

https://habr.com/ru/company/habr/blog/590111/

Fuite — инструмент для поиска утечек памяти в SPA

Нолан Лоусон представил утилиту для автоматизированного поиска утечек памяти в SPA — "Introducing fuite: a tool for finding memory leaks in web apps".

Fuite — консольная утилита, работающая поверх Puppeteer. Она запускает циклический сценарий перехода по ссылкам приложения и возврата назад по истории браузера. После сбора статистики выводится список объектов, которые увеличились кратно количеству прогонов.

Fuite не интегрируется в DevTools, как недавно представленный инструмент Edge, но помогает в поиске более широкого спектра утечек памяти.

#debug #tool #spa

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/