Hola a todos, mi nombre es Andrey Yakovenko y soy desarrollador web de Diseño digital.
Nuestra empresa tiene muchos proyectos implementados utilizando el
sistema de gestión de contenido web
sitefinity , o simplemente CMS. Las razones por las que lo usamos se describieron anteriormente en
este artículo. CMS es, por regla general, una aplicación de páginas múltiples, y hoy hablaré sobre lo que puede aportar la implementación de marcos frontend en soluciones de sitefinity y cómo hacerlo.
Digresión lírica
Aunque sitefinity tiene Angular.js a bordo, la capacidad de integrar otros marcos no está disponible debido al código fuente cerrado. Sin embargo, esto no nos impide usar las capacidades de otros marcos.
Los ejemplos en este artículo no son una panacea y son principalmente para fines informativos.
Busca un nuevo
Dado que Angular, aunque la primera versión, ya está presente en Sitefinity, queríamos hacer que nuestros CMS sean amigos de React o Vue.js.
Ambos marcos son buenos a su manera y tienen sus propios enfoques para el desarrollo de aplicaciones, sin embargo, no haremos la próxima comparación.
Después de un vistazo rápido a las posibles soluciones, se encontró un proyecto interesante que compilaba páginas escritas en React en html estático. Esta solución no nos convenía, ya que no necesitamos perder todas las delicias de SSR (Render del lado del servidor) junto con el uso de código ejecutable en el lado del cliente.
De las palabras a los hechos
Sitefinity, como la mayoría de los CMS, le permite componer una página con varios elementos para mostrar contenido (widgets). Por ejemplo, consideraremos las opciones para incrustar Vue.js en widgets listos para usar.
La primera forma (simple)
Este método consiste en conectar Vue.js como una biblioteca a la plantilla de la página principal.
Después de eso, podemos inicializar nuestra aplicación en cualquier widget en cualquier lugar.
Un ejemplo de un widget simple:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, })
Sin embargo, esto significará que todo el bloque de widgets se usará como plantilla, y Vue.js intentará interpolarlo, y para mostrar el mensaje en el lugar correcto, será necesario escribir una construcción especial que se mostrará si algo hace que el código js haga una pausa antes de renderizar, o si el usuario tiene JavaScript deshabilitado.
La solución a este problema es escribir su propia plantilla, que duplicará el widget. Ampliaremos nuestro componente.
Un ejemplo:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, template: '<div>{{msg}}</div>', })
Ahora, todo el código html de nuestro widget se reemplazará con la plantilla descrita en el campo de la plantilla, y para transferir datos del modelo de widget a Vue, simplemente convierta el modelo a JSON de cualquier manera conveniente y transfiéralo al campo de datos.
La segunda forma (difícil)
Para este método, necesitamos un paquete web, cuya configuración mínima será vue-loader. Además, no necesitamos usar html-extract-plugin, ya que Podemos almacenar plantillas en código js.
Ahora podemos usar los componentes de un solo archivo de Vue.
Un ejemplo de un componente de archivo único (
Sample.vue ):
<template> <div>{{msg}}</div> </template> <script> export default { name: 'Sample', data: function () { return { msg: 'Hello world', } }, } </script>
Los componentes de un solo archivo tienen más opciones de estilo que los componentes convencionales, y también reducen la cantidad de archivos en el directorio del proyecto.
Después de escribir el componente del widget, necesitamos inicializarlo.
Ejemplo de inicialización del widget:
import Vue from 'vue' import Sample from '../Sample.vue' Vue({ render: function (h) { return h(Sample) } }).$mount('#widget-id')
Pero en este caso, el código se ejecutará solo, si es necesario controlar la inicialización de la aplicación, por ejemplo, para especificar el selector, una solución racional es envolver la aplicación en un método que se pueda llamar en cualquier momento en la página.
Expandamos nuestro ejemplo:
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ render: function (h) { return h(Sample) } }).$mount(selector) } initWidget('#widget-id')
Queda por transferir los datos del modelo de widget al componente Vue.js. Esto es fácil de hacer escribiéndolos en JSON antes de pasarlos al objeto de datos de la instancia de Vue, después de lo cual se pueden pasar al componente como accesorios.
Un ejemplo:
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')
Pequeña revisión
En conclusión, quiero decir que cada uno de los métodos propuestos tiene su propio entorno de aplicación. Por lo tanto, el primer método es adecuado para la integración rápida de una sola sección de una aplicación, por ejemplo, un botón o formulario, y el segundo, a su vez, es más avanzado y tiene un mayor conjunto de capacidades para escribir partes individuales de la aplicación y páginas independientes.
Sin embargo, ambos métodos tienen un gran inconveniente: con tal uso de marcos, se hace necesario hacer el mismo trabajo dos veces para las secciones de páginas de las que depende el SEO.
Por otro lado, si lo desea, con este enfoque, puede conectar cualquier marco, biblioteca o escribir su propio administrador DOM en JavaScript o jQuery.
Eso es todo. Gracias por su atencion