Создание одностраничных приложений с помощью переходов CSS

Автор: Нджонг Эми✏️

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

В этой статье мы рассмотрим одностраничные приложения, наиболее известные как SPA, и то, какие значительные изменения они привнесли в мир веб-разработки.

В этой статье мы рассмотрим:

  • Что такое SPA?
  • Где использовать SPA
  • Использование SPA на мобильных устройствах
  • Руководство по созданию SPA
  • Часть I: Комбинирование HTML, CSS и JavaScript для создания SPA
    • Создание SPA-сервера с помощью Express
    • Редактирование SPA на стороне клиента с помощью JavaScript
    • Навигация с помощью API History
    • Использование popstate для просмотра различных страниц в SPA
    • Отображение представлений вашего SPA
    • Редактирование отображения в браузере с помощью CSS
  • Часть II: Переходы страниц с помощью CSS
    • Установка GreenSock Animation Platform (GSAP)
    • Эффект скольжения с помощью CSS

Что такое SPA?

Прежде чем погрузиться во что-то, давайте посмотрим, что такое SPA, и что использовали разработчики до них.

Знаете ли вы, что по умолчанию браузер обновляется всякий раз, когда вы хотите посетить новую страницу? Со SPA все по-другому — содержимое страницы переписывается с сервера, и оно меняется без обновления браузера.

Если вы пользовались такими сайтами, как GitHub, Twitter или даже Gmail, то вы уже сталкивались с SPA. Когда вы переходите между вкладками на этих сайтах, вы не получаете перезагрузки браузера. Страницы объединяются вместе, как будто все они были написаны в одном HTML-файле (а так оно и было).

До появления SPA использовались многостраничные приложения (MPA), которые иногда используются и сегодня. Большинство веб-браузеров совместимы с MPA, и разработчикам не нужно писать для них дополнительные функции, как в случае со SPA. В MPA, когда необходимо отобразить новый контент, например, новую страницу, новая страница запрашивается у сервера. Затем браузер отображает новую страницу, что вызывает перезагрузку.

В этой статье мы создадим SPA на кошачью тему и добавим к нему анимацию с помощью GreenSock Animation Platform (GSAP), библиотеки анимации JavaScript. Маленький GIF ниже — это предварительный просмотр того, как будет выглядеть наш конечный сайт.

Где использовать SPA

Как бы удивительно они ни звучали, SPA в некоторых аспектах не заменяют MPA.

В выдержке из электронной книги «Архитектор современных веб-приложений с ASP.NET Core и Azure» говорится, что SPA можно использовать в следующих случаях:

  1. Ваше приложение нацелено на демонстрацию богатого интерфейса с множеством функций
  2. Это веб-сайт с небольшими объемами данных
  3. Ваш сайт не сильно зависит от SEO. Поскольку в SPA используется один URL, SEO-оптимизация очень сложна, так как не хватает индексации и хорошей аналитики.
  4. Сайт использует такие функции, как оповещения или уведомления в режиме реального времени, аналогично платформам социальных сетей

Вы знаете, что пришло время использовать MPA, когда:

  1. Требования вашего сайта на стороне клиента легко удовлетворить
  2. Вашему приложению не требуется JavaScript для работы в браузере.

Использование SPA на мобильных устройствах

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

Учебник по созданию SPA

Теперь мы рассмотрим шаги, связанные с созданием одностраничных приложений. Следующие шаги предполагают отсутствие знаний о фреймворках и будут посвящены созданию SPA с помощью HTML, CSS и ванильного JavaScript. Поскольку мы иногда любим делать вещи красивыми, мы также добавим CSS-переходы страниц.

Учебник включает в себя:

  • Создание директорий проекта
  • Установка необходимых зависимостей. Во-первых, убедитесь, что на вашем компьютере установлен Node, набрав node -v в терминале или командной строке. Если отобразится версия Node, значит, вы готовы к работе. Введите npm install node для пользователей Linux или перейдите по этой ссылке, чтобы получить менеджер пакетов для любой операционной системы, которую вы используете.
  • Настройка сервера Express
  • Создание HTML и CSS файлов в соответствии с вашими потребностями. Это может быть всего несколько тегов или небольшой проект для углубления вашего понимания. Это полностью зависит от вас и от того, что вы хотите создать.
  • Тестирование вашей разметки на только что созданном сервере
  • Погружение в JavaScript

