Am scris multe despre   . Am fost atât de entuziasmat încât am scris   despre ea (pe lângă Cartea lui Vaadin),   pentru Vaadin 7 și un   . Totuși, sunt uimit că atât de mulți oameni din lumea JVM nu au auzit niciodată de asta. Vaadin prima carte ediția sa actualizată site web însoțitor  Î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 -   . 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,   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. scrii doar cod backend adică  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   . 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. temă  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>  </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId>  <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>  </dependency> </project>  Setați versiunea Vaadin împreună cu alte proprietăți.  Păstrați versiunea tuturor dependențelor consecvente.  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   prin proprietatea relevantă: /vaadin   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 } }  Asociază componenta la rădăcina   servletului Vaadin. subcontextului  Setați titlul paginii static. În cazul în care aveți nevoie de un titlu dinamic, puteți implementa   . HasDynamicTitle  Definiți o clasă   . RootComponent    este o clasă pe care Vaadin o redă ca   HTML VerticalLayout div  Starterul Vaadin Spring Boot se ocupă de injectarea listei.  Vaadin execută funcția   la prima solicitare a browserului. init()  Următoarele fragmente de cod vor merge acolo.  Adăugarea de componente  În fragmentul de mai sus, am moștenit de la   , o   furnizată de Vaadin . VerticalLayout componentă  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,   plasează componentele de sus în jos într-o coloană;   le plasează de la stânga la dreapta într-un rând. VerticalLayout HorizontalLayout  Adăugarea de componente la un aspect este simplă:   add(Label("Hello")) //1 add(Label("world!"))  În contextul funcției   . init()  În timp ce acest lucru funcționează perfect, putem îmbunătăți situația folosind   deoarece folosim Kotlin. Putem rescrie fragmentul de mai sus după cum urmează: Karibu-DSL,   label("Hello") //1 label("world!")    este o funcție de extensie Karibu DSL pe interfața  label() 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   când utilizatorul face clic pe un buton. Hello world!  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 }  Inițializați o nouă componentă   cu o valoare. Checkbox  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:   https://github.com/ajavageek/compare-frontends?embeble=true   Pentru a merge mai departe:   Vaadin   Ce este Flow?   Mai mult Vaadin   Publicat inițial la   pe 13 octombrie 2024 A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Acest audio este produs în limba originală a poveștii!

Prea lung; A citi

Get Free Unlimited IP Geo Data With IPinfo Lite

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

About Author

COMENTARII

Etichete suspendate

ACEST ARTICOL A FOST PREZENTAT IN

Related Stories

The World is Finally Ready for a New Internet

The #bitcoin Writing Contest by Rootstock and HackerNoon: Round 1 Results 🎉

The Robots Are Taking Over

The TechBeat: Digital Transformation Success Stories in Mezzanine Lending (2/28/2024)

The World is Finally Ready for a New Internet

The #bitcoin Writing Contest by Rootstock and HackerNoon: Round 1 Results 🎉

The Robots Are Taking Over

The TechBeat: Digital Transformation Success Stories in Mezzanine Lending (2/28/2024)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps