Изменчивая неизменяемость

От производительности до пользовательского опыта, от фреймворков до дизайна. Evrone каждый месяц создаёт полезную подборку из статей, инструментов и советов для frontend-разработчиков. Добро пожаловать в наш майский дайджест!

Цена неизменяемости

Почему мой код на JavaScript отрабатывает десяток секунд? Как вышло, что код был зайцем на тестовых данных и превратился в черепаху на реальных? Давайте наденем шляпу охотника за оленями и разберёмся в происходящем. Начнём с трассировки — важно понять, какая часть кода тратит больше всего времени перед выдачей ответа.

Любую аномалию необходимо фиксировать и разбираться в причинах. Если одна функция выполняет 7 секунд один запрос, а другая за 1.5 секунды успевает выполнить 5 запросов — это повод для проверки. Часть таких проблем обычно решается за счёт выполнения параллельных запросов. Потенциальное ускорение будет ограничено лишь законом Амдала.

Копирование массивов через оператор spread также может быть скрытым источником проблемы. А неизменяемость имеет вполне конкретную стоимость. Хотите больше деталей? Статья автора Swizec Teller читается как хороший детектив и точно удовлетворит ваше любопытство.

Представлен TypeScript 4.7 RC

11 мая вышел релиз-кандидат языка программирования TypeScript версии 4.7. Взглянем, что нас ожидает в релизе. 

Поддержка ECMAScript-модулей стала долгожданным событием. Реализовать эту возможность в Node.js было сложно. Проблема в том, что вся экосистема Node.js была заточена на другую систему модулей — CommonJS. Ещё одна новинка — опция управления обнаружением модулей moduleDetection. Она призвана устранить несоответствие поведения между Node.js и TypeScript при обнаружении модулей.

Защита типов стала лучше. Новая версия TypeScript анализирует и корректно сужает вычисляемые свойства. Относится это к свойствам с ключами литеральных типов и уникальных символов. Теперь есть возможность проверять, что вычисляемые свойства корректно инициализируются в конце «тела» конструктора.

Был расширен вывод функций в объектах и методах. Типы функций передаются как и простые аргументы — слева направо. Крутейшей фичей стало создание псевдонимов при создании экземпляров классов. Проверки типов стали строже, а выдаваемые сообщения информативнее.

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

Remix – фокус на интерфейсе

Больше фреймворков богу фреймворков. Remix — full-stack веб-фреймворк, делающий акцент на пользовательском опыте. Суть проекта в создании бесшовной среды, где сервер и клиент взаимодействуют так, чтобы уйти от привычных статических сборок. Основа фреймворка — Fetch API, обеспечивающий получение ресурсов и гибкое управление сетевыми взаимодействиями.

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

Чтобы обеспечивать мгновенный отклик, производится фоновая загрузка ещё до того, как пользователь выполнит действие. Всё, включая каскадные таблицы стилей, готовится заранее, что даёт почти полное отсутствие привычных индикаторов загрузки (тробберов) и «мусора».

Top frontend VS Code extensions

Visual Studio Code не нуждается в особом представлении. Разработчики, технические писатели, верстальщики — для них он давно стал эталоном. Конечно, функции этого редактора можно значительно расширить за счёт дополнений. Мы нашли топ из 17 дополнений, улучшающих жизнь front-end разработчику. Расскажем о некоторых.

Хороший код не только выполняет свою работу, но и хорошо выглядит. Помочь соблюдать единый стиль помогает Prettier. После установки нужно зайти в настройки и указать его в качестве средства форматирования по умолчанию. Интересно, что это дополнение также модульное и может быть расширено за счёт плагинов.

Необходимость создания документации, хотя бы на базовом уровне, один из важных моментов разработки ПО. Когда в команде есть выделенный технический писатель (а лучше несколько), документирование кода можно делегировать ему. Но что, если надо самому тратить на это время?

Изящное решение предлагает дополнение Mintlify Doc Writer. Оно самостоятельно создает документацию для любого выделенного участка кода. Понятно, что она не будет абсолютно точной, но сможет стать хорошим черновиком для написания уже человеческой документации. Опять же, техническому писателю придётся реже обращаться к разработчикам. Профит!

Полезным для front-end разработчика будет дополнение Image preview. Эта штука выводит миниатюрное превью указанных в документе изображений слева от нумерации строк и при наведении на ссылку. Работа с каскадными таблицами стилей, содержащих множество графических элементов, упрощается в разы.

 

Обучение

Митапы

Вакансии