Использование Iron без фреймворка на чистом http

Библиотека Iron (набор Polymer Iron Elements) может использоваться независимо от каких-либо SPA-фреймворков. В этом случае вся работа строится вокруг стандартного браузерного API, HTML и JavaScript без дополнительной архитектурной прослойки.

Основной способ подключения — через CDN или локальные сборки:

<script type="module" src="https://unpkg.com/@polymer/iron-ajax/iron-ajax.js"></script>
<script type="module" src="https://unpkg.com/@polymer/iron-form/iron-form.js"></script>

В отличие от React или Vue, здесь отсутствует этап компиляции. Браузер напрямую загружает ES-модули и регистрирует кастомные элементы.

Ключевой момент: Iron элементы являются Web Components, поэтому не требуют дополнительного runtime-движка.

Использование на чистом HTTP-сервере

При разработке без фреймворков чаще всего используется простой HTTP-сервер. Например, Node.js с модулем http:

import http from "http";
import fs from "fs";

http.createServer((req, res) => {
  if (req.url === "/") {
    const html = fs.readFileSync("./index.html");
    res.writeHead(200, { "Content-Type": "text/html" });
    res.end(html);
  }
}).listen(3000);

На стороне клиента в index.html подключаются Iron компоненты и используется нативный DOM.

Iron-ajax: работа с HTTP-запросами

Основной инструмент для сетевого взаимодействия — iron-ajax. Он заменяет необходимость вручную использовать fetch или XMLHttpRequest, хотя при необходимости может работать параллельно с ними.

Базовая структура

<iron-ajax
  id="request"
  url="/api/data"
  handle-as="json"
  method="GET"
  on-response="handleResponse">
</iron-ajax>

Управление через JavaScript

const request = document.querySelector("#request");

request.generateRequest();

Обработка ответа

function handleResponse(event) {
  const data = event.detail.response;
  console.log(data);
}

Особенности работы

  • Автоматическая сериализация ответа
  • Поддержка JSON, text, document
  • Возможность декларативного описания запроса в HTML
  • Управление через свойства элемента

Использование Iron-ajax без декларативного HTML

Иногда удобнее создавать запросы программно:

const ajax = document.createElement("iron-ajax");

ajax.url = "/api/users";
ajax.method = "GET";
ajax.handleAs = "json";

ajax.addEventListener("response", (e) => {
  console.log(e.detail.response);
});

document.body.appendChild(ajax);
ajax.generateRequest();

Такой подход позволяет полностью контролировать жизненный цикл запроса без привязки к разметке.

Iron-form: работа с формами без сторонних библиотек

iron-form расширяет стандартное поведение HTML-форм, добавляя удобную сериализацию и отправку данных.

Базовая разметка

<iron-form id="form">
  <form>
    <input name="username" type="text">
    <input name="password" type="password">
    <button type="submit">Отправить</button>
  </form>
</iron-form>

Перехват отправки

const form = document.querySelector("#form");

form.addEventListener("iron-form-submit", (e) => {
  console.log("Данные формы:", e.detail);
});

Программная отправка

form.submit();

Сериализация данных формы

Одно из ключевых преимуществ Iron-form — автоматическая сериализация:

const data = form.serializeForm();
console.log(data);

Результат:

{
  username: "value",
  password: "value"
}

Интеграция Iron компонентов с нативным DOM

При работе без фреймворков важно понимать взаимодействие Web Components с обычной DOM-структурой.

Пример комбинирования

<div id="app">
  <iron-ajax id="api" url="/api" handle-as="json"></iron-ajax>

  <button id="load">Загрузить</button>

  <pre id="output"></pre>
</div>
const api = document.querySelector("#api");
const output = document.querySelector("#output");

document.querySelector("#load").addEventListener("click", () => {
  api.generateRequest();
});

api.addEventListener("response", (e) => {
  output.textContent = JSON.stringify(e.detail.response, null, 2);
});

Работа с событиями Iron компонентов

