Технологический стек для создания конструкторов веб-сайтов

Sitecore - это программная технология, которая уже несколько лет используется для создания крупномасштабных веб-сайтов с большим объемом контента. По сути, это программа для создания специального конструктора веб-сайтов корпоративного размера. Он широко используется в корпоративном мире, особенно разработчиками Visual Studio и ASP .NET из-за его связи с Microsoft. Хотя само программное обеспечение Sitecore все еще привязано к среде Windows, компания начала разрабатывать инструменты совместимости с JS, такие как JSS, для своего продукта, чтобы позволить разработчикам JS разрабатывать поверх платформы.

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

По сути, Sitecore - это веб-сервер с сопутствующими базами данных, который служит точкой входа для каждого нового HTTP-запроса. Каждый веб-сайт sitecore также сопровождается приложением, которое развертывается в тандеме, в котором хранится пользовательский код, определяющий различные части приложения sitecore. Когда вы строите на sitecore, это, по сути, каркас для всего вашего веб-приложения.

Основные концепции

Существует 10 концепций, которые являются фундаментальными для Sitecore, и их можно разделить на 2 категории - концепции, связанные с данными и темы, связанные с презентациями. Основополагающей статьей по этой теме является документ об основах для разработчиков sitecore, который можно скачать в формате PDF здесь. Я, например, читаю его каждую ночь перед сном :)

В приведенной выше статье Дерек Роберти описывает, как Sitecore хранит данные, используя различные базы данных, которые работают вместе с ним, как создаются шаблоны, визуализируются и создаются различные типы контента в редакторе контента, и, наконец, как использовать макеты и визуализации для фактического создания новых страниц. используя концепции «рендеринга» элементов в дереве контента. Я кратко пройдусь по каждому из них ниже:

  1. Базы данных: Sitecore хранит контент в семи базах данных: Web, Master, Security, Extranet, Recycle Bin, Archive и Core.
  2. Элементы: представление этих элементов данных для пользователя представляет собой дерево содержимого в базе данных SC (см. Рисунок дерева содержимого ниже). Элементы содержимого разделены по их функциям, поскольку элемент содержимого может использоваться для множества различных целей. Элементы в корневой папке «/ home» обычно используются для маршрутизации, поэтому sitecore будет искать там, когда пользователь посещает yourwebsite.com/. Они будут содержать ссылки на другие элементы, которые будут определять способ отображения страницы. Элементы в папке «/ content» обычно используются только для хранения контента, а не для определения представления, а элементы в папке «/ layout» используются для определения конкретных частей логики представления.
  3. Шаблоны: тип элемента содержимого. Здесь вы можете определить поля, которые будут определены для любого создаваемого элемента этого типа. Например, если вы настраиваете шаблон для элемента «автомобиль», каждый раз, когда вы создаете новый автомобиль, он будет содержать эти элементы. Поскольку большая часть возможностей sitecore заключается в возможности редактирования нетехническими пользователями, есть много возможностей настройки в шаблонах, которые используются для создания элементов.
  4. Мастера: расширение концепции шаблонов, мастер - это, по сути, любая дополнительная логика, которую мы хотим определить для создания нового экземпляра элемента. Здесь мы можем определить такие вещи, как то, какие поля будут иметь значения по умолчанию, может ли созданный нами элемент принимать дочерние элементы любого типа или только типы выбора и т. Д.
  5. Устройство: это концепция в ядре сайта запрашивающего агента (мобильный, настольный компьютер, ipad и т. Д.)
  6. Макеты: это презентационный компонент самого высокого уровня. Он определяет определенные типы обычно используемой логики представления для страницы и будет ссылаться на фрагмент html / cshtml, который будет использоваться для его визуализации. в нем будут поисковики для динамического контента. Типичным примером этого типа элементов является макет верхнего / нижнего колонтитула.
  7. Подкомпоновки: это еще один уровень ниже с точки зрения представления вашего контента. Например, вы можете определить элемент подкомпоновки макета с двумя столбцами, который можно комбинировать с основным макетом верхнего / нижнего колонтитула для получения желаемого эффекта.
  8. Визуализация: это основной элемент презентации, и в типичном проекте их будет много. Они определяют фрагмент кода html / cshtml, который будет наполнен данными и предоставит содержимое пользователю. Примером этого может быть список продуктов или карусель изображений.
  9. Статическое и динамическое размещение: есть два способа определить способ, которым происходит рендеринг: первый - это фактически добавить содержимое html / cshtml к вашему рендерингу, а второй - добавить заполнитель к вашему рендерингу, который будет преобразован в элемент контента в время выполнения. Первое называется статическим размещением, а второе - динамическим.

Маршрутизация с помощью Sitecore

Sitecore отличается от классической CMS тем, что фактически контролирует маршрутизацию вашего приложения. Это означает, что когда на ваш веб-сайт поступают запросы, sitecore может фактически читать содержимое вашего внутреннего хранилища данных, строить страницу в соответствии со структурой данных, которые он хранит, а затем возвращать эту полную страницу пользователю.

Самое важное, что это позволяет редакторам контента, - это полностью определять маршруты в редакторе контента и добавлять страницы и контент, соответствующие этим новым маршрутам. Когда пользователь запрашивает my.website.com/home/products, приложение Sitecore будет искать в дереве контента, прежде чем искать что-либо еще, если есть элемент контента на данном маршруте в дереве контента, Sitecore найдет детали рендеринга для этот элемент и создайте его как полностью работающую страницу.

Когда на URL-адрес поступает запрос, sitecore выполняет следующие действия:

  1. Sitecore анализирует запрос, чтобы определить, какое устройство делает запрос.
  2. Sitecore определяет, какой элемент контента запрашивается, на основе пути в URL-адресе.
  3. Sitecore проверяет настройки презентации элемента. Если на уровне элемента нет настроек представления, Sitecore просматривает стандартные значения шаблона элемента.
  4. В зависимости от настроек презентации Sitecore использует соответствующий макет и добавляет все статически размещенные суб-макеты и визуализации.
  5. Затем Sitecore добавляет все динамически размещаемые суб-макеты и визуализации и возвращает HTTP-ответ.

Чтобы было понятнее, взгляните на диаграмму ниже:

Конечным результатом всей этой работы является то, что Sitecore создает серверную платформу, которая позволяет редакторам контента делать многие вещи без вас.

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

Спасибо за прочтение.

~ Алекс Зито-Вольф