MicroSPA, или как изобрести квадратное колесо

Всем привет, меня зовут Андрей Яковенко, и я веб-разработчик компании Digital Design.

В нашей компании есть множество проектов, реализованных с помощью системы управления веб-контентом sitefinity, или по-простому CMS. Причины, по которым мы ее используем, были описаны ранее в этой статье. CMS – это, как правило, Multi Page Application, и сегодня я расскажу о том, что может дать внедрение frontend-фреймворков в решения на sitefinity и как это сделать.

Лирическое отступление

Хоть sitefinity и имеет на борту Angular.js, возможность интеграции других фреймворков отсутствует в силу закрытости исходных кодов. Однако это не мешает нам использовать возможности других фреймворков.

Примеры в данной статье не являются панацеей и несут в основном информационный характер.

Поиск нового

Так как Angular, хоть и первой версии, уже присутствует в sitefinity, нам захотелось подружить нашу CMS с React или Vue.js.

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

После беглого просмотра возможных решений был найден интересный проект, который компилировал страницы, написанные на React, в статический html. Такое решение нам не подходило, так как нам необходимо не терять всех прелестей SSR (Server Side Render) наряду с использованием исполняемого кода на стороне клиента.

От слов к делу

Sitefinity, как и большинство CMS, позволяет компоновать страницу различными элементами для отображения контента (виджетами). Мы на примере рассмотрим варианты внедрения Vue.js в уже готовые виджеты.

Первый способ (простой)

Данный способ заключается в подключении Vue.js как библиотеки в основной шаблон страницы.

После этого мы в любом месте можем инициализировать наше приложение в любом виджете.

Пример простого виджета:

new Vue({
    el: '#widget-id',
    data: {
        msg: 'Hello world',
    },
})

Однако это будет означать, что весь блок виджета будет использован как шаблон, и Vue.js будет пытаться его интерполировать и, чтобы вывести сообщение в нужном месте, необходимо будет написать специальную конструкцию, которая будет отображаться, если что-то вызовет приостановку выполнения js кода перед рендером, или если у пользователя будет отключен JavaScript.

Решением данной проблемы будет написание собственного шаблона, который будет дублировать виджет. Расширим наш компонент.

Пример:

new Vue({
    el: '#widget-id',
    data: {
        msg: 'Hello world',
    },
    template: '<div>{{msg}}</div>',
})

Теперь весь html код нашего виджета будет заменен на шаблон, описанный в поле template, а для того чтобы передать данные из модели виджета во Vue, достаточно конвертировать модель в JSON любым удобным способом и передать его в поле data.

Второй способ (сложный)

Для данного способа нам потребуется webpack, в минимальной конфигурации которого будет vue-loader. Также у нас нет необходимости в использовании html-extract-plugin, т.к. мы можем хранить шаблоны в js коде.

Теперь мы можем использовать однофайловые компоненты Vue.

Пример однофайлового компонента (Sample.vue):

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
    name: 'Sample',
    data: function () {
        return {
            msg: 'Hello world',
        }
    },
}
</script>

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

После написания компонента-виджета нам необходимо его инициализировать.

Пример инициализации виджета:

import Vue from 'vue'
import Sample from '../Sample.vue'

Vue({
    render: function (h) {
        return h(Sample)
    }
}).$mount('#widget-id')

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

Расширим наш пример:

import Vue from 'vue'
import Sample from '../Sample.vue'

function initWidget (selector) {
    Vue({
        render: function (h) {
            return h(Sample)
        }
    }).$mount(selector)
}

initWidget('#widget-id')

Осталось передать данные модели виджета во Vue.js компонент. Это легко сделать, записав их в JSON перед передачей в объект data экземпляра Vue, после чего их можно передать компоненту в качестве пропсов.

Пример:

import Vue from 'vue'
import Sample from '../Sample.vue'

function initWidget (selector) {
    Vue({
        data: function () {
            return {
                some: 'some value',
            }
        },
        render: function (h) {
            return h(Sample, { props: data })
        }
    }).$mount(selector)
}

initWidget('#widget-id')

Небольшое ревью

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

Однако у обоих способов есть один большой недостаток – при таком использовании фреймворков появляется необходимость дважды выполнять одну и ту же работу для участков страниц, от которых зависит SEO.

С другой стороны, при желании, с помощью такого подхода можно подключить любой фреймворк, библиотеку или написать собственный DOM-менеджер на ванильном JavaScript или jQuery.

На этом все. Спасибо за внимание.