Halo semuanya, nama saya Andrey Yakovenko dan saya adalah seorang pengembang web Desain Digital.
Perusahaan kami memiliki banyak proyek yang diimplementasikan menggunakan
sistem manajemen konten web
sitefinity , atau hanya CMS. Alasan mengapa kami menggunakannya dijelaskan sebelumnya dalam artikel
ini . CMS, pada dasarnya, adalah Aplikasi Multi Halaman, dan hari ini saya akan berbicara tentang apa yang dapat diberikan oleh kerangka kerja frontend dalam solusi sitefinity dan bagaimana melakukannya.
Penyimpangan liris
Meskipun sitefinity memiliki Angular.js di papan tulis, kemampuan untuk mengintegrasikan kerangka kerja lain tidak ada karena kode sumber tertutup. Namun, ini tidak menghalangi kita untuk menggunakan kemampuan kerangka kerja lain.
Contoh-contoh dalam artikel ini bukan obat mujarab dan terutama untuk tujuan informasi.
Cari yang baru
Karena Angular, meskipun versi pertama, sudah ada di sitefinity, kami ingin berteman dengan CMS dengan React atau Vue.js.
Kedua kerangka kerja ini baik dengan caranya sendiri dan memiliki pendekatan sendiri untuk pengembangan aplikasi, namun kami tidak akan melakukan perbandingan selanjutnya.
Setelah melihat sekilas solusi yang mungkin, sebuah proyek menarik ditemukan yang mengkompilasi halaman yang ditulis dalam Bereaksi menjadi html statis. Solusi ini tidak cocok untuk kita, karena kita tidak perlu kehilangan semua kesenangan SSR (Server Side Render) bersama dengan penggunaan kode yang dapat dieksekusi di sisi klien.
Dari kata-kata hingga perbuatan
Sitefinity, seperti kebanyakan CMS, memungkinkan Anda membuat halaman dengan berbagai elemen untuk menampilkan konten (widget). Misalnya, kami akan mempertimbangkan opsi untuk menyematkan Vue.js di widget yang sudah jadi.
Cara pertama (sederhana)
Metode ini terdiri dalam menghubungkan Vue.js sebagai perpustakaan ke templat halaman utama.
Setelah itu, kita dapat menginisialisasi aplikasi kita di widget mana saja di mana saja.
Contoh widget sederhana:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, })
Namun, ini akan berarti bahwa seluruh blok widget akan digunakan sebagai templat, dan Vue.js akan mencoba untuk menyisipkannya, dan untuk menampilkan pesan di tempat yang tepat, akan diperlukan untuk menulis konstruksi khusus yang akan ditampilkan jika ada sesuatu yang menyebabkan kode js berhenti sebentar. sebelum rendering, atau jika pengguna menonaktifkan JavaScript.
Solusi untuk masalah ini adalah menulis template Anda sendiri, yang akan menduplikasi widget. Kami akan memperluas komponen kami.
Contoh:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, template: '<div>{{msg}}</div>', })
Sekarang semua kode html widget kami akan diganti dengan templat yang dijelaskan dalam bidang templat, dan untuk mentransfer data dari model widget ke Vue, cukup konversikan model itu ke JSON dengan cara yang mudah dan transfer ke bidang data.
Cara kedua (sulit)
Untuk metode ini, kita memerlukan webpack, dalam konfigurasi minimum yang akan menjadi vue-loader. Juga, kita tidak perlu menggunakan html-extract-plugin, as kita dapat menyimpan templat dalam kode js.
Sekarang kita dapat menggunakan komponen file tunggal Vue.
Contoh komponen file tunggal (
Sample.vue ):
<template> <div>{{msg}}</div> </template> <script> export default { name: 'Sample', data: function () { return { msg: 'Hello world', } }, } </script>
Komponen file tunggal memiliki lebih banyak opsi gaya daripada komponen konvensional, dan juga mengurangi jumlah file dalam direktori proyek.
Setelah menulis komponen widget, kita perlu menginisialisasi itu.
Contoh inisialisasi widget:
import Vue from 'vue' import Sample from '../Sample.vue' Vue({ render: function (h) { return h(Sample) } }).$mount('#widget-id')
Tetapi dalam kasus ini, kode akan dieksekusi dengan sendirinya, jika perlu untuk mengontrol inisialisasi aplikasi, misalnya, untuk menunjukkan pemilih, solusi rasional adalah membungkus aplikasi dalam metode yang dapat dipanggil kapan saja di halaman.
Mari kita memperluas contoh kita:
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ render: function (h) { return h(Sample) } }).$mount(selector) } initWidget('#widget-id')
Tetap mentransfer data model widget ke komponen Vue.js. Ini mudah dilakukan dengan menuliskannya di JSON sebelum meneruskannya ke objek data instance Vue, setelah itu mereka dapat diteruskan ke komponen sebagai alat peraga.
Contoh:
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')
Ulasan kecil
Sebagai kesimpulan, saya ingin mengatakan bahwa masing-masing metode yang diusulkan memiliki lingkungan aplikasi sendiri. Dengan demikian, metode pertama cocok untuk integrasi cepat satu bagian aplikasi, misalnya, tombol atau formulir, dan yang kedua, lebih maju, dan memiliki seperangkat kemampuan yang lebih besar untuk menulis bagian individual aplikasi dan halaman mandiri.
Namun, kedua metode memiliki satu kelemahan besar - dengan penggunaan kerangka kerja ini, menjadi perlu untuk melakukan pekerjaan yang sama dua kali untuk bagian halaman di mana SEO bergantung.
Di sisi lain, jika Anda mau, menggunakan pendekatan ini Anda dapat menghubungkan kerangka kerja apa pun, pustaka atau menulis manajer DOM Anda sendiri dalam JavaScript vanilla atau jQuery.
Itu saja. Terima kasih atas perhatian anda