Как JavaScript подружился с современными веб-технологиями

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

Digital-студия WNDER

WebAssembly: когда JavaScript нужен помощник

WebAssembly (Wasm) — это бинарный формат, который выполняется в браузере с почти нативной скоростью. JavaScript может загружать Wasm-модули и вызывать их функции, как будто это обычные JS-функции. Это открывает двери для тяжёлых вычислений: обработка видео, игры, научные расчёты.

Пример: загружаем простой Wasm-модуль, который складывает два числа. На практике модуль компилируется из C/C++ или Rust, но мы посмотрим, как его подключить.

// Предположим, у нас есть файл add.wasm, экспортирующий функцию add
fetch('add.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const add = results.instance.exports.add;
    console.log('2 + 3 =', add(2, 3)); // 5
  });

Как видишь, ничего сложного. JavaScript остаётся «клеем», который управляет логикой, а Wasm берёт на себя тяжёлую работу.

Service Workers и PWA: делаем сайт офлайн

Прогрессивные веб-приложения (PWA) — это сайты, которые могут работать без интернета, отправлять push-уведомления и устанавливаться на домашний экран. В основе лежат Service Workers — скрипты, которые браузер запускает в фоне и которые перехватывают сетевые запросы.

JavaScript здесь главный дирижёр. Ты регистрируешь Service Worker, кешируешь ресурсы и управляешь стратегией загрузки.

// Регистрация Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker зарегистрирован:', registration.scope);
    })
    .catch(error => {
      console.log('Ошибка регистрации:', error);
    });
}

В самом файле sw.js можно описать кеширование:

// sw.js
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Теперь при повторном визите без сети браузер отдаст страницы из кеша. Это и есть основа PWA.

Web Components: свои теги как в HTML

Web Components позволяют создавать собственные HTML-элементы, которые инкапсулируют стили и логику. JavaScript используется для определения класса компонента и его регистрации.

Пример: создадим элемент <my-counter>, который увеличивает число по клику.

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
    this.addEventListener('click', () => {
      this.count++;
      this.render();
    });
  }

  render() {
    this.shadowRoot.innerHTML = `
      
      ${this.count}
    `;
  }
}

customElements.define('my-counter', MyCounter);

Теперь в HTML можно писать <my-counter></my-counter> и получать работающий счётчик. Это удобно для переиспользования кода в разных проектах.

Работа с API браузера: Fetch, WebSocket, Geolocation

Современные браузеры дают JavaScript доступ к множеству API. Рассмотрим три популярных.

• Fetch API — для сетевых запросов. Заменяет старый XMLHttpRequest.
• WebSocket — для двусторонней связи в реальном времени.
• Geolocation API — для определения местоположения пользователя.

Пример Fetch с обработкой JSON:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('Сеть не в порядке');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

Пример WebSocket:

const socket = new WebSocket('wss://echo.websocket.org');

socket.addEventListener('open', () => {
  socket.send('Привет, сервер!');
});

socket.addEventListener('message', event => {
  console.log('Сообщение от сервера:', event.data);
});

Пример Geolocation:

navigator.geolocation.getCurrentPosition(
  position => {
    console.log('Широта:', position.coords.latitude);
    console.log('Долгота:', position.coords.longitude);
  },
  error => console.error('Ошибка геолокации:', error)
);

Сравнение технологий: что когда использовать

Чтобы не запутаться, вот таблица с краткими рекомендациями.

Что в итоге

JavaScript — это не просто язык, а экосистема, которая постоянно растёт. WebAssembly даёт скорость, Service Workers — автономность, Web Components — модульность, а браузерные API — доступ к железу. Чтобы идти в ногу, достаточно пробовать каждую технологию на маленьких примерах. Начни с Fetch и Service Worker, потом перейди к WebAssembly. И помни: главное — практика.

Студия WNDER