Olá pessoal, meu nome é Andrey Yakovenko e sou desenvolvedor web de Design Digital.
Nossa empresa possui muitos projetos implementados usando o
sistema de gerenciamento de conteúdo da web
sitefinity , ou simplesmente CMS. Os motivos pelos quais o usamos foram descritos anteriormente
neste artigo. O CMS geralmente é um aplicativo de várias páginas, e hoje vou falar sobre quais estruturas de front-end podem adicionar às soluções sitefinity e como fazê-lo.
Digressão lírica
Embora o sitefinity tenha o Angular.js integrado, a capacidade de integrar outras estruturas está ausente devido ao código-fonte fechado. No entanto, isso não nos impede de usar os recursos de outras estruturas.
Os exemplos neste artigo não são uma panacéia e são principalmente para fins informativos.
Procure um novo
Como o Angular, embora a primeira versão já esteja presente no sitefinity, queremos fazer nossos amigos do CMS com React ou Vue.js.
Ambas as estruturas são boas à sua maneira e têm suas próprias abordagens para o desenvolvimento de aplicativos, no entanto, não faremos a próxima comparação.
Após uma rápida olhada em possíveis soluções, foi encontrado um projeto interessante que compilava páginas escritas em React em html estático. Essa solução não nos convinha, pois não precisamos perder todos os prazeres do SSR (Server Side Render) junto com o uso de código executável no lado do cliente.
Das palavras às ações
O Sitefinity, como a maioria do CMS, permite compor uma página com vários elementos para exibir conteúdo (widgets). Por exemplo, consideraremos as opções para incorporar o Vue.js em widgets prontos.
A primeira maneira (simples)
Este método consiste em conectar o Vue.js como uma biblioteca ao modelo da página principal.
Depois disso, podemos inicializar nosso aplicativo em qualquer widget em qualquer lugar.
Um exemplo de um widget simples:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, })
No entanto, isso significa que todo o bloco do widget será usado como modelo e o Vue.js tentará interpolá-lo. Para exibir a mensagem no lugar certo, será necessário escrever uma construção especial que será exibida se algo fizer com que o código js pause. antes da renderização ou se o usuário tiver o JavaScript desativado.
A solução para esse problema é escrever seu próprio modelo, que duplicará o widget. Vamos expandir nosso componente.
Um exemplo:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, template: '<div>{{msg}}</div>', })
Agora todo o código html do nosso widget será substituído pelo modelo descrito no campo do modelo e, para transferir dados do modelo de widget para o Vue, basta converter o modelo em JSON de qualquer maneira conveniente e transferi-lo para o campo de dados.
O segundo caminho (difícil)
Para esse método, precisamos de um webpack, cuja configuração mínima será o vue-loader. Além disso, não precisamos usar o html-extract-plugin, pois podemos armazenar modelos no código js.
Agora podemos usar os componentes de arquivo único do Vue.
Um exemplo de um componente de arquivo único (
Sample.vue ):
<template> <div>{{msg}}</div> </template> <script> export default { name: 'Sample', data: function () { return { msg: 'Hello world', } }, } </script>
Os componentes de arquivo único têm mais opções de estilo que os componentes convencionais e também reduzem o número de arquivos no diretório do projeto.
Depois de escrever o componente do widget, precisamos inicializá-lo.
Exemplo de inicialização do widget:
import Vue from 'vue' import Sample from '../Sample.vue' Vue({ render: function (h) { return h(Sample) } }).$mount('#widget-id')
Mas, neste caso, o código será executado por si só, se for necessário controlar a inicialização do aplicativo, por exemplo, para especificar o seletor, uma solução racional é envolver o aplicativo em um método que possa ser chamado a qualquer momento na página.
Vamos expandir nosso exemplo:
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ render: function (h) { return h(Sample) } }).$mount(selector) } initWidget('#widget-id')
Resta transferir os dados do modelo do widget para o componente Vue.js. Isso é fácil gravando-os em JSON antes de passá-los para o objeto de dados da instância do Vue, após o qual eles podem ser passados para o componente como acessórios.
Um exemplo:
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')
Pequena revisão
Concluindo, quero dizer que cada um dos métodos propostos possui seu próprio ambiente de aplicativos. Assim, o primeiro método é adequado para a integração rápida de uma única seção de um aplicativo, por exemplo, um botão ou formulário, e o segundo, por sua vez, é mais avançado e possui um conjunto maior de recursos para gravar partes individuais do aplicativo e páginas independentes.
No entanto, ambos os métodos têm uma grande desvantagem - com esse uso de estruturas, torna-se necessário fazer o mesmo trabalho duas vezes para seções das páginas das quais o SEO depende.
Por outro lado, se desejado, usando essa abordagem, você pode conectar qualquer estrutura, biblioteca ou escrever seu próprio gerenciador de DOM em JavaScript ou jQuery.
Só isso. Obrigado pela atenção.