В Liferay 7.1 принципиально пересмотрели подход в работе с сайтами. Теперь в Liferay мы именно "строим" новые сайты - под это даже выделен отдельный раздел Build в меню управления сайтом, где администратор может управлять страницами, шаблонами, меню и фрагментами страниц.

Фрагменты страниц - это новая концепция, которая появилась в Liferay 7.1. По сути дела - это шаг навстречу front-end разработчикам. Посмотрим - насколько этот шаг удался.

Раньше (в версии до 7.1) для создания обычных страниц (без какого-то функционала) можно было использовать страницы и размещать на них Web-Content. Этот вариант неплохо работал для простых страниц - редактор контента без глубоких знаний программирования и верстки мог в несколько кликов мышки создать новую страницу, задать для нее раскладку (1 колонка, 2 колонки...) и накидать контенты, создавая их в WYSIWYG редакторе. Проблемы начинались когда надо было создавать страницы со сложной версткой. Тут получался полный разрыв - front-end разработчики "пишут" страницы локально - получается какой-то код на html/js/css, потом этот код надо мучительно разбивать на тему (theme) и веб-контенты, накидывать контенты на страницу, затем аккуратно переносить все между средами (dev-test-uat-prod) и так по кругу при каждом изменении. Одним словом серьезная разработка сложного сайта на Liferay, особенно если в разработку привлечена команда frontend-еров, не знакомых с Liferay - этот тот еще квест. И фрагменты страниц призваны эту разработку упростить.

Что же такое page fragment (фрагмент страницы)? Это по сути дела набор: HTML + стили CSS + код на JavaScript. После написания этот набор можно размещать на любой страницы специального типа (Content Page). Все фрагменты объединены в коллекции (типа папки).

Давайте попробуем создать страницу (повторяет страницу Welcome которая создается по умолчанию) с использованием фрагментов. Для начала идем в управление сайтом -> Build -> Page Fragments и создадим новую  коллекцию Main Page.

Изначально в коллекции нет никаких фрагментов - создаем первый фрагмент - Main Page Header

Мы попадаем в редактор фрагмента, разбитый на 4 части - HTML, CSS, JavaScript и превью. Накидаем простейший код для создания аналогичного приветствия как и в портлете Welcome.

Так мы можем создать любое количество коллекций и фрагментов, которые потом могут быть размещены на Content Page. При создании страницы теперь есть выбор, какую страницу мы создаем.

Есть два основных типа: Widget Page (на которой размещаются портлеты-widget-ы) и Content Page (которая как раз строится из Page Fragment-ов). Выберем Content Page и создадим новую страницу Main (сразу добавив ее в меню по умолчанию).

Получаем пустую страницу с возможностью выбора фрагментов (у нас он пока один).

Добавив фрагмент на страницу мы можем управлять его расположением (перемещать вверх-вниз). Почему-то поддержка Page Layout-ов не предусмотрена - то есть мы можем размещать фрагменты друг-под-другом - но не несклько-в-ряд.

В итоге получаем страницу с необходимым контентом

Но самое важное не это, а то, что фрагменты и коллекции можно импортировать и экспортировать - при этом в качестве артифакта для импорта-экспорта мы получаем ZIP с несколькими настроечными json-файлами - и далее понятными любому разработчику html/css/js файлами. То есть теперь легко можно вести разработку фрагментов локально, используя в том числе систему контроля версий (тот же git) - и импортировать результат в Liferay (в том числе теперь упрощается передача артифактов между средами!)

Итого - мы имеет явный шаг в сторону удобства работы front-end разработчиков и разделения разработки фронта и бека. Backend-еры пишут свои REST-сервисы и деплоят в виде OSGI модулей а frontend-еры пишут фрагменты локально - и импортируют их через импорт/экспорт. Администратор потом из этого собирает финальный сайт.

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

Поддержка дополнительных ассетов (изображений) - как факт - любой фрагмент - это не только html/css/js - но и изображения. Даже в моем простом примере мы использовали background-картинку. Но изображения не являются частью фрагментов - так что, если какому-то фрагменту нужна какая-то картинка - эта картинка сначала должна быть загружена в тему (что плохо - тема не должна содержать что-то, специфичное для конкретного контента), либо в Document Library (но тогда она получит разную ссылку на скачивание в разных средах!) и только потом на нее можно ссылаться в fragment-е. Без поддержки изображений мы по сути дела можем создавать только простые фрагменты (а смысл тогда???)

Локальная отладка фрагментов - основной плюс фрагментов я вижу в том, что frontend-разработчик может разрабатывать фрагменты локально в виде понятных ему артифактов (html/css/js) и только когда все готово - импортировать на портал. Но для локальной разработки у разработчика должна быть возможность посмотреть, как будет выглядить фрагмент в контексте (как минимум в теме). Без какого-либо средства (например задача в gulp, которая бы брала тему, фрагмент и создавала статическую страницу с фрагментов в теме) разрабатывать фрагменты локально получается нереально

Поддержка Page Layout-ов - не понимаю почему Content Page позволяет располагать фрагменты только в одну колонку... При том что поддержка Page Layout-ов есть в Liferay изначально.

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

Итого - идея хорошая - но реализация какая-то половинчитая и насколько это поможет в реальных, серьезных проектах я пока сильно сомневаюсь. Надеюсь только что это лишь "первая версия" и , например, в Liferay 7.2 мы увидим полноценную реализацию.