Телеграм-каналы

Ошибки быть не должно!

#frontend #react #nextjs

Когда пользователь взаимодействует с веб-ресурсом, помимо ожидаемого результата, он может наблюдать специальные страницы, отображающие нештатные ситуации в виде http-исключений. Разрабатывая сервисы на Next.js, необходимо управлять выводом таких страниц, анализируя ответы от RESTful API. А с учетом технологии SSR обработчик должен уметь изменять Status Code при отдаче страницы с сервера.

Коробочное решение фреймворка позволяет обработать 404 и 500 http-статусы и кастомизировать вывод страниц для них. При этом обработчик не учитывает случай, когда скрипт страницы загружен, а метод API вернул статус >= 400.

Мы решили отказаться от стандартного способа перехвата и обработки http-исключений в пользу собственного хелпера handleResponseStatus.js.

В хелпере мы учли возможность добавления «глобальных» запросов, таких как авторизация, и «параллельных» запросов, например загрузки меню сайта. Эту задачу решает callback-функция requestFunction, которая возвращает Promise.all. В теле колбека можно контролировать последовательность выполнения с помощью async/await, а в Promise.all — добавлять параллельные запросы.

Осталось привести пример использования хелпера в _app.js и поделиться полезными ссылками 👇

NextJS | getInitialProps
NextJS | Custom Error
ReactDOMServer

Да грузись ты уже 😡

#qa #frontend

Уважающий себя веб-сервис с клиентской браузерной частью немыслим без наличия хорошо проработанной мобильной версии и адаптивности интерфейсов. Такое веб-приложение должно быстро и без сбоев работать в условиях мобильного интернета, с переменной скоростью соединения 3G/LTE-сетей.

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

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

Представим, что основной скрипт main.js пытается вызвать методы some-library-script.js, которые загружаются асинхронно. Без проверки доступности методов библиотеки или события, срабатывающего на ее загрузку в main.js, пользователь потеряет необходимый ему функционал и не решит свою целевую задачу.

Чем выше скорость интернета — тем больше шансов упустить заветную ошибку.

Начинающий разработчик может неверно реализовать динамическую подгрузку ресурсов, а QA-инженер должен об этом помнить и считать каждого разработчика начинающим 😂

Узнать, как правильно организовать асинхронность загрузки ресурсов, вам помогут полезные ссылки ниже 👇

Lazy Loading Images and Video
Скрипты: async, defer
Dynamic imports

Babel + core-js = ❤️

#frontend #javascript #babel #corejs

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

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

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

На помощь приходит Babel. Пакет @babel/presset-env подключает необходимые модули библиотеки полифилов core-js, когда в коде используются не поддерживаемые браузерами языковые конструкции. Пресет ориентируется на список браузеров, указанный в package.json.

Чтобы Babel автоматически добавлял нужные полифилы в бандл, нужно создать в корне проекта babel.config.json. Такая конфигурация будет проверять пакеты из node_modules и добавлять полифилы core-js в соответствии с browserlist, указанном в package.json.

Вместо большого количества импортов и отказа от современных методов JavaScript можно добавить всего 14 строк в конфигурацию Babel. Подробнее о конфигурации Babel можно почитать здесь, о полифилах — тут.

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.