Cara membuat komponen reaksi khusus di aliran vaadin – Beragampengetahuan

Vaadin Flow adalah kerangka UI berbasis Java, yang didorong oleh backend yang paling cocok untuk Admin UI, di mana jumlah pengguna aktif dapat diprediksi dan terbatas. Dalam konteks yang dikendalikan ini, keadaan UI dapat dikelola di backend, hanya berbagi perbedaan yang diperlukan dengan pengguna untuk rendering.

Dari sudut pandang pengembang, semua konfigurasi UI disimpan dalam kode Java. Karena keadaan komponen UI dikelola langsung di dalam Java, tidak perlu secara manual membuat titik akhir istirahat yang terpisah.

Pada titik tertentu, Anda mungkin perlu mengintegrasikan komponen UI khusus yang diimplementasikan sebagai perpustakaan mandiri, seperti grafik yang tidak tersedia dalam versi Vaadin Flow gratis (open source). Dalam artikel ini, saya ingin berbagi pengalaman saya membangun jembatan antara Vaadin dan kode JavaScript menggunakan React.

Dalam posting blog ini, saya akan mengintegrasikan Plotly, alat visualisasi data populer di komunitas ilmu data yang dilisensikan di bawah MIT. Tujuan kami adalah membuat bagan khusus dan meneruskan data ke backend untuk membuatnya di UI.

arsitektur

Adaptor React Aliran Vaadin terdiri dari dua bagian: komponen Java (diperpanjang) ReactAdapterComponent) dan reaksi komponen yang ditulis dalam naskah.

Dari perspektif komponen reaksi, kami gunakan useState Kait yang disediakan oleh ReactAdapter untuk aliran Vaadin.

Dari perspektif Java, kami memperlakukannya ReactAdapterComponent Sebagai proxy mengikuti aliran komunikasi default setState metode. Semua detail implementasi diabstraksikan oleh Vaadin Flow Framework.

Pendapat

Vaadin Flow menggunakan Shadow DOM untuk merangkum komponen React khusus, memastikan isolasi gaya dan mencegah konflik dengan sisa aplikasi. Saat berintegrasi dengan komponen reaksi @JsModule Dan @TagRender dalam elemen khusus dengan Shadow Dom diaktifkan, meninggalkan struktur dan gayanya terpisah dari gaya global Vaadin.

Ikatan data antara java dan komponen reaksi dilewatkan Element.setProperty() atau ReactAdapterComponentmemungkinkan sinkronisasi keadaan mulus. Pendekatan ini memastikan gaya enkapsulasi, mencegah substitusi yang tidak disengaja, dan mempertahankan arsitektur UI modular sambil memperbarui secara dinamis antara Vaadin dan React.

Komponen khusus

Komponen Java

ini ChartComponent Kelas adalah komponen lalu lintas Vaadin yang mengintegrasikan Plotly.js untuk grafik interaktif dalam aplikasi web berbasis Java. Itu berkomentar @NpmPackage Untuk memastikan bahwa dependensi JavaScript yang diperlukan (react-plotly.js, plotly.js dan definisi naskahnya) termasuk dalam proyek. ini @JsModule Komentar Tautan Komponen ke Implementasi Berbasis Berbasis Bereaksi yang sesuai yang didefinisikan dalam Chart-Component.tsx, memungkinkan integrasi front-end yang mulus.

Diperpanjang ReactAdapterComponentKelas ini menyediakan metode untuk menggunakan data grafik sebagai struktur JSON, memfasilitasi pembaruan dinamis dan terintegrasi dengan mekanisme data-terikat data Vaadin.

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.react.ReactAdapterComponent;


@NpmPackage(value = "react-plotly.js", version = "2.6.0")
@NpmPackage(value = "plotly.js", version = "3.0.1")
@NpmPackage(value = "@types/react-plotly.js", version = "2.6.3")
@JsModule("./chart-component.tsx")
@Tag("chart-component")
public class ChartComponent extends ReactAdapterComponent 
    public void nextValue(ChartComponentValue value) 
        setState("value", value);
    



