Bonjour à tous, je m'appelle Andrey Yakovenko et je suis développeur web de Digital Design.
Notre entreprise a de nombreux projets mis en œuvre en utilisant le
système de gestion de contenu Web
Sitefinity , ou simplement CMS. Les raisons pour lesquelles nous l'utilisons ont été décrites plus haut dans
cet article. Le CMS est généralement une application multi-pages, et aujourd'hui je parlerai des frameworks frontaux qui peuvent ajouter aux solutions sitefinity et comment le faire.
Digression lyrique
Bien que sitefinity ait Angular.js à bord, la possibilité d'intégrer d'autres frameworks est absente en raison du code source fermé. Cependant, cela ne nous empêche pas d'utiliser les capacités d'autres frameworks.
Les exemples de cet article ne sont pas une panacée et sont principalement à des fins d'information.
Rechercher un nouveau
Depuis Angular, bien que la première version, soit déjà présente dans sitefinity, nous avons voulu faire nos amis CMS avec React ou Vue.js.
Ces deux cadres sont bons à leur manière et ont leurs propres approches de développement d'applications, mais nous ne ferons pas la comparaison suivante.
Après un rapide coup d'œil aux solutions possibles, un projet intéressant a été trouvé qui compilait des pages écrites dans React en html statique. Cette solution ne nous convenait pas, car nous ne devons pas perdre tous les plaisirs du SSR (Server Side Render) ainsi que l'utilisation de code exécutable côté client.
Des paroles aux actes
Sitefinity, comme la plupart des CMS, vous permet de composer une page avec différents éléments pour afficher du contenu (widgets). Par exemple, nous considérerons les options pour intégrer Vue.js dans des widgets prêts à l'emploi.
La première façon (simple)
Cette méthode consiste à connecter Vue.js en tant que bibliothèque au modèle de page principale.
Après cela, nous pouvons initialiser notre application dans n'importe quel widget n'importe où.
Un exemple d'un widget simple:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, })
Cependant, cela signifie que le bloc widget entier sera utilisé comme modèle, et Vue.js essaiera de l'interpoler, et afin d'afficher le message au bon endroit, il sera nécessaire d'écrire une construction spéciale qui sera affichée si quelque chose provoque une pause du code js avant le rendu, ou si l'utilisateur a désactivé JavaScript.
La solution à ce problème consiste à écrire votre propre modèle, qui dupliquera le widget. Nous élargirons notre composante.
Un exemple:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, template: '<div>{{msg}}</div>', })
Maintenant, tout le code html de notre widget sera remplacé par le modèle décrit dans le champ modèle, et afin de transférer des données du modèle de widget vers Vue, convertissez simplement le modèle en JSON de n'importe quelle manière et transférez-le dans le champ de données.
La deuxième voie (difficile)
Pour cette méthode, nous avons besoin d'un webpack, dont la configuration minimale sera vue-loader. De plus, nous n'avons pas besoin d'utiliser le plugin html-extract-plug, car nous pouvons stocker des modèles en code js.
Nous pouvons maintenant utiliser les composants à fichier unique de Vue.
Un exemple de composant à fichier unique (
Sample.vue ):
<template> <div>{{msg}}</div> </template> <script> export default { name: 'Sample', data: function () { return { msg: 'Hello world', } }, } </script>
Les composants à fichier unique ont plus d'options de style que les composants conventionnels et réduisent également le nombre de fichiers dans le répertoire du projet.
Après avoir écrit le composant widget, nous devons l'initialiser.
Exemple d'initialisation de widget:
import Vue from 'vue' import Sample from '../Sample.vue' Vue({ render: function (h) { return h(Sample) } }).$mount('#widget-id')
Mais dans ce cas, le code sera exécuté par lui-même, s'il est nécessaire de contrôler l'initialisation de l'application, par exemple, pour spécifier le sélecteur, une solution rationnelle consiste à encapsuler l'application dans une méthode qui peut être appelée à tout moment sur la page.
Développons notre exemple:
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ render: function (h) { return h(Sample) } }).$mount(selector) } initWidget('#widget-id')
Il reste à transférer les données du modèle de widget vers le composant Vue.js. Ceci est facile à faire en les écrivant en JSON avant de les passer à l'objet de données de l'instance Vue, après quoi ils peuvent être passés au composant comme accessoires.
Un exemple:
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')
Petit avis
En conclusion, je tiens à dire que chacune des méthodes proposées possède son propre environnement d'application. Ainsi, la première méthode convient à l'intégration rapide d'une seule section d'une application, par exemple, un bouton ou un formulaire, et la seconde, à son tour, est plus avancée et dispose d'un plus grand ensemble de capacités pour écrire à la fois des parties individuelles de l'application et des pages autonomes.
Cependant, les deux méthodes ont un gros inconvénient - avec cette utilisation des frameworks, il devient nécessaire de faire deux fois le même travail pour les sections des pages dont dépend le référencement.
D'autre part, si vous le souhaitez, en utilisant cette approche, vous pouvez connecter n'importe quel framework, bibliothèque ou écrire votre propre gestionnaire DOM en vanilla JavaScript ou jQuery.
C’est tout. Merci de votre attention.