Ce trebuie să știți despre Vaadin - Cadrul AJAX pe partea de server cu baterie inclusă

Am scris multe despre Vaadin . Am fost atât de entuziasmat încât am scris prima carte despre ea (pe lângă Cartea lui Vaadin), ediția sa actualizată pentru Vaadin 7 și un site web însoțitor . Totuși, sunt uimit că atât de mulți oameni din lumea JVM nu au auzit niciodată de asta.

În această postare, aș dori să prezint Vaadin în contextul AJAX și SSR.

O scurtă introducere în Vaadin

Frumusețea lui Vaadin constă în simplitatea sa - scrii doar cod backend . Ai citit bine. Un dezvoltator Vaadin trebuie doar să cunoască Java sau orice limbaj JVM și API-ul Vaadin. În timpul execuției, Vaadin va crea codul pe partea clientului, adică HTML, JavaScript și CSS. Această abordare permite dezvoltatorilor să se concentreze pe funcționalitatea de bază a aplicației, făcând procesul de dezvoltare mai productiv.

Vaadin se bazează pe componente și machete, la fel ca cadrele obișnuite bazate pe desktop. Dacă cunoașteți Swing sau JavaFX, vă veți simți ca acasă.

Am menționat CSS mai sus: Vaadin vă permite să vă dezvoltați CSS într-un pachet reutilizabil dedicat numit temă . Cireasa de pe tort: dezvoltarea unei teme se poate face in paralel cu dezvoltarea backend si nu are aderare la aceasta din urma; codul nu trebuie să folosească un anumit șablon sau să adauge anumite clase la HTML.

Configurare Vaadin