Вот и все для этого учебника. Это самые простые шаги, которые вы увидите в интернете.

Шучу! Конечно, мы пройдем через каждый шаг.

Все руки на палубе… Я имею в виду клавиатуру.

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

Во второй части мы добавим CSS переходы страниц, чтобы сделать навигацию более плавной и причудливой.

Часть I: Комбинирование HTML, CSS и JavaScript для создания SPA

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

В вашем терминале мы хотим создать каталог под названием SPA-tut, а в нем еще один под названием src.

terminal commands
mkdir SPA-tut
cd SPA-tut
mkdir src
cd src
Вход в полноэкранный режим Выход из полноэкранного режима

Откройте SPA-tut с помощью любой IDE по вашему выбору. Поскольку ни один проект не может быть завершен без файла index.html, мы создадим его в папке src.

Мы не будем создавать целый сайт, просто один с небольшой навигационной панелью и несколькими ссылками для демонстрации. В нашем index.html у нас есть следующий Markdown:

<nav class="navbar">
       <div class="logo">
           <p>Meowie</p>

       </div>

       <ul class="nav-items">
           <li><a href="/" data-link>Home</a></li>
           <li><a href="/about" data-link>About</a></li>
           <li><a href="/contact" data-link>Contact us</a></li>
       </ul>
   </nav>

   <div id="home"></div>
Войти в полноэкранный режим Выход из полноэкранного режима

Обратите внимание, как мы добавили атрибут данных data-link. Он использует метод History API pushState() для перехода к ресурсу без обновления. Сейчас вам не нужно это понимать, но со временем мы к этому придем.

Наша таблица стилей столь же мала.

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

