Костыли из 90-х и принцип HTML First

Недавно на Хабре публиковался перевод статьи «Вам не нужен для этого JavaScript» ^[3] с примерами, где код JS легко заменить на HTML.

На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First ^[4].

В разных областях информатики применим принцип минимальных привилегий ^[5]. Среди прочего он означает, что для решения любой задачи следует выбирать самый простой подходящий инструмент. Другими словами, не нужно усложнять решение без необходимости. А самый лучший код — это его отсутствие ^[6].

В применении на веб-разработку это означает, что если нам для задачи достаточно базового HTML, то не нужно усложнять решение.

В вышеупомянутой статье «Вам не нужен для этого JavaScript» ^[3] приводится несколько примеров использования базового HTML/CSS вместо JS:

• красивые переключатели с различными вариантами оформления;
• datalist с нативным автозаполнением;
• инструмент для выбора цвета с дополнительными возможностями;
• аккордеоны;
• модальные диалоговые окна (нативный элемент <dialog>).

И это только самые простые примеры.

▍ Костыли 90-х

Интересно вспомнить, что пару десятилетий разработчикам приходилось применять HTML очень экзотическими способами ^[7]. Это 90-е годы, когда самыми популярными браузерами были Netscape Navigator и Internet Explorer, а первую версию CSS только недавно изобрели (17 декабря 1996 года, если верить Википедии ^[8]).

Мало кто помнит, но компания Netscape отчаянно сопротивлялась CSS, продвигая альтернативный стандарт JSSS ^[9] и не поддерживая все правила CSS в браузере. А если поддерживала, то некорректно. Поэтому в Netscape Navigator 4.0 разработчики браузера добавили команду @import, чтобы блокировать некоторые оригинальные правила CSS (которые коряво поддерживались), а вместо них загружать альтернативный файл .css. Выглядело это следующим образом ^[10]:

<link rel="stylesheet" type="text/css" media="all" title="Basic CSS" href="/basic.css" />
<style type="text/css" media="all">
 @import "/css/advanced.css";
</style

Это именно то, что сейчас принято называть словом «костыль». Разработчики Netscape не осилили поддержку CSS, поэтому им нужно было быстро что-то придумать, и вот они придумали такое. Версия Netscape Navigator 4.0 вышла в 1997 году, и с неё начался закат популярности этого браузера.

Как особый кошмар вспоминается вёрстка веб-страниц с помощью таблиц ^[11]. До появления CSS это был единственный способ красиво расположить блоки текста на странице (рамки нулевой ширины, прозрачные GIF и ещё несколько грязных хаков). Наверное, такой HTML-терроризм ^[12] стал главным драйвером для изобретения CSS. Но ещё раньше в HTML появилась поддержка фреймов. Кроме функции оформления, они ещё стали своеобразным прообразом CMS, потому что здесь можно было создать общий файл navigation.html и использовать его в отдельном фрейме на каждой веб-странице. В этом случае для обновления навигации на сайте больше не нужно было вручную обновлять все статичные странички:

Важным костылём были подчёркивания перед свойством. Дело в том, что спецсимволы перед классами парсил только IE6, а для него нужно было применять особые правила вёрстки из-за неправильной реализации стандартов:

.class {
	width: 300px;
	_width: 320px;
	padding: 10px;
}

В таком коде все браузеры видели width: 300px;, и только IE6 видел width: 320px;.

Спустя несколько лет количество костылей для Internet Explorer достигло таких масштабов, что Microsoft реализовала в браузере поддержку «условных комментариев» (conditional comments ^[13]), чтобы выделить код для конкретных версий IE:

<!--[(if expression) (IE version)]> 

   <p>Can’t believe you still use Internet Explorer!</p>

<![endif]-->

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

Условные комментарии удалили после IE9, а вместо них появилась функция Conditional Compilation в JScript/ JavaScript ^[14].

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

▍ Принципы HTML First

HTML First ^[4] — это набор рекомендаций, чтобы упростить и ускорить веб-разработку, а также улучшить сопровождение проектов. Три основных принципа:

1. Использование стандартных возможностей современных веб-браузеров.
2. Предельная простота синтаксиса. Вообще, HTML гораздо проще в обучении, см. сравнение структуры HTML и JavaScript ^[15], а также «33 концепции, которые должен знать каждый разработчик JavaScript» ^[16] (для понимания сложности JS в сравнении с HTML).
3. Возможность просмотра кода страницы.

Основная цель HTML First — существенно расширить круг людей в веб-разработке. Снижение барьеров позволит большему числу людей стать программистами. Это снижает стоимость создания ПО и улучшает ситуацию на рынке веб-разработки.