Iron элементы активно используют кастомные события. Важные из них:

  • response — успешный ответ сервера
  • error — ошибка запроса
  • iron-form-submit — отправка формы
  • iron-form-response — ответ формы

Пример обработки ошибок:

ajax.addEventListener("error", (e) => {
  console.error("Ошибка запроса", e.detail);
});

Управление состоянием без фреймворка

При отсутствии React/Vue состояние хранится в переменных и DOM-узлах.

let state = {
  users: []
};

ajax.addEventListener("response", (e) => {
  state.users = e.detail.response;
  render();
});

function render() {
  document.querySelector("#output").textContent =
    state.users.map(u => u.name).join("\n");
}

Iron компоненты здесь выступают только как транспорт данных, не навязывая архитектуру.

Динамическое создание интерфейса

Без фреймворка интерфейс часто строится вручную:

function createUserCard(user) {
  const div = document.createElement("div");
  div.className = "card";
  div.textContent = user.name;
  return div;
}

Совмещение с Iron-ajax:

ajax.addEventListener("response", (e) => {
  const container = document.querySelector("#list");
  container.innerHTML = "";

  e.detail.response.forEach(user => {
    container.appendChild(createUserCard(user));
  });
});

Работа с чистым HTTP API

Iron-ajax хорошо ложится на архитектуру REST:

  • GET — получение данных
  • POST — создание сущностей
  • PUT/PATCH — обновление
  • DELETE — удаление

Пример POST:

<iron-ajax
  id="createUser"
  url="/api/users"
  method="POST"
  content-type="application/json"
  body='{"name":"test"}'
  handle-as="json">
</iron-ajax>
document.querySelector("#createUser").generateRequest();

Использование Iron в минималистичных проектах

Без фреймворков Iron особенно полезен в следующих случаях:

  • админ-панели с минимальной логикой
  • статические сайты с динамическими запросами
  • учебные проекты для понимания Web Components
  • микрофронтенды без сборки

Архитектура остаётся плоской: HTML + JS + HTTP.

Взаимодействие с чистым JavaScript API

Iron не заменяет стандартные API, а дополняет их.

fetch и Iron-ajax вместе

fetch("/api/data")
  .then(r => r.json())
  .then(data => console.log(data));

или аналогично:

ajax.generateRequest();

Разница — в декларативности и интеграции с событиями DOM.

Ограничения подхода без фреймворков

Работа с Iron без фреймворков накладывает ряд особенностей:

  • отсутствует централизованный state manager
  • DOM обновляется вручную
  • нет встроенного роутинга
  • архитектура полностью на разработчике

При этом сохраняется полная прозрачность выполнения кода и контроль над HTTP-слоем.

Организация проекта

Типичная структура:

/project
  index.html
  app.js
  styles.css
  /api (Node.js server)

Клиентская часть не требует сборки и работает напрямую в браузере.

Работа в реальном времени без сторонних библиотек

Пример обновления данных через интервал:

setInterval(() => {
  document.querySelector("#api").generateRequest();
}, 5000);

Такой подход часто используется в простых мониторинговых интерфейсах.

Комбинация Iron с нативными Web Components

Iron элементы можно комбинировать с собственными компонентами:

class UserCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div>${this.getAttribute("name")}</div>`;
  }
}

customElements.define("user-card", UserCard);

И использование вместе:

<iron-ajax id="api" url="/users" handle-as="json"></iron-ajax>
<div id="list"></div>
api.addEventListener("response", (e) => {
  const list = document.querySelector("#list");

  e.detail.response.forEach(user => {
    const card = document.createElement("user-card");
    card.setAttribute("name", user.name);
    list.appendChild(card);
  });
});

Прямое управление жизненным циклом компонентов

В отсутствие фреймворка важно вручную контролировать:

  • создание элементов
  • удаление из DOM
  • повторное использование
function clear(node) {
  while (node.firstChild) {
    node.removeChild(node.firstChild);
  }
}
Оглавление