Configurarea Vaadin în contextul Spring Boot este ușoară:

 <project> <properties> <java.version>17</java.version> <kotlin.version>1.9.24</kotlin.version> <vaadin.version>24.4.9</vaadin.version> <!--1--> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <!--2--> <version>${vaadin.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-spring-boot-starter</artifactId> <!--3--> </dependency> </project>

1. Setați versiunea Vaadin împreună cu alte proprietăți.
2. Păstrați versiunea tuturor dependențelor consecvente.
3. Adăugați biblioteca de integrare Vaadin Spring Boot.

Vaadin se bazează pe un Servlet Java obișnuit, care se mapează implicit la rădăcină. Integrarea Vaadin Spring Boot permite înlocuirea valorii implicite. Deoarece baza noastră de cod integrează mai multe cadre, o mapăm la /vaadin prin proprietatea relevantă:

 vaadin.url-mapping=/vaadin/*

La prima solicitare a unui client, Vaadin va returna codul motorului JavaScript. Motorul va face solicitări ulterioare pentru a prelua interfața de utilizare configurată și a schelei partea din urmă client. De atunci, motorul gestionează toate interacțiunile utilizatorului și actualizează interfața de utilizare dacă este necesar.

Primii pași cu Vaadin

Odată ce am configurat proiectul, trebuie să configuram ce componentă afișează Vaadin atunci când primește o solicitare.

 @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }

1. Asociază componenta la rădăcina subcontextului servletului Vaadin.
2. Setați titlul paginii static. În cazul în care aveți nevoie de un titlu dinamic, puteți implementa HasDynamicTitle .
3. Definiți o clasă RootComponent .
4. VerticalLayout este o clasă pe care Vaadin o redă ca div HTML
5. Starterul Vaadin Spring Boot se ocupă de injectarea listei.
6. Vaadin execută funcția init() la prima solicitare a browserului.
7. Următoarele fragmente de cod vor merge acolo.

Adăugarea de componente

În fragmentul de mai sus, am moștenit de la VerticalLayout , o componentă furnizată de Vaadin .

Sistemul de design Vaadin include un set de componente pe care le puteți utiliza pentru a vă construi interfața de utilizare. Componentele au un API Java pe partea de server în plus față de API-ul TypeScript pentru dezvoltarea pe partea client.

Utilizați o componentă creând-o mai întâi și apoi adăugând-o la un aspect care conține.

-- Crearea interfeței de utilizare în aplicațiile Vaadin

Unele componente pot conține altele și știu cum să-și aranjeze subcomponentele. De exemplu, VerticalLayout plasează componentele de sus în jos într-o coloană; HorizontalLayout le plasează de la stânga la dreapta într-un rând.

Adăugarea de componente la un aspect este simplă:

 add(Label("Hello")) //1 add(Label("world!"))

1. În contextul funcției init() .

În timp ce acest lucru funcționează perfect, putem îmbunătăți situația folosind Karibu-DSL, deoarece folosim Kotlin. Putem rescrie fragmentul de mai sus după cum urmează:

 label("Hello") //1 label("world!")

1. label() este o funcție de extensie Karibu DSL pe interfața HasComponent

Karibu este grozav, dar cu un mic dezavantaj: nu oferă funcții de extensie pentru întregul API. De exemplu, trebuie să reveniți la API-ul obișnuit pentru a adăuga subsol la o componentă Grid :

 appendFooterRow().apply { getCell(completedProp).component = Button("Clean up") { todos.removeIf { it.completed } refresh() } }

În plus, Karibu este open-source și poți oricând să contribui dacă ai ceva de adăugat.

Componentele specifice legate de UI nu sunt importante pentru înțelegerea generală. Dacă sunteți interesat, puteți oricând să verificați codul sursă .

Interacțiunile utilizatorului

Când mainframe-urile erau regii calculatoarelor, le accesai prin terminale. Interfața de utilizare a fost destul de limitată, iar redarea a avut loc pe terminalul „prost”. Calculatoarele personale au mutat funcționalitatea de redare de la server la client. În acest moment, dezvoltatorii au atașat comportamentul unei componente printr-un declanșator. De exemplu, ați putea lega imprimarea Hello world! când utilizatorul face clic pe un buton.

Aplicațiile web au schimbat această paradigmă. După cum au arătat articolele noastre anterioare, fiecare interacțiune se mapează acum la un flux cerere-răspuns, sincron sau asincron. Vaadin ne readuce la paradigma originală.

 Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }

1. Inițializați o nouă componentă Checkbox cu o valoare.

   
   

2. Când se schimbă valoarea casetei de selectare, executați lambda - schimbăm valoarea modelului de bază.

Nu este nevoie de cod JavaScript; Vaadin gestionează interacțiunea în mod independent.

Concluzie

Postarea a fost doar o scurtă introducere în Vaadin în contextul AJAX și SSR.

Majoritatea dezvoltatorilor care învață programarea pe aplicații web și sunt astfel obișnuiți cu modelul cerere-răspuns reacționează prost atunci când sunt expuși la Vaadin. Principalul lor argument este absența API-ului. IMHO, este un avantaj: unele aplicații, în special aplicațiile de afaceri, nu evoluează până la punctul în care va trebui să dezvolți clienți mobili dedicați.

Vaadin vine cu un set CSS implicit, așa cum se spune în introducere. Această temă implicită asigură că aplicațiile Vaadin arată bine de la început, oferind utilizatorilor un mediu de lucru confortabil și atrăgător din punct de vedere vizual. Cu toate acestea, puteți oricând să integrați un altul sau chiar să îl dezvoltați pe al dumneavoastră.

Beneficiul real se regaseste insa la nivel organizational. În postarea introductivă, am menționat că separarea dezvoltării frontend și backend creează probleme în timpul integrării lor. Deoarece Vaadin nu are o astfel de separare, planificarea proiectului este mai previzibilă, deoarece nu există un pas de integrare între front-end și back-end. De asemenea, tematica se poate întâmpla în paralel cu dezvoltarea.

Codul sursă complet pentru această postare poate fi găsit pe GitHub:

Pentru a merge mai departe:

• Vaadin
• Ce este Flow?
• Mai mult Vaadin

Publicat inițial la A Java Geek pe 13 octombrie 2024