Всем привет, меня зовут Андрей Яковенко, я веб-разработчик в компании Digital Design. Наша компания имеет множество проектов, реализованных с использованием системы управления веб-контентом.
сайтфинити или просто CMS. Причины, по которым мы его используем, были описаны ранее в этот статья.
CMS — это, как правило, многостраничное приложение, и сегодня я расскажу о том, что может дать внедрение frontend-фреймворков в решения на sitefinity и как это сделать.
Лирическое отступление
Хотя в sitefinity встроен Angular.js, возможность интеграции других фреймворков отсутствует из-за закрытых исходных кодов.Однако это не мешает нам использовать возможности других фреймворков.
Примеры в этой статье не являются панацеей и носят преимущественно информационный характер.
Ищите что-то новое
Поскольку Angular, хотя и первая версия, уже присутствует в sitefinity, мы хотели объединить нашу CMS с React или Vue.js. Оба эти фреймворка по-своему хороши и имеют свои подходы к разработке приложений, но другого сравнения мы проводить не будем.Бегло просмотрев возможные решения, я нашел интересный проект, который компилировал страницы, написанные на React, в статический html. Нам это решение не подошло, так как нам нужно не потерять все преимущества SSR (Server Side Render) вместе с использованием исполняемого кода на стороне клиента.
От слов к делу
Sitefinity, как и большинство CMS, позволяет компоновать страницу различными элементами для отображения контента (виджетами).На примере мы рассмотрим варианты внедрения Vue.js в готовые виджеты.
Первый способ (простой)
Этот метод предполагает подключение Vue.js как библиотеки к шаблону главной страницы.После этого мы можем инициализировать наше приложение в любом месте любого виджета.
Пример простого виджета:
Однако это будет означать, что весь блок виджета будет использоваться в качестве шаблона, а Vue.js попытается его интерполировать и, чтобы отобразить сообщение в нужном месте, необходимо будет написать специальную конструкцию, которая будет отображаться, если что-то приводит к приостановке выполнения кода js перед рендерингом или если у пользователя отключен JavaScript. Решение этой проблемы — написать свой шаблон, который будет дублировать виджет. Давайте расширим наш компонент. Пример:new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, })
new Vue({
el: '#widget-id',
data: {
msg: 'Hello world',
},
template: '<div>{{msg}}</div>',
})
Теперь весь html-код нашего виджета будет заменен на шаблон, описанный в поле шаблона, и для того, чтобы перенести данные из модели виджета в Vue, достаточно любым удобным способом преобразовать модель в JSON и передать ее в поле данных.
Второй способ (сложный)
Для этого метода нам понадобится вебпак, минимальной конфигурацией которого будет vue-loader. Также нам не нужно использовать html-extract-plugin, поскольку мы можем хранить шаблоны в js-коде.Теперь мы можем использовать однофайловые компоненты Vue. Пример однофайлового компонента ( Образец.
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 перед передачей в объект данных экземпляра 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. Вот и все.
Спасибо за внимание.
Теги: #JavaScript #frontend #vue.js #react.js #vue #react #webpack #spa #javascript framework #CMS #MPA #react #view #webpack 4 #webpack #sitefinity #reactjs. vue #builders #webpack 4 #sitefinity #microspa #mspa #microspa
-
Проблемы С Ps3 И Что С Этим Можно Сделать
19 Oct, 24 -
О Математике
19 Oct, 24 -
Клиент Питерфм/Москвафм Про
19 Oct, 24
