Šta trebate znati o Vaadinu - AJAX okvir na strani servera sa baterijom

Puno sam pisao o . Bio sam toliko oduševljen da sam napisao o tome (osim Vaadinove knjige), njeno za Vaadin 7 i . Ipak, začuđen sam da toliko ljudi u JVM svijetu nikada nije čulo za to.

U ovom postu, želio bih predstaviti Vaadin u kontekstu AJAX-a i SSR-a.

Kratki uvod u Vaadin

Ljepota Vaadina leži u njegovoj jednostavnosti - pišete samo pozadinski kod . Dobro ste pročitali. Vaadin programer treba samo da poznaje Javu ili bilo koji JVM jezik i Vaadin API. U toku izvođenja, Vaadin će kreirati kod na strani klijenta, tj . HTML, JavaScript i CSS. Ovaj pristup omogućava programerima da se fokusiraju na osnovnu funkcionalnost aplikacije, čineći proces razvoja produktivnijim.

Vaadin se nadograđuje na komponente i rasporede, baš kao što to rade obični okviri zasnovani na desktopu. Ako poznajete Swing ili JavaFX, osjećat ćete se kao kod kuće.

Spomenuo sam CSS gore: Vaadin vam omogućava da razvijete svoj CSS u namjenskom paketu za višekratnu upotrebu koji se zove tema . Šlag na torti: razvoj teme se može raditi paralelno sa razvojem pozadinske mreže i nema pridržavanja ovog drugog; kod ne mora da koristi određeni šablon ili da dodaje određene klase u HTML.

Vaadin Setup

Postavljanje Vaadina u kontekstu Spring Boot-a je lako:

 <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. Postavite Vaadin verziju zajedno sa drugim svojstvima.
2. Održavajte verziju svih ovisnosti dosljednom.
3. Dodajte Vaadin Spring Boot integracijsku biblioteku.

Vaadin se nadograđuje na regularni Java servlet, koji se podrazumevano mapira na root. Integracija Vaadin Spring Boot-a omogućava zaobilaženje zadanog. Budući da naša kodna baza integrira više okvira, mapiramo je u /vaadin preko relevantnog svojstva:

 vaadin.url-mapping=/vaadin/*

Na prvi zahtjev klijenta, Vaadin će vratiti kod JavaScript motora. Mašina će izvršiti naknadne zahtjeve za preuzimanje konfiguriranog korisničkog sučelja i skele na drugoj strani klijenta. Od tada, motor upravlja svim interakcijama korisnika i ažurira korisničko sučelje ako je potrebno.

Prvi koraci sa Vaadinom

Nakon što postavimo projekat, moramo konfigurirati koju komponentu Vaadin prikazuje kada primi zahtjev.

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

1. Povezuje komponentu s korijenom podkonteksta Vaadin servleta.
2. Postavite statički naslov stranice. U slučaju da vam je potreban dinamički naslov, možete implementirati .
3. Definirajte klasu RootComponent .
4. VerticalLayout je klasa koju Vaadin prikazuje kao HTML div
5. Vaadin Spring Boot starter se brine za ubrizgavanje liste.
6. Vaadin izvršava funkciju init() na prvi zahtjev pretraživača.
7. Sljedeći isječci koda će ići tamo.

Dodavanje komponenti

U gornjem isječku smo naslijedili od VerticalLayout , komponente koju je obezbijedio Vaadin.

Vaadin Design System uključuje skup komponenti koje možete koristiti za izgradnju korisničkog sučelja. Komponente imaju Java API na strani servera uz TypeScript API za razvoj na strani klijenta.

Komponentu koristite tako da je prvo kreirate, a zatim dodate u raspored koji sadrži.

--

Neke komponente mogu sadržavati druge, a one znaju kako rasporediti svoje podkomponente. Na primjer, VerticalLayout postavlja komponente od vrha do dna u koloni; HorizontalLayout ih postavlja slijeva nadesno u nizu.

Dodavanje komponenti u izgled je jednostavno:

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

1. U kontekstu init() funkcije.

Iako ovo savršeno funkcionira, možemo poboljšati situaciju koristeći budući da koristimo Kotlin. Gornji isječak možemo prepisati na sljedeći način:

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

1. label() je funkcija proširenja Karibu DSL-a na sučelju HasComponent

Karibu je odličan, ali s malom nedostatkom: ne nudi funkcije proširenja za cijeli API. Na primjer, morate se vratiti na regularni API da dodate podnožje u Grid komponentu:

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

S druge strane, Karibu je otvorenog koda i uvijek možete doprinijeti ako imate nešto da dodate.

Specifične komponente koje se odnose na korisničko sučelje nisu važne za opšte razumijevanje. Ako ste zainteresovani, uvijek možete provjeriti .

Korisničke interakcije

Kada su glavni računari bili kraljevi računarstva, pristupali ste im preko terminala. Korisničko sučelje je bilo prilično ograničeno, a renderiranje se dogodilo na "glupom" terminalu. Personalni računari su premjestili funkcionalnost renderiranja sa servera na klijenta. U ovom trenutku, programeri su priložili ponašanje komponenti putem okidača. Na primjer, možete vezati ispis Hello world! kada korisnik klikne na dugme.

Web aplikacije su promijenile ovu paradigmu. Kao što su naši prethodni članci pokazali, svaka interakcija se sada mapira na tok zahtjev-odgovor, sinhroni ili asinhroni. Vaadin nas vraća na prvobitnu paradigmu.

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

1. Inicijalizirajte novu komponentu Checkbox sa vrijednošću.

   
   

2. Kada se vrijednost polja za potvrdu promijeni, izvršite lambda - mijenjamo vrijednost osnovnog modela.

Nema potrebe za JavaScript kodom; Vaadin samostalno upravlja interakcijom.

Zaključak

Post je bio samo kratak uvod u Vaadin u kontekstu AJAX-a i SSR-a.

Većina programera koji uče programiranje na web aplikacijama i stoga su navikli na model zahtjev-odgovor slabo reagiraju kada su izloženi Vaadinu. Njihov glavni argument je odsustvo API-ja. IMHO, to je prednost: neke aplikacije, posebno poslovne aplikacije, ne evoluiraju do tačke u kojoj ćete morati da razvijete namenske mobilne klijente.

Vaadin dolazi sa zadanim CSS skupom, kao što je navedeno u uvodu. Ova zadana tema osigurava da Vaadin aplikacije izgledaju dobro od samog početka, pružajući korisnicima udobno i vizualno privlačno radno okruženje. Međutim, uvijek možete integrirati drugu ili čak razviti svoju.

Prava korist se, međutim, ponovo nalazi na nivou organizacije. U uvodnom postu spomenuo sam da razdvajanje frontenda i backend razvoja stvara probleme tokom njihove integracije. Budući da Vaadin nema takvo razdvajanje, planiranje projekta je predvidljivije, jer ne postoji korak integracije između prednjeg i pozadinskog dijela. Isto tako, tematizacija se može odvijati paralelno sa razvojem.

Kompletan izvorni kod za ovaj post možete pronaći na GitHubu:

Da idemo dalje:

---

Originalno objavljeno u 13. oktobra 2024