Новые API браузера

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

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

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

Ранее большинство веб-сайтов были статичными, предоставляя одинаковый контент для всех посетителей. Возможность индивидуального наполнения страниц стала реальностью благодаря концепции серверного программирования и появлению скриптов CGI (Common Gateway Interface). JavaScript добавил динамичности веб-страницам, позволяя программировать на стороне клиента без необходимости обращения к серверу. Стандартные браузеры стимулируют фронтенд-разработчиков использовать разнообразные веб-API через интерфейсы JavaScript. Технология WebAssembly дает возможность запускать программы на C внутри веб-браузера, используя вычислительные ресурсы пользователя.

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

API пользовательских событий

В браузере среда выполнения JavaScript является однопоточной, а обработка  —  многопоточной. Браузер отправляет события в очередь JavaScript, помогающую выполнять асинхронную, неблокирующую разработку. Функции всплытия и распространения событий DOM помогают улучшать взаимодействие с веб-интерфейсами. Большинство веб-API используют для событий DOM заранее определенные имена (например, onlick, onkeydown и т. д.) , но в браузере поддерживаются и пользовательские события.

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

window.dispatchEvent(new CustomEvent('event_name', {
    detail: {
        msg: 'ASDEV'
    }
}));

Также очень просто подписаться на пользовательское событие и получить доступ к его полезной нагрузке:

window.addEventListener('event_name', (evt) => {
    console.log(evt.detail.msg); // ASDEV
});

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

Использование встроенного API-интерфейса Sanitizer

Рендеринг динамического HTML обычно выполняют через шаблоны в MVC-подобных интерфейсных средах, изменяя переменные шаблона. Если не использовать какую-либо платформу внешнего интерфейса, то для визуализации динамических данных в HTML подходит свойство DOM InnerText. В обоих сценариях вы в конечном итоге получите необработанную HTML-строку, если попытаетесь использовать HTML-код в переменной шаблона. Но в некоторых сценариях необходимо визуализировать HTML-код, который хранится в переменных JavaScript. Рендеринг кода HTML непосредственно из строки JavaScript  —  хорошо известная уязвимость. Например, сайт со следующим фрагментом уязвим в случае взлома сервера:

const dangerHTML = await getRawHTMLFromServer();
element.innerHTML = dangerHTML;

Если сервер отправит вредоносный код JavaScript, element выполнит его как обычно. Концепция очистки Sanitizer помогает удалять такие опасные теги, как <script/>, делая строки HTML безопасными для рендеринга в DOM:

element.innerHTML = sanitize(dangerHTML); // удаление <script> и пр. 

Не все интерфейсные фреймворки автоматически выполняют санацию. Поэтому для этой цели и стали столь популярны библиотеки.

Но теперь в современных браузерах есть экспериментальный встроенный API-интерфейс очистки. Он позволяет быстро очищать узлы DOM без повторного анализа строки HTML:

const sanitizer = new Sanitizer();
const dangerHTML = await getRawHTMLFromServer();

element.replaceChildren(sanitizer.sanitizeFor('div', dangerHTML));

Ярлыки API для манипуляций и обхода DOM

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

Раньше для манипулирования и обхода DOM использовали JQuery, поскольку встроенный API DOM был немного громоздким. Но теперь более продуктивные функции встроенного API могут заменить и JQuery. Рассмотрим несколько примеров простого манипулирования именами классов CSS:

element.classList.replace('row', 'col');
element.classList.toggle('open');

Выбрать элементы DOM с помощью селектора так же просто, как с и JQuery, например:

const openNodes = document.querySelectorAll('.root .menu li.open');

Для запроса гиперссылок в веб-документе не требуются селекторы запросов  —  можно использовать предварительно инициализированное свойство:

const linkNodes = document.links;

Такую же производительность, что и JQuery, обеспечивают связанные с DOM и доступные в стандартных браузерах методы:

const titleNode = mainSection.closest('.title');
titleNode.after(subTitleNode);
titleNode.prepend(bulletNode);

Теперь благодаря встроенным API даже плавная прокрутка, добавление анимации и прочие функции возможны без JQuery. Узнать больше о стратегиях манипулирования DOM с помощью лишь обычных веб-API можно в репозитории GitHub.

Полезные события в современных приложениях

Будучи полезной и удобной для разработки средой, браузер генерирует множество полезных для разработчиков событий JavaScript. Их можно использовать для создания современных производительных веб-приложений. Рассмотрим некоторые из них.

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

document.addEventListener('visibilitychange', () => {
    console.log(document.visibilityState);   // 'visible' или 'hidden' 
});

Новое продуктивное и полезное (экспериментальное) событие scrollend помогает реализовать такие функции, как бесконечная прокрутка, даже без использования проверок границ на основе if:

document.addEventListener('scrollend', async () => {
    await fetchData(); 
});

Теперь не нужно использовать опрос AJAX для определения статуса сети онлайн/оффлайн. Новые встроенные сетевые события могут определять статус подключения к интернету:

window.addEventListener('online', () => {
    console.log('online');
});

window.addEventListener('offline', () => {
    console.log('offline');
});

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

WebAssembly и Worker API для современных приложений

Теперь в браузере можно запускать программы на C, Rust, Go, Python и Zig, скомпилировав их как программы WebAssembly. Это позволяет запускать имеющуюся серверную логику на стороне клиента, даже не переписывая ее на JavaScript. Рассмотрим следующую функцию Zig в файле add.zig:

export fn add(a: i32, b: i32) i32 {
    return a + b;
}

Файл Wasm можно создать следующим образом:

zig build-lib -target wasm32-freestanding -dynamic add.zig

Наконец, экспортированную выше функцию Zig можно вызвать из JavaScript:

fetch( 'add.wasm' )
	.then( r => r.arrayBuffer() )
	.then( bytes => WebAssembly.instantiate( bytes ) )
	.then( r => {
		const add = r.instance.exports.add
		console.log( add( 10, 20 ) )
	} )

С другой стороны, концепция веб-воркеров помогает запускать ресурсоемкий код в отдельном экземпляре выполнения JavaScript, не блокируя основной поток рендеринга:

const wr = new Worker('background_task.js');
wr.onmessage = (e) => console.log(e.data);

Это позволяет перенести задачу с сервера на сторону клиента, не влияя на производительность пользовательского интерфейса приложения.

API DOM Observer для перспективных пользовательских интерфейсов

Возможностей пришедшего из эпохи IE традиционного DOM API для обычной разработки ранее хватало. Но в современных приложениях с продуктивными функциями требовались обходные варианты. Сегодня API DOM Observer помогает внедрять такие новые функции, как бесконечная перезагрузка, отмена-повтор, адаптивные системы виджетов и другие, без использования обходных путей и сторонних библиотек.

Примеры использования DOM Observer:

• ResizeObserver: реализация адаптивных, отзывчивых виджетов.
• IntersectionObserver: запуск действий, когда определенный элемент DOM виден (или невидим) в текущем окне просмотра, т. е. отложенная загрузка изображений во время прокрутки.
• MutationObserver: обнаружение изменений элемента DOM, т.е. для реализации отмены-повтора и т.д.

Заключение

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

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