XML+XSLT in a Browser

The following text is a partial translation of the original English article, performed by ChatGPT (gpt-3.5-turbo) and this Jekyll plugin:

“Разделение данных и их представления” - это замечательная концепция. Возьмем, например, HTML и CSS. HTML должен содержать чистые данные, а CSS должен форматировать эти данные, чтобы они были удобны для чтения человеком. Возможно, лет десять назад это и было намерением HTML/CSS, но на самом деле это не работает так. Главным образом потому, что CSS недостаточно мощный.

Нам все еще приходится форматировать наши данные с помощью тегов HTML, хотя CSS может немного помочь с позиционированием и оформлением.

С другой стороны, XML с XSLT воплощает идею разделения данных и представления идеально. XML-документы, подобно HTML, должны содержать только данные без информации о позиционировании или форматировании. Таблицы стилей XSL позиционируют и оформляют данные. XSL - это язык намного более мощный. Поэтому в XML можно избежать любого форматирования.

Последние версии Chrome, Safari, Firefox и IE все поддерживают этот механизм. Когда браузер получает XML-документ с сервера и у него есть связанный с ним таблица стилей XSL, браузер преобразует XML в HTML на лету.

Давайте рассмотрим простое веб-приложение на Java, которое работает следующим образом. Оно использует Takes Framework, который позволяет реализовать этот механизм. В следующем посте я объясню, как работает ReXSL. А пока давайте сосредоточимся на идее доставки чистых данных в формате XML и их форматировании с помощью XSL-стилей.

Откройте https://www.stateful.co — это набор состояний веб-примитивов, объясненный в статье “Атомарные счетчики на Stateful.co”.

Откройте его в Chrome или Safari. Когда вы это сделаете, вы должны увидеть обычную веб-страницу с логотипом, некоторым текстом, ссылками, подвалом и т.д. Теперь проверьте его исходники (я предполагаю, что вы знаете, как это сделать).

Приблизительно вот что вы увидите (я предполагаю, что вы понимаете XML, если нет, начинайте его изучать немедленно):

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

Документ содержит данные, которые важны для его запросчика. Запросчику решать, как отображать данные или не отображать их вообще.

Вторая строка связывает документ со стилевым листом XSL /xsl/index.xsl, который загружается браузером отдельно.

Откройте инструменты разработчика в Chrome, и вы увидите, что сразу после загрузки страницы браузер загружает XSL-стили и затем все остальные ресурсы, включая несколько CSS-стилей, jQuery и SVG-логотип.

Давайте рассмотрим пример index.xsl (на самом деле он намного сложнее, проверьте layout.xsl. Например:

Я считаю, что очевидно, как будет выглядеть HTML-страница после применения этого XSL-стилевого файла к нашему XML-документу.

Для меня этот XSL выглядит понятным и легким для восприятия. Однако я часто слышу, как люди говорят, что XSLT - это язык программирования, трудный для понимания. Лично я не считаю его сложным. Конечно, я не использую все его возможности. Но для простого отображения страницы мне достаточно знать несколько простых команд и принцип трансформации XML.

Теперь, почему этот подход лучше, чем все эти широко используемые Java-движки шаблонизации, включая JSP, JSF, Velocity, FreeMarker, Tiles, и т.д.?

Ну, я вижу несколько причин. Но самые важные из них:

  1. XSL можно тестировать самостоятельно без сервера. Чтобы проверить, как наш веб-сайт будет выглядеть с определенными данными, мы просто создаем новый XML-документ с необходимыми тестовыми данными, связываем его с XSL и открываем его в браузере. Мы также можем изменять XML и обновлять страницу в браузере. Это значительно облегчает работу дизайнера HTML/CSS и освобождает его от зависимости от программистов.

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

  3. XML-вывод легко поддаётся тестированию. Контроллер в архитектуре MVC, генерирующий XML-документ со всеми данными, необходимыми для XSL-таблицы стилей, может быть легко протестирован в рамках единого модульного теста с использованием простых XPath-выражений. Тестирование контроллера, внедряющего данные в шаблонизатор, является гораздо более сложной операцией, иногда даже невозможной. Я также пишу на PHP и Ruby. У них точно такие же проблемы, даже если их шаблонизаторы более мощные благодаря интерпретационной природе языков.

Is It Fully Supported?

Все было бы замечательно, если бы все браузеры поддерживали отображение XML+XSL. Однако это далеко не так. Только последние версии современных браузеров поддерживают XSL. Проверьте это сравнение, выполненное Джулианом Решке. Кроме того, XSLT 2.0 вообще не поддерживается.

Однако есть обходной путь. Мы можем понять, какой браузер делает запрос (по его заголовку HTTP User-Agent) и преобразовывать XML в HTML на сервере. Таким образом, для современных браузеров, поддерживающих XSL, мы будем доставлять XML, а для всех остальных - HTML.

Именно так работает фреймворк ReXSL. Откройте https://www.stateful.co в Internet Explorer и вы увидите HTML-документ, а не XML-документ, как это происходит в Chrome.

Кстати, посмотрите, как это реализовано: XML Data и XSL Views в фреймворке Takes.

Прочитайте это, продолжается обсуждение этой темы: RESTful API и веб-сайт по одному и тому же URL.

Translated by ChatGPT gpt-3.5-turbo/42 on 2023-12-17 at 16:05

sixnines availability badge   GitHub stars