.navbar{
   background-color: pink;
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.nav-items{
   display: flex;
}

a{
   text-decoration: none;
   color: white;
   font-weight: bold;
   font-size: x-large;
}
.link{
   color: pink;
   font-size: medium;
}
.logo{
   color: white;
   font-weight: bold;
   font-size: xx-large;
   font-style: oblique;
}
ul{
   list-style: none;
}
.navbar ul li{
   margin-left: 15px;
}

#home{
   display: flex;
   align-items: center;
   margin: 20px;

}
.img{
   width: 80%;
   height: 80%;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Наш сайт должен выглядеть вот так:

Обычные HTML и CSS не принесут нам ничего хорошего, поэтому давайте перейдем к JavaScript. Мы создадим еще две папки: папку js внутри папки static в папке src, и файл index.js. Теперь мы хотим подключить этот JS-файл к нашему index.html с помощью тега script прямо над закрывающим тегом body.

<script type="module" src="/static/js/index.js"></script>
Вход в полноэкранный режим Выход из полноэкранного режима

Мы добавили здесь тип module, потому что в ходе работы над проектом мы будем использовать функции импорта и экспорта ES6.

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

Создание SPA-сервера с помощью Express

Для этого SPA мы будем использовать библиотеку Express для создания нашего сервера. Не волнуйтесь, вам не понадобятся обширные знания Express.

Создайте файл server.js из каталога исходников. Как я уже говорил, нам понадобится установленный Node, прежде чем мы сможем получить любые другие необходимые пакеты или библиотеки. В вашем терминале:

  1. Введите npm init -y, чтобы создать package.json.
  2. Введите npm i express для установки Express

Если вы ранее установили Node, все это должно установиться без особых проблем.

Для сервера нам понадобится создать приложение Express в файле server.js, который мы только что создали.

const express = require('express');
const path = require('path');
const hostname = '127.0.0.1';
const port = 3000;

const app = express();

app.get("/*", (req, res) => {
   res.sendFile(path.resolve(__dirname, 'src', 'index.html'));
});

//listen for request on port 3000
app.listen(port, hostname, () => {
   console.log(`Server running at http://${hostname}:${port}/`);
 });
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы импортировать Express, мы вызываем require(). Наше приложение слушает любой запрос, отправленный через порт 3000, как мы указали выше. app.get получает запросы с указанного URL. В данном случае он делает это путем вызова функции sendFile(), которая использует path.resolve() для обработки последовательности путей слева направо до создания абсолютного пути. Причина, по которой наш путь /*, заключается в том, что мы хотим, чтобы страница перенаправлялась на index.html независимо от того, какую конечную точку мы добавим к URL в браузере.

Затем app.listen прослушивает любой запрос на порту 3000 и записывает сообщение, передавая имя хоста и номер порта.

Если вы скопируете путь из терминала и вставите его в браузер, то на экране появится результат, который мы получили из файла index.html. Он не имеет стилизации, но мы легко исправим это в конце. Щелчок по любой из ссылок приведет только к обновлению страницы.

Если мы откроем консоль, то увидим ошибку Failed to load module script....

Мы можем решить эту проблему, добавив следующую строку в наш файл server.js непосредственно перед функцией app.get:

app.use("/static", express.static(path.resolve(__dirname,'src', 'static')));
Войти в полноэкранный режим Выйти из полноэкранного режима

Редактирование SPA на стороне клиента с помощью JavaScript

Хватит уже о сервере. Давайте перейдем к работе, которая что-то делает.

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

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

const router = async () => {
   const routes = [
       {
           path: "/",
           view:  view: () => console.log("Home")
       },
       {
           path: "/about",
           view: () => console.log("About us")
       },
       {
           path: "/contact",
           view: () => console.log("Contact")
       }

   ];

};
Вход в полноэкранный режим Выход из полноэкранного режима

view на данный момент является просто функцией, которая отображает представления. Мы настроим ее так, чтобы она лучше служила нам в дальнейшем.

Но, допустим, мы изменили наш маршрут на что-то совершенно вне контекста (под этим я подразумеваю добавление «бессмысленных» конечных точек в наш URL). Мы хотим проверить, является ли введенный маршрут элементом нашего массива. Для этого мы воспользуемся методом массива map, чтобы пройти по каждому элементу массива и вернуть новый объект.

//test each route for match
const checkMatches = routes.map(route => {
       return{
           route: route,
           isMatch: location.pathname === route.path //returns a boolean value
       };
   });

console.log(checkMatches);
Вход в полноэкранный режим Выход из полноэкранного режима

Если маршрут действительно находится в массиве, checkMatches вернет имя маршрута и булево значение true. Если мы обновим браузер, то ничего не увидим в консоли. Это происходит потому, что мы не вызвали саму функцию маршрутизатора.

Итак, вне функции маршрутизатора давайте сделаем следующее:

document.addEventListener('DOMContentLoaded', () => {

   router();
})
Войти в полноэкранный режим Выйти из полноэкранного режима

Когда наша страница загрузится, функция маршрутизатора будет запущена.

Теперь давайте попробуем поэкспериментировать.

Вы видите, что если мы добавим /about к URL, то второй элемент нашего массива будет true, а остальные будут установлены в false. Если бы мы установили URL на маршрут, которого нет в массиве, то все значения для isMatch были бы false.

Но, допустим, мы просто хотим получить имя маршрута и выполнить проверку.

let match = checkMatches.find(checkMatch => checkMatch.isMatch);

   console.log(match);

Вход в полноэкранный режим Выход из полноэкранного режима

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

Но если мы добавим маршрут, которого нет в массиве, мы получим undefined в консоли. Нам нужно определить корень not found или 404.

if(!match){
       match = {
           route: routes[0]
       }
   }

   console.log(match.route.view);
Вход в полноэкранный режим Выйти из полноэкранного режима

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

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

Мы хотим перемещаться между представлениями и изменять URL без перезагрузки браузера. Для этого нам понадобится реализовать History API. Перед определением функции маршрутизатора определим новую функцию navigateTo.

const navigateTo = url => {
   history.pushState(null, null, url);
   router();
};
Вход в полноэкранный режим Выйти из полноэкранного режима

Для вызова этой функции мы создадим слушатель событий.

document.addEventListener('DOMContentLoaded', () => {
   document.body.addEventListener('click', e => {
       if(e.target.matches('[data-link]')){
           e.preventDefault();
           navigateTo(e.target.href);
       }
   })

   router();
})
Вход в полноэкранный режим Выход из полноэкранного режима

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

Попробуйте перемещаться между ссылками на вашей странице и следите за вкладкой браузера. Перезагружается ли страница при нажатии? Удалите data-link из HTML и попробуйте кликнуть еще раз.

Использование popstate для просмотра различных страниц в SPA-центре

Когда вы переходите по ссылкам, вы также можете видеть изменения в консоли. Отображаются названия представлений. Если мы попытаемся нажать кнопку «Назад», чтобы перейти к предыдущему представлению, функция router не будет запущена, следовательно, новое представление, на которое мы перешли, не отобразится.

Итак, перед нашим слушателем события DOMContentLoaded, давайте прослушаем событие popstate.

window.addEventListener('popstate', router);
Вход в полноэкранный режим Выйдите из полноэкранного режима

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

Отображение представлений вашего SPA

Давайте перейдем от простого console.log к классам, которые действительно отображают представления. Внутри каталога js мы создадим новый каталог pages.

Мы создадим классы для каждого вида, но сначала создадим класс, от которого будут наследоваться остальные. Создайте файл view.js внутри папки pages.

export default class{
   constructor(){

   }

   setTitle(title){
       document.title = title;
   }

   async getHtml(){
       return '';
   }
}
Вход в полноэкранный режим Выйдите из полноэкранного режима

Метод setTitle будет обновлять заголовок страницы представления при переходе между представлениями. Метод getHTML — это место, куда мы будем вставлять HTML-содержимое для конкретного представления.

Теперь создадим файл Home.js, в котором создадим класс, расширяющий вышеуказанный класс view.

import view from './view.js'

export default class extends view{
   constructor(){
       super();
       this.setTitle("Home");
   }

   async getHtml(){
       return `

       <div class="text">
           <h1>An album for your cuties</h1>
           <p>Meowies lets you upload pictures of your cats, so that you never lose them. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur commodi eveniet fugit veritatis. Id temporibus explicabo enim sunt, officiis sapiente.
           Read <a href="/about" data-link class="link">about</a> us here </p>
       </div>

       <div>
           <img src="/static/cats.jpg" alt="cat in ribbons" class="img">
       </div>

       `;
   }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

В нашем конструкторе мы установили заголовок Home, чтобы отразить вид. В нашем методе getHTML мы вернули фрагмент HTML.

Теперь мы хотим внедрить HTML в наш маршрутизатор. В верхней части файла index.html мы импортируем класс Home.

import Home from './pages/Home.js'
Вход в полноэкранный режим Выход из полноэкранного режима

В нашем массиве routes мы также изменим функцию view на класс Home.

      {
           path: "/",
           view: Home
       },
Вход в полноэкранный режим Выход из полноэкранного режима

И последний шаг:

  const view = new match.route.view();

   document.querySelector("#home").innerHTML = await view.getHtml();
Войти в полноэкранный режим Выход из полноэкранного режима

Если мы обновим браузер, наш главный вид будет выглядеть примерно так:

Заметили, как я добавил ссылку about в конце? Если вы щелкните ее, вы заметите, что браузер не обновляется. Это связано с делегированным событием, о котором я говорил ранее.

Создание классов для других представлений будет практически таким же процессом. Мы будем расширять класс view для каждого нового создаваемого представления и импортировать класс нового представления в наш файл index.html.

Редактирование отображения браузера с помощью CSS

Давайте немного переместим наш CSS-файл, чтобы он начал действовать в нашем файле index.html. Создадим папку css внутри папки static и переместим в нее наш файл styles.css. Если мы свяжем наш HTML-файл с таблицей стилей, то наш сайт станет выглядеть примерно так.

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

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

После создания всех представлений мои разделы About и Contact выглядят примерно так:

Как я уже сказал, ничего вычурного. Вы увидите, что ссылка меняется, а заголовок страницы обновляется (не включено в мои скриншоты).

Вот и все. Полностью функциональное одностраничное приложение. Теперь нужно добавить несколько переходов между страницами.

Часть II: Переходы страниц CSS

Эта часть — моя самая любимая. Для создания плавных переходов страниц мы будем использовать библиотеку анимации JavaScript и немного CSS, чтобы помочь нам на этом пути.

Библиотека анимации, которую я буду использовать, — это GSAP. Она позволяет относительно легко применять анимацию на вашем сайте, причем всего в нескольких строках JavaScript. Чтобы узнать больше о GSAP и бесплатно получить их супер-шпаргалку, найдите их здесь.

Установка GreenSock Animation Platform (GSAP)

В рамках этого руководства мы внедрим GSAP в наш проект с помощью CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
Вход в полноэкранный режим Выйти из полноэкранного режима

Вы можете добавить это перед закрывающим тегом <body>.

Самое интересное: Эффект скольжения с помощью CSS

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

Давайте добавим один дополнительный тег div внизу нашего HTML и присвоим ему класс slider.

<div class="slider"></div>
Вход в полноэкранный режим Выход из полноэкранного режима

В наш styles.css мы добавим стиль слайдера:

.slider{
  position:fixed;
  top:0;
  left: 0;
  background-color: palevioletred;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы обновите страницу, ничего не изменится. Слайдер есть, но атрибут transform удерживает его под содержимым страницы, поэтому мы его не видим.

Мы хотим, чтобы слайдер скользил вверх по странице при первом открытии. Вот тут-то и вступает в игру GSAP. В нашем index.js мы должны сначала инициализировать GSAP, прежде чем начнем его использовать. Поскольку нам нужна анимация при загрузке страницы, мы инициализируем GSAP чуть ниже импорта классов.

const tl = gsap.timeline({ defaults: {ease:'power2.out'} });
Вход в полноэкранный режим Выход из полноэкранного режима

Строка выше просто определяет нашу временную шкалу и устанавливает все по умолчанию.

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

tl.to('.slider', {y: "-100%", duration:1.2});
Вход в полноэкранный режим Выход из полноэкранного режима

Мы использовали временную шкалу, которую мы объявили, чтобы нацелиться на класс слайдера. y: "-100%" заменяет translateY(100%), который мы изначально установили в нашем CSS. Параметр duration:1.2 просто задан для определения времени. Поэтому при первой загрузке страницы наш слайдер будет скользить вверх по содержимому страницы.

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

Сразу после анимации слайдера мы добавим:

tl.to('#home', {y: "0%", duration:1.2}, "-=1");
Войти в полноэкранный режим Выйти из полноэкранного режима

Как и раньше, мы выбрали идентификатор home и установили для него длительность. Дополнительный -=1 нужен для того, чтобы содержимое страницы скользило вверх сразу после слайдера. Если мы уберем его, вы заметите некоторую задержку.

Но так ли это?

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

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

Наш скорректированный JavaScript будет выглядеть следующим образом:

document.addEventListener('DOMContentLoaded', () => {
   document.body.addEventListener('click', e => {
       e.preventDefault();
       tl.to('.slider', {y: "100%", duration:0});

       if(e.target.matches('[data-link]')){
           tl.to('.slider', {y: "-100%", duration:1.2});
           tl.fromTo('#home', {opacity: 0}, {opacity:1, duration:0.5});

           navigateTo(e.target.href);
       }

   })

   router();
})
Вход в полноэкранный режим Выход из полноэкранного режима

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

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

 tl.fromTo('#home', {opacity: 0}, {opacity:1, duration:0.5});
Вход в полноэкранный режим Выход из полноэкранного режима

fromTo означает, что у анимации есть начальная и конечная точки. Она начинается с непрозрачности, равной нулю, и переходит к непрозрачности, равной единице, за 0,5 с.

После настройки анимации наш SPA теперь выглядит следующим образом:

У нас есть красивый слайдер и красивое затухание на каждой странице.

Заключение

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

Чтобы ознакомиться с полным кодом этого проекта, воспользуйтесь ссылкой на Github repo здесь.

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


Ваш фронтенд перегружает процессор пользователей?

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

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

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

Оцените статью
devanswers.ru
Добавить комментарий