Вторая цель — сделать создание веб-программ более приятным и лёгким процессом. Настоящее удовольствие, когда код из редактора практически мгновенно запускается в браузере с минимальным количеством промежуточных этапов сборки и переключения контекста. Сегодня для этого требуется несколько лет освоения инструментов и фреймворков. Принципы HTML First позволяют людям гораздо раньше ощутить это чувство удовлетворения от написания работающей программы (пусть это сайт или веб-приложение).

Перечисленные принципы реализуются через конкретные практики:

• Самые стандартные методы и технологии (vanilla approach).
• Атрибуты HTML для управления стилями и поведением (то есть минимизация применения JS). Для стилизации рекомендуются Tailwind ^[17] и Tachyons ^[18], а для управления поведением — библиотеки hyperscript ^[19], Alpine ^[20] или им подобные.

  Желательно:

  
  <button onclick="this.classList.add('bg-green')">
    Click Me
  </button>

  Нежелательно:

  var resultsPane = document.getElementById("results-pane");
  resultsPane.addEventListener("click", function() {
      this.classList.add("active");
  });

• Библиотеки, которые используют атрибуты HTML, вместо библиотек на JavaScript.

  Положительный пример:

  <script src="https://unpkg.com/hyperscript@0.0.7/dist/hyperscript.min.js"></script>
  <div>
    <input type="text" _="on input put me into #output">
    <div id="output"></div>
  </div>

  Отрицательный пример:

  <script src="https://cdn.jsdelivr.net/npm/stimulus@2.0.0/dist/stimulus.umd.js"></script>
  
  <div data-controller="echo">
    <input type="text" data-echo-target="source" data-action="input->echo#update">
    <div data-echo-target="output"></div>
  </div>
  
  <script>
    const application = Stimulus.Application.start();
  
    application.register("echo", class extends Stimulus.Controller {
        static targets = ["source", "output"]
  
        update() {
            this.outputTarget.textContent = this.sourceTarget.value;
        }
    });
  </script>

• Отказ от промежуточных шагов при сборке.
• Предпочтительно чистый HTML, без обфускации.
• Читаемый код (ViewSource Affordance ^[21]), который люди могут посмотреть и понять.

  Для сравнения, код Google в 2000 году:

  

  Код Google в 2023 году:

  

  В 90-е годы просмотр кода страницы был настоящим подарком для начинающих разработчиков. Они могли посмотреть, как конкретно реализована та или иная функция, а зачастую скопипастить нужный фрагмент HTML или CSS. С тех пор в индустрии реализовано несколько «улучшений», которые сделали эту практику гораздо более редкой. Например, самый популярный фронтенд-фреймворк React инициирует этап сборки, то есть код в браузере отличается от кода, который написал разработчик.

  Принципы HTML First рекомендуют вернуться к старой практике — писать читаемый код, который можно копипастить. В будущем планируется составить библиотеку фрагментов кода HTML First.

В целом, практики и принципы HTML First всё ещё считаются экзотикой в современной индустрии в целом.

▍ Современная веб-разработка

У идеологии HTML First есть даже противники, которые доводят концепцию до абсурда: якобы сам HTML не нужен ^[22] для создания валидных страничек. В самом деле, браузеры вышли на такой уровень, что способны обработать и ошибки, и невалидные теги.

Конечно, призыв отказаться от HTML — это шутка, но если посмотреть на современные технологии веб-разработки, то обычный HTML вообще кажется устаревшим артефактом. Например, вот демонстрация возможностей PWA ^[23], прогрессивных веб-приложений. Они уже могут делать практически всё, что и нативные программы под Windows или Linux. Это совершенно новый уровень веб-разработки.

Что могут PWA

Или посмотреть на библиотеку GSAP ^[24] (и Svija Vibe ^[25]) для анимации средствами JavaScript и SVG. Одной строчкой кода можно генерировать красивые спецэффекты ^[26]. В 90-е годы такое сложно было представить.

А вот необычный способ применения современных технологий — HTML-страница, которая одновременно валидный PDF-файл и JPEG-картинка ^[27]. Её можно сохранить на диске, переименовать в .jpg или .pdf, и это будут валидные файлы с некоторым контентом.

Из других интересных штучек, которые появились в последнее время:

• Spin 2.0 ^[28]. Опенсорсный инструмент для создания WASM-приложений (WebAssembly).
• Расширение Chrome openapi-devtools ^[29], которое генерирует спецификации OpenAPI для любого сайта или веб-приложения.
• URL.canParse ^[30], новый метод валидации URL в JS.

В общем, развитие технологий идёт бурными темпами, но и ванильный HTML тоже не теряет актуальность, как бумажные ежедневники и виниловые пластинки.

Предыдущие статьи из серии «Интересные трюки HTML»:

• «Интересные трюки HTML, CSS и JS» ^[31]
• «Интересные трюки JS, HTML и CSS, #2» ^[32]
• «Экстремальный минимализм» ^[33]