public record ChartComponentValue(List<Data> data, Layout layout)
    public record Data(String type, List<Integer> x, List<Integer> y)
    public record Layout(int width, int height, String title) 

Kami menentukan ChartComponentValue Sebagai objek transfer data, itu akan diserialisasi melalui Vaadin dan diplot untuk konfigurasi.

Komponen reaksi

Buat file baru “chart-component.tsx” di “src/main/frontend/”. Dengan implementasi khusus ReactAdapterElement:

import React from 'react';
import Plot from 'react-plotly.js';
import  ReactAdapterElement, RenderHooks  from 'Frontend/generated/flow/ReactAdapter';


class ChartComponent extends ReactAdapterElement 
   constructor() 
       super();
   


   protected override render(hooks: RenderHooks): React.ReactElement 


customElements.define('chart-component', ChartComponent);

ini ChartComponent Kelas adalah komponen web berbasis reaksi yang mengintegrasikan plotly.js untuk rendering grafik interaktif dalam aplikasi aliran Vaadin. Itu meluas ReactAdapterElementIni memungkinkan komunikasi yang mulus antara backend Java Vaadin dan React Frontend. Komponen ini menggunakan metode rendering yang digunakannya hooks.useStatememiliki nilai placeholder awal “nilai”.

Ketika data yang valid tersedia, ia membuat komponen menggambar dari pustaka react-plotly.js, lulus data dan properti tata letak secara dinamis. Akhirnya, komponen terdaftar sebagai elemen khusus dengan nama label “komponen grafik” untuk membuatnya tersedia sebagai komponen web dalam aplikasi Vaadin.

Penafian

Aliran Vaadin menggunakan berbagai mekanisme konstruksi produksi dev dan reaksi. Ingatlah untuk menguji komponen khusus Anda dalam bangunan produksi, karena beberapa masalah integrasi hanya terlihat pada tahap ini.

Juga, jika Node.js ada di lingkungan build Anda, Vaadin akan mencoba mengunduh dan menginstalnya ke direktori home Anda (yang mungkin tidak ada di beberapa lingkungan CI Runner).

sebagai kesimpulan

Kami telah menunjukkan bagaimana adaptor React Vaadin Flow dapat membantu Anda menambahkan alat JavaScript seperti plot dengan aplikasi Java Anda. Jelas bagaimana Java menjadi bagian dari itu (ReactAdapterComponent) dan bagian reaksi naskah tetap terpisah. Namun, fitur -fitur seperti Shadow Dom harus memisahkan gaya dan aman, seringkali menyebabkan lebih banyak sakit kepala bagi pengembang. Ini dapat membuat gaya lebih sulit dan tidak mudah, mengubah sesuatu yang tampaknya membantu menjadi tantangan nyata. Membawa dua dunia yang berbeda ini ke Java dan JavaScript secara alami menambahkan beberapa kompleksitas ekstra daripada menggunakan hanya Vaadin standar. Sementara hubungan ini berfungsi, tentu saja membawa kesulitan sendiri.

Bahkan dengan bagian -bagian rumit ini, ingatlah bahwa Vaadin Flow melakukan pekerjaan yang hebat: memungkinkan pengembang untuk membangun UI dengan cepat dan efisien, terutama mengelola halaman, terutama menggunakan Java. Pikirkan integrasi reaksi ini sebagai alat khusus untuk digunakan, daripada cara Anda melakukan hal -hal setiap hari ketika Anda benar -benar membutuhkan perpustakaan JavaScript tertentu.

Selalu ingat peringatan penting: uji dengan cermat komponen khusus Anda dalam pengaturan seperti produksi dan waspadai perilaku node.js dalam sistem pembangunan. Jika Anda mengelola kompleksitas ekstra ini dengan hati -hati, Anda akan memiliki lebih banyak opsi untuk mengukur aplikasi Vaadin Anda, tetapi bersiaplah untuk upaya ekstra yang mungkin diperlukan.